/* ============================================================
   Field Installer App — Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* thyssenkrupp-derived token system */
  --tk-primary: #00A0F0;
  --tk-primary-600: #0088CE;
  --tk-primary-700: #0072AD;
  --tk-primary-050: #E5F6FE;
  --tk-primary-100: #CCEDFC;
  --tk-navy: #0F2A43;
  --ink-900: #12212F;
  --ink-700: #3A4B5C;
  --ink-500: #66788A;
  --ink-400: #8A99A8;
  --ink-300: #B4C0CC;
  --line: #E3E9EF;
  --line-soft: #EDF1F5;
  --surface: #FFFFFF;
  --canvas: #F3F6F9;
  --success: #1D9E5F;
  --success-050: #E6F6EE;
  --success-600: #15804B;
  --warn: #E88A00;
  --warn-050: #FDF3E3;
  --warn-700: #A96400;
  --danger: #D93A3A;
  --danger-050: #FCEAEA;
  --danger-700: #B02525;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(15,42,67,.05), 0 4px 14px rgba(15,42,67,.06);
  --shadow-float: 0 8px 30px rgba(15,42,67,.18);
  font-family: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  width: 1440px;
  margin: 0 auto;
  background:
    radial-gradient(1200px 500px at 50% -10%, #E4F2FB 0%, transparent 60%),
    var(--canvas);
  font-family: 'Inter', sans-serif;
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

svg { flex: none; }

/* ============ STAGE ============ */
.stage {
  width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0 72px;
}
.stage-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.stage-caption .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tk-primary);
}
.stage-caption span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ============ PHONE SHELL ============ */
.phone {
  width: 394px;
  background: #0B0D10;
  border-radius: 52px;
  padding: 10px;
  box-shadow: 0 30px 80px rgba(15,42,67,.30), 0 4px 16px rgba(15,42,67,.18), inset 0 0 0 2px #26313B;
  position: relative;
}
.screen {
  background: var(--canvas);
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 780px;
}

/* ============ STATUS BAR ============ */
.statusbar {
  background: linear-gradient(180deg, var(--tk-navy) 0%, #123452 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 26px 10px;
  font-size: 13.5px;
  font-weight: 600;
  position: relative;
  flex: none;
}
.statusbar .notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 26px;
  background: #0B0D10;
  border-radius: 16px;
}
.statusbar .right {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ============ APP BAR ============ */
.appbar {
  background: linear-gradient(180deg, #123452 0%, var(--tk-navy) 100%);
  color: #fff;
  padding: 8px 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.appbar .back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background .15s;
}
.appbar .back:hover {
  background: rgba(255,255,255,.22);
}
.appbar .back.hidden { visibility: hidden; }
.appbar .titles { flex: 1; min-width: 0; }
.appbar .titles h1 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar .titles p {
  font-size: 11.5px;
  color: #9FC4DE;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar .bell {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background .15s;
}
.appbar .bell:hover {
  background: rgba(255,255,255,.22);
}
.appbar .bell .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tk-navy);
}
.appbar .logout-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background .15s;
  border: none;
}
.appbar .logout-btn:hover {
  background: rgba(255,255,255,.22);
}

/* ============ BODY ============ */
.body {
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.body::-webkit-scrollbar { width: 0; }
/* In this fixed-height flex-column scroll area, cards must keep their natural
   height. Cards with overflow:hidden (.line, .notif-card) get an automatic
   flex min-height of 0, so without this they shrink and clip their contents. */
.body > * { flex-shrink: 0; }

/* ============ KIT HEADER CARD ============ */
.kitcard {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  border: 1px solid var(--line-soft);
}
.kitcard .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.kitcard .kitid {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tk-primary-700);
  text-transform: uppercase;
}
.kitcard h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-top: 3px;
}
.kitcard .addr {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 3px;
  font-weight: 500;
  line-height: 1.45;
}

/* ============ CHIP ============ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  flex: none;
  white-space: nowrap;
}
.chip .cdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip.delivered { background: var(--tk-primary-050); color: var(--tk-primary-700); border: 1px solid var(--tk-primary-100); }
.chip.dispatched { background: var(--tk-primary-050); color: var(--tk-primary-700); border: 1px solid var(--tk-primary-100); }
.chip.received { background: var(--success-050); color: var(--success-600); border: 1px solid #c3e6d5; }
.chip.short-wrong { background: var(--danger-050); color: var(--danger-700); border: 1px solid #f2caca; }
.chip.installed { background: var(--success-050); color: var(--success-600); border: 1px solid #c3e6d5; }
.chip.closed { background: var(--line-soft); color: var(--ink-500); border: 1px solid var(--line); }
.chip.allocated { background: var(--line-soft); color: var(--ink-500); border: 1px solid var(--line); }
.chip.fully-allocated { background: #E8EDF4; color: #4A6480; border: 1px solid #D0D9E5; }
.chip.pending { background: var(--warn-050); color: var(--warn-700); border: 1px solid #F3DDB4; }
.chip.approved { background: var(--success-050); color: var(--success-600); border: 1px solid #c3e6d5; }
.chip.rejected { background: var(--danger-050); color: var(--danger-700); border: 1px solid #f2caca; }
.chip.high { background: var(--danger-050); color: var(--danger-700); border: 1px solid #f2caca; }
.chip.medium { background: var(--warn-050); color: var(--warn-700); border: 1px solid #F3DDB4; }
.chip.low { background: var(--line-soft); color: var(--ink-500); border: 1px solid var(--line); }

/* ============ POD ============ */
.pod {
  margin-top: 13px;
  background: var(--tk-primary-050);
  border: 1px solid var(--tk-primary-100);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pod .ic {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 1px 3px rgba(15,42,67,.10);
}
.pod .txt {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-700);
  font-weight: 500;
}
.pod .txt b { color: var(--ink-900); font-weight: 700; }
.pod .txt a { color: var(--tk-primary-600); font-weight: 700; text-decoration: none; }

/* ============ PROGRESS BAR ============ */
.progress-row { margin-top: 14px; }
.progress-row .meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 7px;
}
.progress-row .meta b { color: var(--ink-900); font-weight: 700; }
.pbar {
  height: 7px;
  border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
  display: flex;
}
.pbar .ok {
  background: var(--success);
  border-radius: 99px 0 0 99px;
  transition: width .3s ease;
}
.pbar .ex {
  background: var(--warn);
  transition: width .3s ease;
}

/* ============ EXCEPTION BANNER ============ */
.exbanner {
  background: var(--warn-050);
  border: 1px solid #F3DDB4;
  border-radius: var(--radius-md);
  padding: 11px 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.exbanner .txt {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--warn-700);
  font-weight: 500;
}
.exbanner .txt b { font-weight: 700; }

.info-banner {
  background: var(--tk-primary-050);
  border: 1px solid var(--tk-primary-100);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.info-banner .txt {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tk-primary-700);
  font-weight: 500;
}
.info-banner .txt b { font-weight: 700; }

/* ============ SECTION HEADER ============ */
.section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0;
}
.section-h h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.section-h span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-400);
}

/* ============ LINE ITEM CARD ============ */
.line {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  padding: 14px 14px 13px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.line:active {
  transform: scale(0.98);
}
.line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--line);
  transition: background .3s ease;
}
.line.ok::before { background: var(--success); }
.line.short::before { background: var(--danger); }
.line.damaged::before { background: var(--warn); }
.line.pending::before { background: var(--tk-primary); }
.line.unread::before { background: var(--tk-primary); }

.line .rowtop {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.line .thumb {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #EFF5FA, #DEEAF3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--line-soft);
}
.line .info { flex: 1; min-width: 0; }
.line .code {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tk-primary-700);
  text-transform: uppercase;
}
.line .name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: 2px;
  line-height: 1.3;
}
.line .sub {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 3px;
  font-weight: 500;
  line-height: 1.5;
}
.line .sub b { color: var(--ink-700); font-weight: 600; }

/* ============ QUANTITY ============ */
.qty {
  flex: none;
  text-align: right;
}
.qty .n {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.qty .n .frac {
  font-size: 11px;
  color: var(--ink-400);
  font-weight: 700;
}
.qty .l {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 1px;
}

/* ============ STATE PILL ============ */
.statepill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  margin-top: 9px;
}
.statepill.ok { background: var(--success-050); color: var(--success-600); }
.statepill.short { background: var(--danger-050); color: var(--danger-700); }
.statepill.damaged { background: var(--warn-050); color: var(--warn-700); }
.statepill.pending { background: var(--tk-primary-050); color: var(--tk-primary-700); }

/* ============ FLAG NOTE ============ */
.flagnote {
  margin-top: 9px;
  background: var(--danger-050);
  border: 1px solid #F2CACA;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--danger-700);
  font-weight: 500;
}
.flagnote b { font-weight: 700; }
.flagnote.amber {
  background: var(--warn-050);
  border-color: #F3DDB4;
  color: var(--warn-700);
}

/* ============ PHOTO CHIP ============ */
.photochip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px 5px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
}
.photochip .pv {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, #C9D8E4, #8FA6B8);
}

/* ============ ACTION BUTTONS ============ */
.actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.btn-confirm {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--tk-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 11px 0;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(0,160,240,.30);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn-confirm:active { transform: scale(0.97); }
.btn-flag {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: var(--ink-700);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform .1s ease;
}
.btn-flag:active { transform: scale(0.97); }

.flagtypes {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ftype {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line);
  color: var(--ink-500);
  background: #FBFCFD;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ftype:hover {
  border-color: var(--tk-primary);
  color: var(--tk-primary);
  background: var(--tk-primary-050);
}
.ftype:active {
  transform: scale(0.97);
}

/* ============ STICKY FOOTER ============ */
.footer {
  position: sticky;
  bottom: 14px;
  margin: 6px 14px 14px;
  z-index: 20;
  background: rgba(18,33,47,.97);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 13px 15px;
  color: #fff;
}
.footer .counts {
  display: flex;
  gap: 14px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}
.footer .c {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #B9C7D3;
}
.footer .c .d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.footer .c b {
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
}
.footer .cta {
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #33B5F4, var(--tk-primary) 55%, var(--tk-primary-600));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,160,240,.40), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer;
  transition: opacity .3s ease, transform .1s ease, box-shadow .3s ease;
}
.footer .cta:active { transform: scale(0.98); }
.footer .cta.disabled {
  opacity: .45;
  pointer-events: none;
}
.footer .hint {
  text-align: center;
  font-size: 10.5px;
  color: #8FA3B4;
  font-weight: 500;
  margin-top: 8px;
}
.footer .hint b { color: #CFE9FB; font-weight: 700; }

/* ============ HOME BAR ============ */
.homebar {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex: none;
}
.homebar span {
  width: 130px;
  height: 5px;
  border-radius: 99px;
  background: rgba(18,33,47,.28);
}

/* ============ LOGIN ============ */
.login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 24px;
  min-height: 660px;
  background: linear-gradient(180deg, var(--tk-navy) 0%, #123452 50%, var(--canvas) 100%);
}
.login-screen .logo-area {
  margin-top: 40px;
  text-align: center;
  color: #fff;
}
.login-screen .logo-area h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.login-screen .logo-area p {
  font-size: 12px;
  color: #9FC4DE;
  font-weight: 500;
  margin-top: 6px;
}
.login-screen .user-cards {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.user-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease;
  border: 2px solid transparent;
}
.user-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-float);
}
.user-card:active { transform: scale(0.98); }
.user-card.selected {
  border-color: var(--tk-primary);
}
.user-card .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex: none;
}
.user-card .uc-info h3 {
  font-size: 14px;
  font-weight: 700;
}
.user-card .uc-info p {
  font-size: 11.5px;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 2px;
}
.login-btn {
  margin-top: 20px;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(180deg, #33B5F4, var(--tk-primary) 55%, var(--tk-primary-600));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,160,240,.40), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer;
  opacity: .45;
  pointer-events: none;
  transition: opacity .3s ease, transform .1s ease;
}
.login-btn.active {
  opacity: 1;
  pointer-events: auto;
}
.login-btn.active:active { transform: scale(0.97); }

/* ============ HOME SCREEN ============ */
.greeting {
  padding: 4px 4px 0;
}
.greeting h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
}
.greeting p {
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 3px;
}
.home-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: transform .1s ease;
}
.home-card:active { transform: scale(0.98); }
.home-card .hc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-card .hc-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.home-card .hc-icon.blue { background: var(--tk-primary-050); }
.home-card .hc-icon.green { background: var(--success-050); }
.home-card .hc-icon.amber { background: var(--warn-050); }
.home-card .hc-icon.red { background: var(--danger-050); }
.home-card h3 {
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.3;
}
.home-card p {
  font-size: 11.5px;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.4;
}
.home-card .hc-count {
  font-size: 22px;
  font-weight: 800;
  color: var(--tk-primary);
}

/* ============ JOB CARD ============ */
.job-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: transform .1s ease;
}
.job-card:active { transform: scale(0.98); }
.job-card .jc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.job-card .jc-id {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tk-primary-700);
  text-transform: uppercase;
}
.job-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
}
.job-card .jc-addr {
  font-size: 11.5px;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.4;
}
.job-card .jc-meta {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.job-card .jc-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
}
.job-card .jc-meta-item b { color: var(--ink-900); font-weight: 700; }

/* ============ NOTIFICATION CARD ============ */
.notif-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .1s ease;
}
.notif-card:active { transform: scale(0.98); }
.notif-card.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tk-primary);
  transition: opacity .3s ease;
}
.notif-card.read::before { opacity: 0; }
.notif-card .nc-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.notif-card .nc-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--tk-primary-050);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.notif-card .nc-content { flex: 1; min-width: 0; }
.notif-card h4 {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.notif-card p {
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.4;
}
.notif-card .nc-time {
  font-size: 10px;
  color: var(--ink-400);
  font-weight: 600;
  margin-top: 4px;
}

/* ============ STEPPER ============ */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.stepper button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--line-soft);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
}
.stepper button:hover { background: var(--line); }
.stepper button:active { transform: scale(0.95); }
.stepper .stepper-val {
  width: 36px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
}

/* ============ VAN STOCK BARS ============ */
.stock-bar-container {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stock-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
}
.stock-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}
.stock-bar-fill.healthy { background: var(--success); }
.stock-bar-fill.low { background: var(--warn); }
.stock-bar-fill.critical { background: var(--danger); }
.stock-bar-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-400);
  white-space: nowrap;
}

/* ============ EMPTY STATE ============ */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}
.empty-state .es-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--line-soft);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-700);
}
.empty-state p {
  font-size: 12px;
  color: var(--ink-400);
  font-weight: 500;
  margin-top: 6px;
}

/* ============ TOAST ============ */
.mobile-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(18,33,47,.95);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  z-index: 9999;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-width: 340px;
  text-align: center;
  pointer-events: none;
}
.mobile-toast.amber {
  background: rgba(169,100,0,.95);
}
.mobile-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============ MODAL ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,42,67,.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop.show { opacity: 1; }
.modal-panel {
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px;
  width: 394px;
  max-height: 60vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.modal-backdrop.show .modal-panel {
  transform: translateY(0);
}
.modal-panel h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}
.modal-panel .modal-msg {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
  margin-bottom: 16px;
}
.modal-panel .modal-actions {
  display: flex;
  gap: 8px;
}
.modal-panel .modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform .1s;
}
.modal-panel .modal-btn:active { transform: scale(0.97); }
.modal-panel .modal-btn.primary {
  background: var(--tk-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,160,240,.30);
}
.modal-panel .modal-btn.secondary {
  background: var(--line-soft);
  color: var(--ink-700);
}

/* ============ TEXTAREA ============ */
.mobile-textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-900);
  resize: none;
  background: #FBFCFD;
  outline: none;
  transition: border-color .15s;
}
.mobile-textarea:focus {
  border-color: var(--tk-primary);
}

/* ============ BALANCE INDICATOR ============ */
.balance-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 6px;
}
.balance-indicator.balanced {
  background: var(--success-050);
  color: var(--success-600);
}
.balance-indicator.imbalanced {
  background: var(--warn-050);
  color: var(--warn-700);
}

/* ============ SCREEN ENTER ANIMATION ============ */
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.body > * {
  animation: screenEnter .2s ease both;
}
.body > *:nth-child(2) { animation-delay: .03s; }
.body > *:nth-child(3) { animation-delay: .06s; }
.body > *:nth-child(4) { animation-delay: .09s; }
.body > *:nth-child(5) { animation-delay: .12s; }
.body > *:nth-child(6) { animation-delay: .15s; }
.body > *:nth-child(7) { animation-delay: .18s; }
.body > *:nth-child(8) { animation-delay: .21s; }
.body > *:nth-child(9) { animation-delay: .24s; }
.body > *:nth-child(10) { animation-delay: .27s; }

/* ============ COUNT MODE INPUT ============ */
.count-input {
  width: 56px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  background: #FBFCFD;
  outline: none;
  transition: border-color .15s;
}
.count-input:focus { border-color: var(--tk-primary); }

/* ============ DISCREPANCY ============ */
.discrepancy {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.discrepancy.zero { background: var(--success-050); color: var(--success-600); }
.discrepancy.negative { background: var(--danger-050); color: var(--danger-700); }
.discrepancy.positive { background: var(--warn-050); color: var(--warn-700); }

/* ============ FLAG INPUT AREA ============ */
.flag-input-area {
  margin-top: 8px;
  padding: 10px;
  background: var(--canvas);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.flag-input-area .fia-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.flag-input-area .fia-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}