/* ============================================================
   LawyerPro — mock product UI (faithful to the real app)
   The app is light-mode + navy/gold; these values are pinned so
   the mockups always render like the real product, regardless of
   the page's light/dark theme.
   ============================================================ */

:root {
  --a-navy: #12325B;
  --a-navy-2: #0D2647;
  --a-gold: #C9A24B;
  --a-gold-d: #AB853A;
  --a-bg: #F6F8FA;
  --a-surface: #FFFFFF;
  --a-border: #DCE2EA;
  --a-text: #222932;
  --a-text-2: #4D5867;
  --a-muted: #6E7B8C;
  --a-danger: #C0392B;
  --a-danger-bg: #FAE8E6;
  --a-purple: #6D5AE0;
  --a-purple-bg: #ECE9FB;
  --a-wa: #0b8a52;
  --a-wa-bg: #E7F4EC;
}

/* ---------- Device: phone ---------- */
.phone {
  width: 300px; max-width: 100%;
  background: var(--a-navy);
  border-radius: 34px; padding: 9px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(18,50,91,0.18);
}
.phone .pscr {
  background: var(--a-bg); border-radius: 26px; overflow: hidden;
  height: 560px; display: flex; flex-direction: column; position: relative;
}

/* ---------- Device: app window (web) ---------- */
.app-win {
  background: var(--a-surface); border: 1px solid var(--a-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.app-top {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  background: #EDF0F4; border-bottom: 1px solid var(--a-border);
}
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 10px; height: 10px; border-radius: 50%; background: #C2CBD6; }
.app-dots i:nth-child(1){ background:#E0695C; } .app-dots i:nth-child(2){ background:#E0A24A; } .app-dots i:nth-child(3){ background:#4FB07D; }
.app-url { font-family: var(--font-mono); font-size: 12px; color: var(--a-muted); }
.app-url b { color: var(--a-text-2); font-weight: 500; }
.app-win .shot { height: 470px; overflow: hidden; }
.app-win .pscr { height: 100%; background: var(--a-bg); display: flex; flex-direction: column; }

/* ---------- App screen: shared ---------- */
.pscr * { box-sizing: border-box; }
.ls-appbar {
  background: var(--a-navy); color: #fff; padding: 14px 16px 12px;
  display: flex; align-items: flex-start; justify-content: space-between; flex: none;
}
.ls-appbar .eyb { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--a-gold); text-transform: uppercase; }
.ls-appbar .ttl { font-size: 17px; font-weight: 700; margin-top: 2px; }
.ls-appbar .rt { text-align: right; }
.ls-appbar .rt .d1 { font-size: 9px; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); text-transform: uppercase; }
.ls-appbar .rt .d2 { font-size: 15px; font-weight: 700; }
.ls-appbar .burger { width: 20px; }
.ls-appbar .burger span { display:block; height:2px; background:#fff; border-radius:2px; margin:4px 0; }

.ls-body { flex: 1; overflow: hidden; padding: 14px 14px 0; }

.ls-search {
  display: flex; align-items: center; gap: 9px; background: var(--a-surface);
  border: 1px solid var(--a-border); border-radius: var(--radius-md); padding: 11px 13px;
  color: var(--a-muted); font-size: 13px; margin-bottom: 16px;
}
.ls-search svg { width: 16px; height: 16px; }

.ls-sec { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.ls-sec .ic { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--a-navy); color: #fff; flex: none; }
.ls-sec .ic svg { width: 15px; height: 15px; }
.ls-sec h5 { font-size: 15px; font-weight: 700; color: var(--a-text); margin: 0; }
.ls-sec .count { font-size: 11px; font-weight: 600; color: var(--a-muted); background: #EDF0F4; border-radius: var(--radius-pill); padding: 1px 8px; }
.ls-sec .link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--a-navy); }

/* Case card */
.lc {
  background: var(--a-surface); border: 1px solid var(--a-border); border-left: 4px solid var(--a-danger);
  border-radius: var(--radius-md); padding: 13px 14px; margin-bottom: 11px; position: relative;
}
.lc.p { border-left-color: var(--a-purple); }
.lc .cid { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--a-gold-d); text-transform: uppercase; }
.lc .ttl { font-size: 14px; font-weight: 700; color: var(--a-navy); line-height: 1.25; margin: 3px 0 4px; }
.lc .crn { font-family: var(--font-mono); font-size: 11px; color: var(--a-muted); }
.lc .court { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--a-text-2); margin-top: 6px; }
.lc .court svg { width: 13px; height: 13px; color: var(--a-muted); flex: none; }
.lc .stage { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--a-danger); background: var(--a-danger-bg); border-radius: var(--radius-pill); padding: 4px 10px; }
.lc.p .stage { color: var(--a-purple); background: var(--a-purple-bg); }
.lc .stage .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lc .badge-today { position: absolute; top: 13px; right: 13px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--a-danger); background: var(--a-danger-bg); border-radius: var(--radius-sm); padding: 4px 8px; }
.lc .chev { position: absolute; right: 13px; bottom: 13px; color: var(--a-muted); }
.lc .chev svg { width: 16px; height: 16px; }

/* Info tile (updates / insights) */
.ls-tile { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--radius-md); padding: 13px 14px; margin-bottom: 12px; }
.ls-tile .th { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ls-tile .th .ic { width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--a-navy); color:#fff; }
.ls-tile .th .ic svg { width: 13px; height: 13px; }
.ls-tile .th h6 { font-size: 13.5px; font-weight: 700; color: var(--a-text); margin: 0; }
.ls-tile .th .link { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--a-navy); }
.ls-upd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--a-text-2); padding: 6px 0; border-top: 1px solid #F0F2F5; }
.ls-upd:first-of-type { border-top: none; }
.ls-upd .d { width: 6px; height: 6px; border-radius: 50%; background: var(--a-gold); flex: none; }
.ls-upd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bottom tab bar */
.ls-tabs {
  display: flex; align-items: center; justify-content: space-around; flex: none;
  background: var(--a-surface); border-top: 1px solid var(--a-border); padding: 8px 4px 10px;
}
.ls-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; color: var(--a-muted); flex: 1; }
.ls-tab svg { width: 19px; height: 19px; }
.ls-tab.on { color: var(--a-navy); font-weight: 700; }
.ls-tab.scan { position: relative; }
.ls-tab.scan .fab { width: 42px; height: 42px; border-radius: 50%; background: var(--a-navy); color: #fff; display: grid; place-items: center; margin-top: -14px; box-shadow: var(--shadow-md); }
.ls-tab.scan .fab svg { width: 20px; height: 20px; }

/* Case detail bits */
.ls-back { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 4px; }
.ls-back .b { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--a-navy); }
.ls-back .b svg { width: 15px; height: 15px; }
.ls-dtitle { font-size: 17px; font-weight: 800; color: var(--a-navy); line-height: 1.2; }
.ls-dmeta { font-size: 11.5px; color: var(--a-muted); margin-top: 4px; }
.ls-dchips { display: flex; align-items: center; gap: 8px; margin: 9px 0 2px; }
.ls-dchips .found { display:flex; align-items:center; gap:5px; font-size: 11px; color: var(--a-muted); }
.ls-dchips .found svg { width: 12px; height: 12px; }
.ls-stale { display: flex; align-items: center; gap: 8px; background: var(--a-danger-bg); color: var(--a-danger); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; font-weight: 600; margin: 12px 0; }
.ls-stale svg { width: 16px; height: 16px; flex: none; }
.ls-drow { display: flex; gap: 8px; margin-bottom: 9px; }
.ls-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 11px; border-radius: var(--radius-md); }
.ls-btn svg { width: 15px; height: 15px; }
.ls-btn.solid { background: var(--a-navy); color: #fff; }
.ls-btn.out { background: var(--a-surface); color: var(--a-navy); border: 1.5px solid var(--a-border); }
.ls-btn.gold { background: var(--a-gold); color: var(--a-navy-2); width: 100%; }
.ls-synced { font-size: 11px; color: var(--a-muted); display:flex; align-items:center; gap:6px; margin: 8px 0 14px; }
.ls-synced svg { width: 13px; height: 13px; }
.ls-flabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--a-muted); text-transform: uppercase; margin: 12px 0 6px; }
.ls-party { font-size: 14px; font-weight: 700; color: var(--a-text); }

/* Fit app-window screens (wider than a phone) a touch larger */
.app-win .ls-appbar .ttl { font-size: 18px; }
.app-win .lc .ttl { font-size: 15px; }