/* ==========================================================================
   Component styles built on the design tokens (theme.css). Phone-first; the
   layout adapts to a sidebar at >= 768px (UI_GUIDELINES.md §2). No raw colours
   here — everything references a --gm-* token.
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--gm-font);
  background: var(--gm-bg);
  color: var(--gm-ink);
  font-size: 15px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --- App shell ----------------------------------------------------------- */
.gm-shell { min-height: 100vh; }

.gm-header {
  position: sticky; top: 0; z-index: 1020;
  height: var(--gm-header-h);
  display: flex; align-items: center; gap: var(--gm-s3);
  padding: 0 var(--gm-s4);
  background: var(--gm-surface);
  border-bottom: 1px solid var(--gm-border);
}
.gm-header__title { font-size: 20px; font-weight: 700; margin: 0; flex: 1; }
.gm-header__action {
  border: 0; background: transparent; color: var(--gm-ink);
  width: 40px; height: 40px; border-radius: var(--gm-radius-control);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; position: relative;
}
.gm-badge-dot {
  position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--gm-radius-pill);
  background: var(--gm-danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.gm-main { padding: var(--gm-s4); padding-bottom: calc(var(--gm-tabbar-h) + var(--gm-s6)); }

/* --- Bottom tab bar (mobile) --------------------------------------------- */
.gm-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  height: calc(var(--gm-tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch;
  background: var(--gm-surface);
  border-top: 1px solid var(--gm-border);
}
.gm-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; text-decoration: none;
  color: var(--gm-ink-muted); font-size: 11px; font-weight: 500;
}
.gm-tab i { font-size: 20px; }
.gm-tab.is-active { color: var(--gm-primary); }

/* Centre FAB */
.gm-fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--gm-tabbar-h) / 2 + env(safe-area-inset-bottom) - 4px);
  z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gm-primary); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: var(--gm-shadow-fab); cursor: pointer;
  text-decoration: none;
}

/* --- Sidebar (desktop) --------------------------------------------------- */
.gm-sidebar { display: none; }

@media (min-width: 768px) {
  .gm-tabbar, .gm-fab { display: none; }
  .gm-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--gm-sidebar-w);
    background: var(--gm-surface); border-right: 1px solid var(--gm-border);
    padding: var(--gm-s5) var(--gm-s3);
  }
  .gm-sidebar__brand { font-size: 18px; font-weight: 700; color: var(--gm-primary); padding: 0 var(--gm-s3) var(--gm-s5); }
  .gm-sidebar__link {
    display: flex; align-items: center; gap: var(--gm-s3);
    padding: var(--gm-s3); border-radius: var(--gm-radius-control);
    color: var(--gm-ink-muted); text-decoration: none; font-weight: 500;
    margin-bottom: 2px;
  }
  .gm-sidebar__link i { font-size: 18px; }
  .gm-sidebar__link.is-active { background: var(--gm-primary-soft); color: var(--gm-primary); }
  .gm-sidebar__cta { margin: var(--gm-s3); }

  /* Independent scroll: brand pinned, links scroll, CTA + logout pinned.
     min-height:0 lets the nav shrink so overflow-y actually engages. */
  .gm-sidebar__brand  { flex: 0 0 auto; }
  .gm-sidebar__nav    { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .gm-sidebar__footer { flex: 0 0 auto; }

  .gm-shell.gm-shell--app { padding-left: var(--gm-sidebar-w); }
  .gm-header { padding-left: var(--gm-s5); }
  .gm-main { max-width: 1140px; margin: 0 auto; padding-bottom: var(--gm-s8); }
}

/* --- Modals -------------------------------------------------------------- */
/* Bootstrap's .modal-dialog-scrollable assumes header/body/footer are direct
   children of .modal-content. Our CRUD modals wrap the body + footer in a
   <form>, so the form (not the body) becomes the flex child and the body can
   no longer bound its own scroll height — the footer (Save/Create) is pushed
   below the viewport. Making the wrapping form the flex column restores the
   scroll chain: fixed header, scrollable body, sticky footer. Applies to every
   CRUD modal (customers, vehicles, services, staff) with one rule. */
.modal-dialog-scrollable .modal-content > form {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body { min-height: 0; }

/* --- Cards & components -------------------------------------------------- */
.gm-card {
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-card); box-shadow: var(--gm-shadow-card);
  padding: var(--gm-s4); margin-bottom: var(--gm-s3);
}
@media (min-width: 768px) { .gm-card { padding: var(--gm-s5); } }

.gm-section-title { font-size: 17px; font-weight: 600; margin: 0 0 var(--gm-s3); }

.gm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--gm-radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.gm-pill--trial    { color: var(--gm-primary); background: var(--gm-primary-soft); }
.gm-pill--active   { color: var(--gm-success); background: var(--gm-success-soft); }
.gm-pill--warning  { color: var(--gm-warning); background: var(--gm-warning-soft); }
.gm-pill--danger   { color: var(--gm-danger);  background: var(--gm-danger-soft); }

.gm-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; flex: 1;
}
.gm-stat__icon {
  width: 44px; height: 44px; border-radius: var(--gm-radius-control);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--gm-primary-soft); color: var(--gm-primary);
}
.gm-stat__value { font-size: 22px; font-weight: 700; }
.gm-stat__label { font-size: 12px; color: var(--gm-ink-subtle); }

.gm-money { color: var(--gm-money); font-weight: 700; }

.gm-avatar {
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: var(--gm-primary-soft); color: var(--gm-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex: 0 0 auto;
}

.gm-empty { text-align: center; padding: var(--gm-s8) var(--gm-s4); color: var(--gm-ink-muted); }
.gm-empty i { font-size: 40px; color: var(--gm-ink-subtle); display: block; margin-bottom: var(--gm-s3); }

/* --- Forms & buttons ----------------------------------------------------- */
.gm-form-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: block; }
.form-control, .form-select {
  min-height: 48px; border-radius: var(--gm-radius-control);
  border-color: var(--gm-border); font-size: 15px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gm-primary); box-shadow: 0 0 0 3px var(--gm-primary-soft);
}
.btn { border-radius: var(--gm-radius-control); min-height: 48px; font-weight: 600; }
.btn-primary { background: var(--gm-primary); border-color: var(--gm-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--gm-primary-hover); border-color: var(--gm-primary-hover); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; }

.gm-btn-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: gm-spin .6s linear infinite; vertical-align: -2px; margin-right: 6px;
}
@keyframes gm-spin { to { transform: rotate(360deg); } }

/* --- Auth screens -------------------------------------------------------- */
.gm-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--gm-s4); background: var(--gm-bg);
}
.gm-auth__card { width: 100%; max-width: 400px; }
.gm-auth__brand { text-align: center; margin-bottom: var(--gm-s5); }
.gm-auth__brand .gm-logo {
  width: 56px; height: 56px; border-radius: 16px; background: var(--gm-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: var(--gm-s3);
}
.gm-auth__title { font-size: 22px; font-weight: 700; margin: 0; }
.gm-auth__subtitle { color: var(--gm-ink-muted); font-size: 14px; margin-top: 4px; }
.gm-auth__foot { text-align: center; margin-top: var(--gm-s4); font-size: 14px; color: var(--gm-ink-muted); }
.gm-auth__foot a { color: var(--gm-primary); font-weight: 600; text-decoration: none; }

/* --- Banners ------------------------------------------------------------- */
.gm-banner {
  border-radius: var(--gm-radius-card); padding: var(--gm-s3) var(--gm-s4);
  margin-bottom: var(--gm-s3); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: var(--gm-s2);
}
.gm-banner--trial { background: var(--gm-primary-soft); color: var(--gm-primary); }
.gm-banner--warning { background: var(--gm-warning-soft); color: var(--gm-warning); }

/* --- Toasts (ui.js) ------------------------------------------------------ */
.gm-toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2000; width: calc(100% - 24px); max-width: 420px; }
.gm-toast {
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-left: 4px solid var(--gm-ink-muted);
  border-radius: var(--gm-radius-control); box-shadow: var(--gm-shadow-pop);
  padding: var(--gm-s3) var(--gm-s4); margin-bottom: var(--gm-s2);
  font-size: 14px; display: flex; align-items: center; gap: var(--gm-s2);
  animation: gm-toast-in .2s ease;
}
.gm-toast--success { border-left-color: var(--gm-success); }
.gm-toast--error   { border-left-color: var(--gm-danger); }
.gm-toast--warning { border-left-color: var(--gm-warning); }
.gm-toast--info    { border-left-color: var(--gm-info); }
@keyframes gm-toast-in { from { opacity: 0; transform: translateY(-8px); } }

.invalid-feedback { font-size: 13px; }

/* --- List screens -------------------------------------------------------- */
.gm-filterbar { display: flex; gap: var(--gm-s2); margin-bottom: var(--gm-s3); flex-wrap: wrap; }
.gm-search { position: relative; flex: 1 1 auto; min-width: 180px; }
.gm-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gm-ink-subtle); }
.gm-search input { padding-left: 40px; }
.gm-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--gm-s3); -webkit-overflow-scrolling: touch; }
.gm-tab-chip {
  border: 1px solid var(--gm-border); background: var(--gm-surface); color: var(--gm-ink-muted);
  border-radius: var(--gm-radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.gm-tab-chip.is-active { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }

.gm-list-item {
  display: flex; align-items: center; gap: var(--gm-s3);
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-card); padding: var(--gm-s3) var(--gm-s4); margin-bottom: var(--gm-s2);
}
.gm-list-item__body { flex: 1; min-width: 0; }
.gm-list-item__title { font-weight: 700; font-size: 15px; }
.gm-list-item__sub { color: var(--gm-ink-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-list-item__meta { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.gm-list-actions { display: flex; gap: 6px; }
.gm-icon-btn {
  border: 0; background: var(--gm-primary-soft); color: var(--gm-primary);
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.gm-icon-btn--danger { background: var(--gm-danger-soft); color: var(--gm-danger); }
.gm-pager { display: flex; align-items: center; justify-content: center; margin-top: var(--gm-s3); }
.gm-pager .btn { border: 1px solid var(--gm-border); }

.gm-page-actions { display: flex; justify-content: flex-end; margin-bottom: var(--gm-s3); }
[aria-busy="true"] { opacity: .5; transition: opacity .1s; }

/* --- Job Workspace ------------------------------------------------------- */
.gm-job-header {
  background: var(--gm-primary); color: #fff;
  border-radius: var(--gm-radius-card); padding: var(--gm-s4); margin-bottom: var(--gm-s3);
}
.gm-job-header__no { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.gm-job-header__sub { opacity: .85; font-size: 14px; }
.gm-job-header .gm-pill { background: rgba(255,255,255,.18); color: #fff; }

/* Horizontal status stepper */
.gm-stepper { display: flex; align-items: flex-start; overflow-x: auto; padding: var(--gm-s2) 0; gap: 0; }
.gm-step { flex: 1 1 0; min-width: 72px; text-align: center; position: relative; }
.gm-step__dot {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 6px;
  border: 2px solid var(--gm-border); background: var(--gm-surface);
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gm-ink-subtle);
  position: relative; z-index: 1;
}
.gm-step__label { font-size: 11px; color: var(--gm-ink-muted); }
.gm-step::before {
  content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--gm-border);
}
.gm-step:first-child::before { display: none; }
.gm-step.is-done .gm-step__dot { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }
.gm-step.is-done::before { background: var(--gm-primary); }
.gm-step.is-current .gm-step__dot { border-color: var(--gm-primary); color: var(--gm-primary); box-shadow: 0 0 0 4px var(--gm-primary-soft); }
.gm-step.is-current .gm-step__label { color: var(--gm-primary); font-weight: 700; }

/* Activity feed (chat style, newest at bottom) */
.gm-feed { max-height: 420px; overflow-y: auto; }
.gm-feed__item { display: flex; gap: var(--gm-s3); padding: var(--gm-s2) 0; }
.gm-feed__icon {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gm-primary-soft); color: var(--gm-primary);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.gm-feed__body { flex: 1; min-width: 0; }
.gm-feed__text { font-size: 14px; }
.gm-feed__meta { font-size: 12px; color: var(--gm-ink-subtle); }

.gm-note { border-left: 3px solid var(--gm-border); padding: 6px 0 6px var(--gm-s3); margin-bottom: var(--gm-s2); }
.gm-note--technician { border-left-color: var(--gm-info); }
.gm-note--internal { border-left-color: var(--gm-ink-subtle); }
.gm-note--customer { border-left-color: var(--gm-success); }

.gm-attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--gm-s2); }
.gm-attach { border: 1px solid var(--gm-border); border-radius: var(--gm-radius-control); overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--gm-bg); }
.gm-attach img { width: 100%; height: 100%; object-fit: cover; }
.gm-attach i { font-size: 24px; color: var(--gm-ink-subtle); }

.gm-svc-row { display: flex; align-items: center; gap: var(--gm-s2); padding: 8px 0; border-bottom: 1px solid var(--gm-border); }
.gm-svc-row:last-child { border-bottom: 0; }

@media (min-width: 992px) {
  .gm-ws-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--gm-s3); align-items: start; }
}

/* ---------- AI job intake & review (Phase 4B) ---------------------------- */
/* Built on the same tokens as everything else: no raw colours here, so a
   reskin of theme.css restyles the AI screens too (UI_GUIDELINES §1). */

.gm-optional { font-weight: 400; font-size: 13px; color: var(--gm-ink-subtle); }
.gm-hint { font-size: 13px; color: var(--gm-ink-muted); margin: 0 0 var(--gm-s3); }
.gm-upper { text-transform: uppercase; }

/* Photo slots — 44px+ targets, thumb-friendly, three across on a phone */
.gm-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gm-s2); }
.gm-slot {
  position: relative; border: 1px dashed var(--gm-border); background: var(--gm-bg);
  border-radius: var(--gm-radius-control); padding: 0; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.gm-slot__preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--gm-radius-control); }
.gm-slot__preview i { font-size: 22px; color: var(--gm-ink-subtle); }
.gm-slot__preview img { width: 100%; height: 100%; object-fit: cover; }
.gm-slot__label { position: absolute; bottom: 4px; font-size: 11px; color: var(--gm-ink-muted); }
.gm-slot.is-filled { border-style: solid; border-color: var(--gm-primary); }
.gm-slot.is-filled .gm-slot__label { color: #fff; text-shadow: 0 1px 2px rgba(15,23,42,.7); }
.gm-slot.is-busy { opacity: .5; }
.gm-slot__remove {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gm-danger); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px;
}

/* Voice recorder — WhatsApp-style hold to talk */
.gm-recorder { display: flex; align-items: center; gap: var(--gm-s3); }
.gm-recorder__btn {
  width: 64px; height: 64px; flex: 0 0 auto; border: 0; border-radius: 50%;
  background: var(--gm-primary); color: #fff; font-size: 24px; box-shadow: var(--gm-shadow-fab);
  touch-action: none; user-select: none;
}
.gm-recorder__btn.is-recording { background: var(--gm-danger); animation: gm-pulse 1s ease-in-out infinite; }
@keyframes gm-pulse { 50% { transform: scale(1.06); } }
.gm-recorder__body { flex: 1; min-width: 0; }
.gm-recorder__hint { font-size: 13px; color: var(--gm-ink-muted); }
.gm-recorder__timer { font-size: 15px; font-weight: 700; color: var(--gm-danger); }
.gm-recorder__wave { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-bottom: 4px; }
.gm-recorder__wave span { width: 3px; background: var(--gm-danger); border-radius: 2px; animation: gm-wave .9s ease-in-out infinite; }
.gm-recorder__wave span:nth-child(2) { animation-delay: .1s; }
.gm-recorder__wave span:nth-child(3) { animation-delay: .2s; }
.gm-recorder__wave span:nth-child(4) { animation-delay: .3s; }
.gm-recorder__wave span:nth-child(5) { animation-delay: .4s; }
@keyframes gm-wave { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.gm-recorder__done { display: flex; align-items: center; gap: var(--gm-s2); margin-top: var(--gm-s3); }

/* Sticky actions — the continue button is always reachable one-handed */
.gm-sticky-actions {
  position: sticky; bottom: calc(var(--gm-tabbar-h) + var(--gm-s2)); z-index: 5;
  display: flex; gap: var(--gm-s2); padding: var(--gm-s3) 0;
  background: linear-gradient(to top, var(--gm-bg) 70%, transparent);
}
.gm-sticky-actions .btn { flex: 1; height: 48px; }
.gm-sticky-actions .btn-primary { flex: 2; }

/* Analysing overlay — progress, never a provider or model name */
.gm-analyzing { position: fixed; inset: 0; z-index: 1500; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: var(--gm-s4); }
.gm-analyzing__card { background: var(--gm-surface); border-radius: var(--gm-radius-card); padding: var(--gm-s6) var(--gm-s5); text-align: center; max-width: 320px; width: 100%; }
.gm-analyzing__spinner { width: 38px; height: 38px; margin: 0 auto var(--gm-s3); border: 3px solid var(--gm-primary-soft); border-top-color: var(--gm-primary); border-radius: 50%; animation: gm-spin .8s linear infinite; }
@keyframes gm-spin { to { transform: rotate(360deg); } }
.gm-analyzing__step { font-weight: 600; font-size: 15px; }
.gm-analyzing__note { font-size: 13px; color: var(--gm-ink-subtle); margin-top: 4px; }

/* Review screen */
.gm-review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gm-s3); margin-bottom: var(--gm-s3); }
.gm-review-head__title { font-size: 18px; font-weight: 700; }
.gm-review-head__sub { font-size: 13px; color: var(--gm-ink-muted); }

/* Confidence: the LEVEL is the message; the score lives in the tooltip */
.gm-conf { display: inline-block; padding: 2px 8px; border-radius: var(--gm-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .2px; cursor: help; }
.gm-conf--high   { color: var(--gm-success); background: var(--gm-success-soft); }
.gm-conf--medium { color: var(--gm-warning); background: var(--gm-warning-soft); }
.gm-conf--low    { color: var(--gm-danger);  background: var(--gm-danger-soft); }

.gm-why { font-size: 12px; color: var(--gm-ink-muted); margin-top: 4px; line-height: 1.4; }
.gm-why i { color: var(--gm-ink-subtle); }

.gm-card--missing { border-left: 3px solid var(--gm-info); }
.gm-card--warn { border-left: 3px solid var(--gm-warning); }
.gm-missing { margin: 0; padding-left: 18px; font-size: 14px; color: var(--gm-ink-muted); }
.gm-missing li { margin-bottom: 4px; }

.gm-transcript { background: var(--gm-bg); border-radius: var(--gm-radius-control); padding: var(--gm-s3); margin-bottom: var(--gm-s3); }
.gm-transcript__label { font-size: 12px; font-weight: 600; color: var(--gm-ink-subtle); margin-bottom: 4px; }
.gm-transcript__text { font-size: 14px; line-height: 1.5; }

.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-chip { padding: 4px 10px; border-radius: var(--gm-radius-pill); background: var(--gm-primary-soft); color: var(--gm-primary); font-size: 12px; font-weight: 600; }

.gm-svc-suggestion { display: flex; align-items: flex-start; gap: var(--gm-s2); padding: 10px 0; border-bottom: 1px solid var(--gm-border); cursor: pointer; }
.gm-svc-suggestion:last-child { border-bottom: 0; }
.gm-svc-suggestion__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-svc-suggestion__name { font-weight: 600; font-size: 15px; }
.gm-svc-suggestion.is-rejected { opacity: .5; }
.gm-svc-suggestion.is-rejected .gm-svc-suggestion__name { text-decoration: line-through; }
.mb-3.is-cleared input, .mb-3.is-cleared textarea { border-style: dashed; }

/* Entry point card on the manual create screen */
.gm-ai-cta { display: flex; align-items: center; gap: var(--gm-s3); text-decoration: none; color: inherit; }
.gm-ai-cta__icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--gm-radius-control); background: var(--gm-primary-soft); color: var(--gm-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.gm-ai-cta__title { font-weight: 700; font-size: 15px; }
.gm-ai-cta__sub { font-size: 13px; color: var(--gm-ink-muted); }

/* ---------- Commercial: invoices, payments, receipts (Phase 5) ----------- */
/* Money is the thing an owner scans for, so amounts are big, balances are loud,
   and nothing else on the screen competes with them (UI brief). */

.gm-outstanding { display: flex; align-items: center; justify-content: space-between; }
.gm-outstanding__label { font-size: 12px; color: var(--gm-ink-subtle); text-transform: uppercase; letter-spacing: .5px; }
.gm-outstanding__value { font-size: 26px; font-weight: 700; color: var(--gm-danger); }
.gm-outstanding i { font-size: 28px; color: var(--gm-ink-subtle); }

.gm-due-chip {
  font-size: 11px; font-weight: 700; color: var(--gm-danger);
  background: var(--gm-danger-soft); padding: 2px 8px; border-radius: var(--gm-radius-pill);
}

.gm-invoice-head {
  background: var(--gm-primary); color: #fff; border-radius: var(--gm-radius-card);
  padding: var(--gm-s4); margin-bottom: var(--gm-s3);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gm-s3);
}
.gm-invoice-head--active { background: var(--gm-success); }
.gm-invoice-head--danger { background: var(--gm-danger); }
.gm-invoice-head--warning { background: var(--gm-warning); }
.gm-invoice-head--muted { background: var(--gm-ink-muted); }
.gm-invoice-head__no { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.gm-invoice-head__sub { opacity: .9; font-size: 14px; }
.gm-invoice-head .gm-pill { background: rgba(255,255,255,.2); color: #fff; }

.gm-amounts__row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 14px; }
.gm-amounts__total { font-size: 22px; font-weight: 700; }
.gm-amounts__grand { border-top: 1px solid var(--gm-border); margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 16px; }
.gm-amounts__due { color: var(--gm-danger); font-weight: 700; font-size: 16px; border-top: 1px solid var(--gm-border); margin-top: 4px; padding-top: 8px; }

.gm-due-banner {
  background: var(--gm-danger-soft); color: var(--gm-danger); border-radius: var(--gm-radius-control);
  padding: 10px 14px; margin-bottom: var(--gm-s3); font-size: 14px; text-align: center;
}
.gm-tender { border-bottom: 1px dashed var(--gm-border); padding-bottom: 6px; margin-bottom: 10px; }
.gm-tender:last-child { border-bottom: 0; }
.gm-tender-total { font-size: 13px; color: var(--gm-ink-muted); margin-top: 6px; }
.gm-tender-total.is-over { color: var(--gm-danger); font-weight: 700; }

.gm-invoice-preview { max-height: 260px; overflow-y: auto; margin-bottom: var(--gm-s3); }
.gm-invoice-preview__items { margin-bottom: var(--gm-s2); }

/* The document rendered inside the app shell: it brings its own styles, so all
   we do is give it a frame and let it scroll on a narrow screen. */
.gm-doc-preview { padding: 0; overflow-x: auto; }
.gm-doc-preview .doc-sheet { max-width: 100%; box-shadow: none; }

.gm-pill--muted { color: var(--gm-ink-muted); background: #F1F5F9; }

@media print {
  .gm-tabbar, .gm-sidebar, .gm-header, .gm-fab, .gm-sticky-actions { display: none !important; }
  .gm-main { padding: 0 !important; }
  .gm-card { border: 0 !important; box-shadow: none !important; }
}

/* ---------- Customer experience: communication, timeline, feedback (Phase 6) - */
/* Relationship screens, not a messaging app: history reads like a story, and the
   send actions sit where the work already happens. */

.gm-customer-head {
  display: flex; align-items: center; gap: var(--gm-s3);
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-card); padding: var(--gm-s4); margin-bottom: var(--gm-s3);
}
.gm-customer-head__name { font-size: 18px; font-weight: 700; }
.gm-customer-head__sub { font-size: 14px; color: var(--gm-ink-muted); }
.gm-avatar--lg { width: 52px; height: 52px; font-size: 18px; }

.gm-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gm-s2);
  margin-bottom: var(--gm-s3);
}
.gm-stat-row .gm-stat {
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-control); padding: var(--gm-s3); text-align: center;
  display: block;
}
.gm-stat-row .gm-stat__value { font-size: 17px; font-weight: 700; }
.gm-stat__value--due { color: var(--gm-danger); }

/* A message in a history. Compact enough that twenty fit on a phone screen. */
.gm-msg { display: flex; gap: var(--gm-s3); padding: var(--gm-s3) 0; border-bottom: 1px solid var(--gm-border); }
.gm-msg:last-child { border-bottom: 0; }
.gm-msg--compact { padding: 8px 0; }
.gm-msg__icon {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  background: var(--gm-primary-soft); color: var(--gm-primary);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.gm-msg__body { flex: 1; min-width: 0; }
.gm-msg__title { font-weight: 600; font-size: 14px; }
.gm-msg__meta { font-size: 12px; color: var(--gm-ink-subtle); }
.gm-msg__text { font-size: 13px; color: var(--gm-ink-muted); margin-top: 4px; white-space: pre-line; }
.gm-msg-list { margin-top: var(--gm-s3); border-top: 1px solid var(--gm-border); }

/* Quick sends: large, thumb-sized, wrapped — one tap from the workspace. */
.gm-quick-sends { display: flex; flex-wrap: wrap; gap: var(--gm-s2); }
.gm-quick-send {
  border: 1px solid var(--gm-border); background: var(--gm-surface);
  min-height: 44px; padding: 0 14px; border-radius: var(--gm-radius-control);
  font-size: 14px; font-weight: 600;
}
.gm-quick-send:hover { border-color: var(--gm-primary); color: var(--gm-primary); }

/* Feedback */
.gm-feedback { padding: var(--gm-s3) 0; border-bottom: 1px solid var(--gm-border); }
.gm-feedback:last-child { border-bottom: 0; }
.gm-feedback__text { font-size: 14px; margin-top: 4px; }
.gm-stars { color: var(--gm-warning); font-size: 18px; letter-spacing: 2px; }

.gm-rating { display: flex; gap: var(--gm-s2); }
.gm-rating__star input { position: absolute; opacity: 0; }
.gm-rating__star span {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-control); font-weight: 700; cursor: pointer;
}
.gm-rating__star input:checked + span { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }

/* Preferences: a checkbox list with targets big enough for a workshop thumb. */
.gm-pref { display: flex; align-items: center; gap: var(--gm-s3); min-height: 44px; font-size: 14px; }
.gm-pref input { width: 20px; height: 20px; }

/* The reminder work queue */
.gm-reminder { display: flex; align-items: center; gap: var(--gm-s3); flex-wrap: wrap; }
.gm-reminder__body { flex: 1; min-width: 180px; }
.gm-reminder__actions { display: flex; gap: var(--gm-s2); }
.gm-reminder__actions .btn { min-height: 44px; }

@media (max-width: 420px) {
  .gm-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   Phase 7 — dashboards.

   Two rules drive all of it: it must be readable at 390px in a workshop
   (UI_GUIDELINES §10), and status is a WORD from analytics that becomes a colour
   only here. No component below computes anything.
   =========================================================================== */

.gm-dash-head { display: flex; flex-direction: column; gap: var(--gm-s3); }
.gm-dash-head__sub { color: var(--gm-ink-muted); font-size: 13px; margin: 2px 0 0; }

.gm-dash-switch { display: flex; gap: var(--gm-s2); overflow-x: auto; padding-bottom: 2px; }
.gm-dash-switch__item {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--gm-border);
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--gm-ink-muted); text-decoration: none;
}
.gm-dash-switch__item.is-active { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }

/* Period selector — buttons, not a dropdown: one tap, no hunting. */
.gm-period__keys { display: flex; flex-wrap: wrap; gap: var(--gm-s2); }
.gm-period__key {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--gm-border);
  background: var(--gm-surface); border-radius: var(--gm-radius-control);
  font-size: 13px; font-weight: 600; color: var(--gm-ink-muted);
}
.gm-period__key.is-active { background: var(--gm-primary-soft); border-color: var(--gm-primary); color: var(--gm-primary); }
.gm-period__custom { display: flex; gap: var(--gm-s2); margin-top: var(--gm-s3); flex-wrap: wrap; }
.gm-period__custom .form-control { max-width: 170px; }

/* KPI cards. Two per row on a phone, more as the screen allows. */
.gm-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--gm-s3); margin-bottom: var(--gm-s4);
}
.gm-kpi {
  background: var(--gm-surface); border: 1px solid var(--gm-border);
  border-left: 3px solid var(--gm-border);
  border-radius: var(--gm-radius-card); padding: var(--gm-s3); min-height: 104px;
  display: flex; flex-direction: column; gap: 2px;
}
.gm-kpi[data-drill] { cursor: pointer; }
.gm-kpi[data-drill]:hover, .gm-kpi[data-drill]:focus-visible { border-color: var(--gm-primary); outline: none; }
.gm-kpi--active   { border-left-color: var(--gm-success); }
.gm-kpi--warning  { border-left-color: var(--gm-warning); }
.gm-kpi--danger   { border-left-color: var(--gm-danger); }
.gm-kpi--trial    { border-left-color: var(--gm-border); }
.gm-kpi__label { font-size: 12px; font-weight: 600; color: var(--gm-ink-muted); text-transform: uppercase; letter-spacing: .3px; }
.gm-kpi__drill { font-size: 10px; opacity: .5; margin-left: 2px; }
.gm-kpi__value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.gm-kpi__trend { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.gm-kpi__trend--good    { color: var(--gm-success); }
.gm-kpi__trend--bad     { color: var(--gm-danger); }
.gm-kpi__trend--neutral { color: var(--gm-ink-subtle); font-weight: 500; }
.gm-kpi__vs { color: var(--gm-ink-subtle); font-weight: 500; }
/* The action line is the point of the widget — hidden on a phone only because
   the tile is a summary there; the drill-down repeats it in full. */
.gm-kpi__action { font-size: 11px; color: var(--gm-ink-subtle); line-height: 1.35; margin-top: auto; display: none; }
@media (min-width: 768px) { .gm-kpi__action { display: block; } }

/* Breakdown bars — CSS, no chart library (the data is chart-ready regardless). */
.gm-split { padding: var(--gm-s2) 0; }
.gm-split__head { display: flex; justify-content: space-between; font-size: 13px; gap: var(--gm-s2); }
.gm-split__label { font-weight: 600; }
.gm-split__value { color: var(--gm-ink-muted); white-space: nowrap; }
.gm-split__share { color: var(--gm-ink-subtle); font-size: 12px; }
.gm-split__bar { height: 6px; background: var(--gm-border); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.gm-split__fill { height: 100%; background: var(--gm-primary); border-radius: 999px; }

/* Rankings and drill-down tables */
.gm-table-scroll { overflow-x: auto; }
.gm-rank { width: 100%; border-collapse: collapse; font-size: 13px; }
.gm-rank td, .gm-rank th { padding: 10px 8px; border-bottom: 1px solid var(--gm-border); text-align: left; white-space: nowrap; }
.gm-rank th { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--gm-ink-subtle); }
.gm-rank__label { font-weight: 600; white-space: normal; }
.gm-rank__meta { color: var(--gm-ink-muted); }
.gm-rank__value { text-align: right; font-weight: 700; }
.gm-widget__action { font-size: 12px; color: var(--gm-ink-subtle); margin: var(--gm-s3) 0 0; line-height: 1.4; }

/* The unified activity feed */
.gm-feed { display: flex; align-items: center; gap: var(--gm-s3); padding: 10px 0; border-bottom: 1px solid var(--gm-border); color: inherit; text-decoration: none; }
.gm-feed:last-child { border-bottom: 0; }
.gm-feed__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 14px; }
.gm-feed__icon--job { background: var(--gm-primary-soft); color: var(--gm-primary); }
.gm-feed__icon--customer { background: var(--gm-success-soft); color: var(--gm-success); }
.gm-feed__icon--communication { background: var(--gm-warning-soft); color: var(--gm-warning); }
.gm-feed__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-feed__title { font-size: 13px; font-weight: 600; }
.gm-feed__sub { font-size: 12px; color: var(--gm-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-feed__time { font-size: 11px; color: var(--gm-ink-subtle); flex: none; }

/* Drill-down modal */
.gm-drill__meaning { font-size: 12px; color: var(--gm-ink-muted); margin: 4px 0 0; max-width: 46ch; }
.gm-drill__table td { white-space: nowrap; }
.gm-drill__link { display: inline-block; margin-top: var(--gm-s3); font-weight: 600; color: var(--gm-primary); text-decoration: none; }

/* The metric catalogue */
.gm-metric-def { padding: var(--gm-s3) 0; border-bottom: 1px solid var(--gm-border); }
.gm-metric-def:last-child { border-bottom: 0; }
.gm-metric-def__head { display: flex; align-items: center; gap: var(--gm-s2); flex-wrap: wrap; }
.gm-metric-def__name { font-weight: 700; }
.gm-metric-def__desc { font-size: 13px; color: var(--gm-ink-muted); margin: 6px 0 0; }
.gm-metric-def__action { font-size: 13px; margin: 6px 0 0; }
.gm-metric-def__meta { font-size: 11px; color: var(--gm-ink-subtle); margin: 6px 0 0; }
.gm-setup { border-left: 3px solid var(--gm-warning); }

/* ===========================================================================
   Phase 8 — system health screen (owner only).
   Same rule as the dashboards: status is a WORD from the health engine that
   becomes a colour only here.
   =========================================================================== */

.gm-health-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gm-s3); flex-wrap: wrap; border-left: 3px solid var(--gm-border); }
.gm-health-head--active { border-left-color: var(--gm-success); }
.gm-health-head--warning { border-left-color: var(--gm-warning); }
.gm-health-head--danger { border-left-color: var(--gm-danger); }
.gm-health-actions { display: flex; gap: var(--gm-s2); flex-wrap: wrap; }
.gm-health-actions .btn { min-height: 40px; }

.gm-check { display: flex; gap: var(--gm-s3); padding: 12px 0; border-bottom: 1px solid var(--gm-border); }
.gm-check:last-child { border-bottom: 0; }
.gm-check__icon { font-size: 18px; margin-top: 1px; flex: none; }
.gm-check--active .gm-check__icon { color: var(--gm-success); }
.gm-check--warning .gm-check__icon { color: var(--gm-warning); }
.gm-check--danger .gm-check__icon { color: var(--gm-danger); }
.gm-check--trial .gm-check__icon { color: var(--gm-ink-subtle); }
.gm-check__body { flex: 1; min-width: 0; }
.gm-check__label { font-weight: 600; font-size: 14px; }
.gm-check__message { font-size: 13px; color: var(--gm-ink-muted); margin-top: 2px; }
.gm-check__hint { font-size: 12px; color: var(--gm-primary); margin-top: 4px; }
.gm-check__detail { font-size: 11px; color: var(--gm-ink-subtle); margin-top: 4px; font-family: ui-monospace, monospace; word-break: break-all; }

/* ===========================================================================
   Phase 9 — AI assistant, copilot, insights.
   Answers show their evidence; status/confidence is a WORD-to-token mapping,
   same rule as the dashboards.
   =========================================================================== */

.gm-ask { display: flex; gap: var(--gm-s2); }
.gm-ask .form-control { flex: 1; min-height: 44px; }
.gm-ask .btn { min-height: 44px; padding: 0 18px; }
.gm-ask-suggests { display: flex; flex-wrap: wrap; gap: var(--gm-s2); margin-top: var(--gm-s3); }
.gm-chip {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--gm-border);
  background: var(--gm-surface); border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--gm-ink-muted);
}
.gm-chip:hover { border-color: var(--gm-primary); color: var(--gm-primary); }

#aiThread { display: flex; flex-direction: column; gap: var(--gm-s2); max-height: 60vh; overflow-y: auto; }
.gm-turn { padding: 10px 14px; border-radius: var(--gm-radius-control); font-size: 14px; max-width: 92%; }
.gm-turn--q { align-self: flex-end; background: var(--gm-primary-soft); color: var(--gm-primary); font-weight: 600; }
.gm-turn--a { align-self: flex-start; background: var(--gm-surface); border: 1px solid var(--gm-border); }
.gm-turn__why { font-size: 12px; color: var(--gm-ink-subtle); margin-top: 6px; }
.gm-turn__evidence { font-size: 11px; color: var(--gm-ink-subtle); margin-top: 4px; }
.gm-turn__drill { font-size: 13px; font-weight: 600; color: var(--gm-primary); text-decoration: none; white-space: nowrap; }

/* Insight cards on the dashboard */
.gm-insight { display: flex; gap: var(--gm-s3); padding: 10px 0; border-bottom: 1px solid var(--gm-border); }
.gm-insight:last-child { border-bottom: 0; }
.gm-insight__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.gm-insight__dot--healthy { background: var(--gm-success); }
.gm-insight__dot--warning { background: var(--gm-warning); }
.gm-insight__dot--critical { background: var(--gm-danger); }
.gm-insight__body { flex: 1; min-width: 0; }
.gm-insight__text { font-size: 14px; }
.gm-insight__meta { font-size: 12px; color: var(--gm-ink-subtle); margin-top: 2px; }
.gm-insight__meta a { color: var(--gm-primary); text-decoration: none; }

/* Copilot recommendation block (job workspace) */
.gm-reco { border: 1px solid var(--gm-border); border-radius: var(--gm-radius-card); padding: var(--gm-s3); }
.gm-reco__name { font-weight: 700; }
.gm-reco__reason { font-size: 13px; color: var(--gm-ink-muted); margin-top: 2px; }
.gm-reco__alt { font-size: 12px; color: var(--gm-ink-subtle); margin-top: var(--gm-s2); }