/* Installed Job Cards app only.  Every rule is scoped to html.app-mode, which base.html sets
   when the page runs as the installed app (display-mode: standalone / iOS home screen), so
   the website in a normal browser tab looks exactly as before. */

.app-only { display: none !important; }

html.app-mode {
  --app-navy: #102a43;
  --app-navy-2: #1d4e89;
  --app-blue: #2563eb;
  --app-bg: #eef2f7;
  --app-tabbar-h: 64px;
  background: var(--app-bg);
}
html.app-mode .app-only { display: revert !important; }
html.app-mode .web-only { display: none !important; }
html.app-mode body.ui { background: var(--app-bg); -webkit-tap-highlight-color: transparent; }
/* No app header (signed out): keep the page clear of the iPhone status bar. */
html.app-mode body.ui:not(.has-app-header) { padding-top: env(safe-area-inset-top); }

/* ------------------------------------------------------------------ app header */
html.app-mode .app-header {
  position: sticky; top: 0; z-index: 45;
  display: flex !important; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 12px;
  background: linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-2) 100%);
  color: #fff; box-shadow: 0 6px 20px -12px rgba(16, 42, 67, .8);
}
html.app-mode .app-header__icon { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
html.app-mode .app-header__back {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: rgba(255,255,255,.12); color: #fff; text-decoration: none;
}
html.app-mode .app-header__title { min-width: 0; flex: 1; line-height: 1.15; }
html.app-mode .app-header__title b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.app-mode .app-header__title small { display: block; font-size: 11px; color: rgba(255,255,255,.7); }
html.app-mode .app-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}

/* ------------------------------------------------------------------ page frame */
html.app-mode main.page { padding: 16px 14px calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 24px) !important; max-width: 760px; margin: 0 auto; }
html.app-mode body.no-tabbar main.page { padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important; }
html.app-mode main .rounded-2xl.bg-white { border-radius: 20px !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.35) !important; --tw-ring-color: transparent !important; }
html.app-mode .flash { border-radius: 16px; }

/* ------------------------------------------------------------------ bottom tab bar */
html.app-mode .app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(15,23,42,.08); box-shadow: 0 -8px 24px -18px rgba(15,23,42,.45);
}
html.app-mode .app-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; border-radius: 14px; border: 0; background: none;
  color: #64748b; font: 600 11px/1 inherit; text-decoration: none;
}
html.app-mode .app-tab svg { width: 24px; height: 24px; }
html.app-mode .app-tab.is-active { color: var(--app-blue); }
html.app-mode .app-tab.is-active svg { background: #dbeafe; border-radius: 999px; padding: 3px 14px; width: 54px; height: 30px; box-sizing: border-box; }
html.app-mode .app-tab--new svg { color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius: 14px; padding: 5px; width: 34px; height: 34px; box-sizing: border-box; box-shadow: 0 6px 14px -6px rgba(37,99,235,.9); }

/* ------------------------------------------------------------------ account sheet */
html.app-mode .app-sheet { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; background: #fff; }
html.app-mode .app-sheet::backdrop { background: rgba(15,23,42,.45); }
html.app-mode .app-sheet__body { padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); }
html.app-mode .app-sheet__grip { width: 44px; height: 5px; border-radius: 9px; background: #cbd5e1; margin: 0 auto 16px; }
html.app-mode .app-sheet a, html.app-mode .app-sheet button.app-sheet__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 4px;
  border: 0; border-top: 1px solid #f1f5f9; background: none; color: #0f172a; font: 500 15px/1.2 inherit; text-decoration: none; text-align: left;
}
html.app-mode .app-sheet .is-danger { color: #be123c; }

/* ------------------------------------------------------------------ My jobs */
html.app-mode .jc-hero {
  display: block !important; margin: -16px -14px 18px; padding: 6px 18px 22px;
  background: linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-2) 100%); color: #fff;
  border-radius: 0 0 28px 28px;
}
html.app-mode .jc-hero p { margin: 0; font-size: 13px; color: rgba(255,255,255,.75); }
html.app-mode .jc-hero h1 { margin: 2px 0 14px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
html.app-mode .jc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
html.app-mode .jc-stat { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
html.app-mode .jc-stat b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
html.app-mode .jc-stat span { font-size: 11px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; }
html.app-mode .jc-stat--urgent b { color: #fda4af; }
html.app-mode .jc-section-title { font-size: 13px !important; letter-spacing: .02em !important; color: #334155 !important; }
html.app-mode .jc-card { position: relative; overflow: hidden; padding: 16px 16px 16px 20px !important; }
html.app-mode .jc-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--jc-tone, #3b82f6); }
html.app-mode .jc-card[data-tone="urgent"] { --jc-tone: #e11d48; }
html.app-mode .jc-card[data-tone="access"] { --jc-tone: #f59e0b; }
html.app-mode .jc-card[data-tone="stock"] { --jc-tone: #8b5cf6; }
html.app-mode .jc-card .jc-unit { font-size: 20px !important; letter-spacing: -.01em; }
html.app-mode .jc-primary {
  height: 48px !important; border-radius: 16px !important; font-size: 15px !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; box-shadow: 0 10px 20px -12px rgba(37,99,235,.9) !important;
}
html.app-mode .jc-status { display: inline-flex !important; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #eff6ff; color: #1d4ed8; }
html.app-mode .jc-card[data-tone="urgent"] .jc-status { background: #fff1f2; color: #be123c; }
html.app-mode .jc-card[data-tone="access"] .jc-status { background: #fffbeb; color: #b45309; }
html.app-mode .jc-card[data-tone="stock"] .jc-status { background: #f5f3ff; color: #6d28d9; }

/* ------------------------------------------------------------------ job card */
html.app-mode .jc-progress {
  position: sticky; top: calc(env(safe-area-inset-top) + 58px); z-index: 30;
  display: block !important; margin: 0 -14px 14px; padding: 10px 16px 12px;
  background: rgba(238,242,247,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
html.app-mode .jc-progress__row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
html.app-mode .jc-progress__track { height: 8px; border-radius: 99px; background: #dbe3ee; overflow: hidden; }
html.app-mode .jc-progress__bar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #10b981); transition: width .35s ease; }
html.app-mode .jc-seg { border-radius: 14px !important; box-shadow: inset 0 0 0 1px #e2e8f0; --tw-ring-color: transparent !important; }
html.app-mode .jc-seg span { min-width: 70px !important; padding-top: 12px !important; padding-bottom: 12px !important; font-size: 15px !important; }
html.app-mode .jc-section-head { display: flex; align-items: center; gap: 10px; }
html.app-mode .jc-submitbar {
  border-top: 0 !important; border-radius: 22px 22px 0 0; background: rgba(255,255,255,.96) !important;
  box-shadow: 0 -10px 30px -18px rgba(15,23,42,.55);
}
html.app-mode .jc-submitbar button[onclick^="return jobBeforeSubmit"] {
  border-radius: 16px !important; background: linear-gradient(135deg, #10b981, #047857) !important;
  box-shadow: 0 10px 20px -12px rgba(5,150,105,.9) !important;
}
html.app-mode .jc-breadcrumb { display: none !important; }

/* iPhone status bar text is white in the app: give it a navy strip where there's no app header. */
html.app-mode body.ui:not(.has-app-header)::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--app-navy); z-index: 60;
}