/* Smart Trans — styles */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f4f6f9; color: #1c2733; }
a { color: #0b5cab; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #0b5cab; outline-offset: 1px; }
img, input, select, textarea { max-width: 100%; }
.topbar { background: #0d2c4c; color: #fff; display: flex; align-items: center; gap: 16px; padding: 10px 18px; }
.topbar .brand { font-weight: 700; font-size: 20px; letter-spacing: .3px; }
.topbar .company { opacity: .85; }
.topbar .userbox { margin-left: auto; font-size: 13px; }
.topbar .userbox a { color: #9ecbff; }
.wrap { display: flex; align-items: flex-start; }
.sidenav { width: 200px; flex: 0 0 200px; background: #123c66; min-height: calc(100vh - 49px); padding: 12px 0; position: sticky; top: 0; }
.sidenav a { display: block; color: #dcecfb; padding: 8px 18px; font-size: 14px; }
.sidenav a:hover { background: #1a4d80; text-decoration: none; }
main { flex: 1; min-width: 0; padding: 22px 26px; max-width: 1200px; }
main.auth { max-width: 520px; margin: 30px auto; }
h1 { font-size: 24px; margin: 4px 0 16px; }
h2 { font-size: 19px; margin: 26px 0 10px; }
h3 { font-size: 16px; margin: 20px 0 8px; }
.card { background: #fff; border: 1px solid #dde4ec; border-radius: 8px; padding: 16px; margin: 12px 0; }
.card.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 20px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fld > span { color: #43536a; font-weight: 600; }
.fld input, .fld select, .fld textarea { padding: 8px; border: 1px solid #c4cfdd; border-radius: 6px; font-size: 14px; background: #fff; }
.fld.wide { grid-column: 1 / -1; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.btn { background: #0b5cab; color: #fff; border: 0; border-radius: 6px; padding: 9px 16px; font-size: 14px; cursor: pointer; display: inline-block; }
.btn:hover { background: #094e90; text-decoration: none; }
.btn.secondary { background: #5b718c; }
.btn.danger { background: #b3261e; }
.btn.small { padding: 5px 10px; font-size: 12px; }
form.inline { display: inline-block; margin: 4px 8px 4px 0; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; margin: 8px 0 16px; }
.tbl th { background: #e8eef5; text-align: left; padding: 7px 9px; border-bottom: 2px solid #c9d5e3; }
.tbl td { padding: 6px 9px; border-bottom: 1px solid #e4eaf1; vertical-align: top; }
.tbl tfoot td { background: #f2f6fb; border-top: 2px solid #c9d5e3; }
.cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.stat { background: #fff; border: 1px solid #dde4ec; border-radius: 8px; padding: 14px 18px; min-width: 150px; }
.stat-n { font-size: 24px; font-weight: 700; }
.stat-l { font-size: 12.5px; color: #55677e; }
.flash { background: #e7f4e4; border: 1px solid #9fd29b; color: #205c1e; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }
.trial-banner { background: #e3eefb; border: 1px solid #8fb6e3; color: #123c66; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }
.tbl tr.plan-current td { background: #e3eefb; font-weight: 600; }
.plan-callout { font-size: 17px; background: #f2f6fb; border: 1px solid #c9d5e3; border-radius: 6px; padding: 10px 14px; }
.alert { background: #fdeceb; border: 1px solid #f1a9a5; color: #7a1d18; border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.badge { background: #e8eef5; color: #33475e; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; }
.badge.warn { background: #fff1c9; color: #7a5a00; }
.badge.ok { background: #dff2dd; color: #205c1e; }
.small { font-size: 12.5px; color: #55677e; }
.row2 { display: flex; gap: 8px; margin: 4px 0; }
.row2 input { flex: 1; padding: 7px; border: 1px solid #c4cfdd; border-radius: 6px; }
.kv { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted #d4dde8; padding: 4px 0; }
.kv span { color: #43536a; }
.dochead { display: flex; justify-content: space-between; gap: 20px; background: #fff; border: 1px solid #dde4ec; border-radius: 8px; padding: 16px; }
.dochead .right { text-align: right; }

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 1023px) {
  main { padding: 18px 18px 26px; }
}

/* ---------- Phones & small tablets ---------- */
@media (max-width: 800px) {
  html, body { overflow-x: clip; }
  body { line-height: 1.5; }

  /* Top bar wraps instead of squeezing */
  .topbar { flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px; }
  .topbar .brand { font-size: 18px; }
  .topbar .company { font-size: 13px; }
  .topbar .userbox { margin-left: 0; font-size: 13px; }
  .topbar .userbox a { display: inline-block; padding: 8px 4px; }

  /* Layout stacks; nav becomes a horizontal, finger-friendly scroll bar */
  .wrap { flex-direction: column; }
  .sidenav { width: 100%; flex: none; min-height: 0; position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px; gap: 4px; }
  .sidenav a { white-space: nowrap; display: flex; align-items: center; min-height: 44px; padding: 10px 13px; font-size: 14.5px; border-radius: 6px; }
  main { width: 100%; padding: 16px 14px 30px; }
  main.auth { margin: 18px auto; padding: 0 14px; width: 100%; }

  h1 { font-size: 21px; margin-bottom: 12px; }
  h2 { font-size: 18px; margin: 22px 0 8px; }
  h3 { font-size: 16px; margin: 18px 0 8px; }

  .card { padding: 15px; margin: 12px 0; }
  /* Forms read top-to-bottom: one field per row */
  .card.grid, .card.grid2 { grid-template-columns: 1fr; gap: 14px; }
  .fld { font-size: 14px; gap: 5px; }
  .fld input, .fld select, .fld textarea { font-size: 16px; padding: 11px 12px; min-height: 44px; }
  .fld textarea { min-height: 64px; }
  .chk { min-height: 44px; font-size: 15px; }
  .chk input { width: 20px; height: 20px; }
  .row2 { flex-direction: column; gap: 8px; margin: 8px 0; }
  .row2 input { font-size: 16px; padding: 11px 12px; min-height: 44px; }
  input[type="file"] { font-size: 14px; padding: 8px 0; }

  /* Buttons: big, obvious tap targets */
  .btn { min-height: 44px; padding: 11px 18px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.small { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  form.inline { display: block; margin: 8px 0; }
  form.inline .btn { margin-top: 6px; }
  main.auth .btn { width: 100%; }

  /* Tables scroll inside their own container — the page never scrolls sideways.
     Narrow tables (up to 3 columns) still fit the screen; wider ones get room
     to stay readable instead of being crushed. */
  .tbl { font-size: 14px; min-width: 620px; }
  .tbl:has(thead th:nth-child(1):last-child),
  .tbl:has(thead th:nth-child(2):last-child),
  .tbl:has(thead th:nth-child(3):last-child) { min-width: 0; }
  .tbl:has(thead th:nth-child(8)) { min-width: 880px; }
  .tbl:has(thead th:nth-child(11)) { min-width: 1080px; }
  .tbl th { padding: 9px 10px; }
  .tbl td { padding: 9px 10px; line-height: 1.45; }
  .tbl td a { padding: 4px 0; }

  /* KPI / stat cards: two per row, never cramped */
  .cards { gap: 10px; }
  .stat { flex: 1 1 140px; min-width: 0; padding: 13px 14px; }
  .stat-n { font-size: 22px; }
  .stat-l { font-size: 12.5px; margin-top: 2px; }

  .kv { padding: 7px 0; flex-wrap: wrap; }
  .flash, .trial-banner, .alert { font-size: 14px; padding: 12px 14px; }
  .plan-callout { font-size: 16px; }
  .badge { padding: 2px 9px; }
  .small { font-size: 13px; }

  .dochead { flex-direction: column; gap: 10px; padding: 15px; }
  .dochead .right { text-align: left; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .topbar .brand { font-size: 17px; }
  h1 { font-size: 20px; }
  main { padding: 14px 12px 26px; }
  main.auth { padding: 0 12px; }
  .card { padding: 13px; }
  .tbl { min-width: 560px; }
  .tbl:has(thead th:nth-child(8)) { min-width: 820px; }
  .tbl:has(thead th:nth-child(11)) { min-width: 1000px; }
  .stat { flex-basis: calc(50% - 10px); }
  .sidenav a { padding: 10px 11px; font-size: 14px; }
}