/* ============================================================================
   FAO Dictionary — minimal, on paper.
   Squared notebook paper underneath (the same 28px tile EZ Money uses, so the
   two apps feel like one set), one clean white sheet on top. Colour is spent
   only on the FAO mark and the primary buttons.
   ========================================================================== */

:root {
  --paper:      #fdfdfc;   /* squared notebook paper, same as EZ Money */
  --grid:       #e7edf4;   /* the 28px grid line */
  --sheet:      #ffffff;   /* the page the table sits on */
  --ink:        #24303c;
  --ink-soft:   #5c6b7a;
  --ink-faint:  #93a1b0;
  --border:     #e4e9ef;
  --rule:       #e3eaf2;   /* ruled lines between rows */
  --rule-soft:  #eef2f7;
  --blue:       #0a3d8f;
  --blue-lite:  #2f74d0;
  --blue-wash:  rgba(10, 61, 143, 0.045);
  --red:        #d9534a;
  --radius:     14px;
  --shadow:     0 1px 2px rgba(36,48,60,.05), 0 6px 18px rgba(36,48,60,.06);
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --lao: 'Noto Sans Lao', 'Phetsarath OT', 'Lao UI', 'Leelawadee UI', var(--ui);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  background-color: var(--paper);
  /* squared notebook paper — the same tile EZ Money uses */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-text-size-adjust: 100%;
}

.hidden { display: none !important; }

/* ------------------------------------------------------------------ shells */
.sheet {
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------- brand mark */
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--blue-lite) 0%, var(--blue) 62%, #072c68 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .06em;
  font-family: var(--ui);
  box-shadow: 0 2px 6px rgba(10,61,143,.32), inset 0 1px 0 rgba(255,255,255,.28);
  flex: 0 0 auto;
  user-select: none;
}
.brand-mark.big {
  width: 68px; height: 68px;
  border-radius: 19px;
  font-size: 22px;
  margin: 0 auto 14px;
}

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px clamp(14px, 3vw, 30px);
  background: rgba(253, 253, 252, .9);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.tagline {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: var(--lao);
  letter-spacing: .02em;
}

.tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------- tabs */
.tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #eef2f7;
  border-radius: 10px;
  flex: 0 0 auto;
}
.tab {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.tab:hover { color: var(--ink); }
.tab.on {
  background: var(--sheet);
  color: var(--blue);
  box-shadow: 0 1px 2px rgba(36,48,60,.12);
}

.search-wrap { position: relative; }
.search-ico {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .5;
  pointer-events: none;
}
#search {
  width: 250px;
  padding: 8px 12px 8px 30px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}
#search:focus { border-color: var(--blue-lite); box-shadow: 0 0 0 3px var(--blue-wash); }
#search::-webkit-search-cancel-button { cursor: pointer; }

/* ---------------------------------------------------------------- buttons */
.btn {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: #fff; border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-blue {
  background: linear-gradient(150deg, var(--blue-lite), var(--blue));
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(10,61,143,.3);
}
.btn-blue:hover { background: linear-gradient(150deg, #3f81da, #0d4699); border-color: transparent; }
.btn-icon { padding: 8px 11px; font-size: 15px; line-height: 1; }
.btn-wide { width: 100%; padding: 11px; font-size: 15px; }
.btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; }
.btn-ghost-link {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cloudstat {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cloudstat.ok   { background: #e5f5ec;  color: #217a44; }
.cloudstat.sync { background: rgba(191,140,20,.13); color: #8a6408; }
.cloudstat.off  { background: #eef2f7;   color: var(--ink-soft); }

/* --------------------------------------------------------------- dropdown */
.menu-wrap { position: relative; }
.dropdown {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  z-index: 40;
  min-width: 216px;
  padding: 5px;
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow);
}
.drop-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  cursor: pointer;
}
.drop-item:hover { background: var(--blue-wash); }

/* ------------------------------------------------------------------- main */
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px clamp(12px, 3vw, 22px) 60px;
}

/* ----------------------------------------------------------------- addbar */
.addbar {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(10,61,143,.035), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.cell-in {
  flex: 1 1 0;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  outline: none;
}
.cell-in:focus { border-color: var(--blue-lite); box-shadow: 0 0 0 3px var(--blue-wash); }
.eng-in { font-family: var(--serif); }
.lao-in { font-family: var(--lao); }

/* Five boxes is too many for one line: English left, Lao right, name over
   position over contact, and Add closing the last row. */
.vip-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
#newNameEn  { grid-area: 1 / 1; }
#newNameLo  { grid-area: 1 / 2; }
#newPosEn   { grid-area: 2 / 1; }
#newPosLo   { grid-area: 2 / 2; }
#newContact { grid-area: 3 / 1; }
#addVipBtn  { grid-area: 3 / 2; justify-self: end; padding: 9px 26px; }

.dupe {
  padding: 8px 15px;
  font-size: 12.5px;
  color: #8a6408;
  background: rgba(191,140,20,.10);
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------- sort + letter filter */
.filterbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
}
.sort-field {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sort-field select {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  outline: none;
}
.sort-field select:focus { border-color: var(--blue-lite); box-shadow: 0 0 0 3px var(--blue-wash); }

/* the letter strip scrolls sideways rather than wrapping to a second row */
.letters {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
  margin-left: auto;
}
.letters::-webkit-scrollbar { height: 5px; }
.letters::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.lbtn {
  flex: 0 0 auto;
  min-width: 22px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 4px 5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lbtn:hover:not(:disabled) { background: var(--blue-wash); color: var(--blue); }
.lbtn.on { background: var(--blue); color: #fff; }
.lbtn:disabled { color: #cdd6e0; cursor: default; }
.lbtn.all { min-width: auto; padding: 4px 9px; }

/* ------------------------------------------------------------------ table */
/* No overflow here on purpose: an `overflow` value other than visible would
   make this the sticky container for the header row, and the headers would
   stop pinning to the top of the page. The table is fixed-layout at 100%
   width with wrapping cells, so it can't overflow sideways anyway. */
.table-wrap { position: relative; }

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.c-no  { width: 62px; }
.c-eng { width: auto; }
.c-lao { width: auto; }
.c-act { width: 40px; }
.c-name    { width: 27%; }
.c-pos     { width: 33%; }
.c-contact { width: 24%; }

thead th {
  position: sticky;
  top: var(--topbar-h, 66px);   /* parks flush under the topbar — app.js keeps
                                   the variable in step as the bar wraps */
  z-index: 10;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #f7f9fc;
  padding: 10px 14px;
  border-bottom: 1.5px solid #d5dfea;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
thead th:hover { color: var(--blue); }
thead th.th-no { text-align: right; }
thead th.th-act { cursor: default; }
.sort-ind { font-size: 9px; opacity: .8; }

tbody tr { border-bottom: 1px solid var(--rule-soft); }
tbody tr:hover { background: var(--blue-wash); }
tbody tr.flash { animation: flash 1.4s ease-out; }
@keyframes flash {
  from { background: rgba(240, 200, 90, .45); }
  to   { background: transparent; }
}

tbody td {
  padding: 9px 14px;
  vertical-align: top;
  word-break: break-word;
}
td.no {
  text-align: right;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  padding-top: 12px;
  user-select: none;
}
td.eng { font-family: var(--serif); font-size: 15.5px; }
td.lao { font-family: var(--lao); font-size: 15.5px; }

/* VIP rows stack the English above the Lao inside one cell, so the table stays
   three columns wide instead of five */
.pair { display: grid; gap: 1px; }
.line-en { font-family: var(--serif); font-size: 15px; }
.line-lo { font-family: var(--lao); font-size: 14px; color: var(--ink-soft); }
td.contact { font-size: 14px; color: var(--ink-soft); }

[contenteditable]:empty::before {
  content: '—';
  color: var(--ink-faint);
}
.line-en:empty::before { content: attr(data-ph); }
.line-lo:empty::before { content: attr(data-ph); }
[contenteditable]:focus {
  outline: 2px solid var(--blue-lite);
  outline-offset: -2px;
  border-radius: 5px;
  background: #fff;
}
.line-en, .line-lo, td.contact { min-height: 1.35em; }
td.act { padding: 7px 8px 7px 0; text-align: right; }
.del {
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s, color .12s, background .12s;
}
/* on a mouse it stays out of the way until you reach the row; on a touch
   screen there is no hover, so it is simply always there */
@media (hover: hover) {
  .del { opacity: 0; }
  tr:hover .del, .del:focus { opacity: 1; }
}
.del:hover { color: var(--red); background: rgba(217,83,74,.10); }

.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
}
.empty b { color: var(--ink-soft); }

.statusline {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 12px 6px 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.statusline .hint { margin-left: auto; }

/* ------------------------------------------------------------------- gate */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 26px 18px;
}
.gate-card {
  width: 100%;
  max-width: 380px;
  padding: 30px 26px 24px;
  text-align: center;
}
.gate-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.gate-tag { font-size: 12.5px; color: var(--ink-faint); font-family: var(--lao); margin-top: 3px; }
.gate-copy { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 16px 0 18px; }
.gate-form { display: grid; gap: 9px; }
.gate-form input {
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.gate-form input:focus { border-color: var(--blue-lite); box-shadow: 0 0 0 3px var(--blue-wash); }
.gate-links { margin-top: 11px; font-size: 13px; color: var(--ink-faint); }
.linkish {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gate-links .dot { margin: 0 7px; }
.gate-or {
  position: relative;
  margin: 18px 0 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}
.gate-or::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--rule);
}
.gate-or span { position: relative; background: var(--sheet); padding: 0 10px; }
.gate-err, .gate-ok {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 9px;
  text-align: left;
}
.gate-err { background: #fdecea; color: #b23c33; }
.gate-ok  { background: #e5f5ec; color: #217a44; }

/* ----------------------------------------------------------------- modals */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(36, 48, 60, .45);
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal { width: 100%; max-width: 330px; padding: 20px; }
.modal.wide { max-width: 540px; }
.modal h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.modal-copy { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 6px 0 12px; }
.menu-list { display: grid; gap: 2px; margin-top: 12px; }
.menu-item {
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 11px 10px;
  cursor: pointer;
}
.menu-item:hover { background: var(--blue-wash); }
#bulkText {
  width: 100%;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  outline: none;
}
#bulkText:focus { border-color: var(--blue-lite); box-shadow: 0 0 0 3px var(--blue-wash); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 13px; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 460px);
  padding: 11px 15px;
  font-size: 13.5px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 11px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
}
.toast.err { background: #c0453c; }
.toast .undo {
  border: 0;
  background: rgba(255,255,255,.16);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
}
.toast .undo:hover { background: rgba(255,255,255,.28); }

/* ------------------------------------------------------------------ phone */
@media (max-width: 720px) {
  /* the bar needs three rows down here — too tall to pin, so let it scroll
     away and give the sticky slot to the column headers instead */
  .topbar { position: static; gap: 10px; padding: 10px 12px; }
  .brand h1 { font-size: 15.5px; }
  .tools { width: 100%; margin-left: 0; gap: 7px; }
  .search-wrap { flex: 1 1 100%; }
  #search { width: 100%; }
  .btn { font-size: 13px; padding: 8px 10px; }
  #copyBtn, #exportBtn { flex: 1 1 0; }
  .cloudstat { margin-left: auto; }

  main { padding: 14px 10px 70px; }
  .addbar { flex-wrap: wrap; padding: 11px; gap: 7px; }
  .cell-in { flex: 1 1 100%; }
  .addbar .btn-blue { flex: 1 1 100%; }

  /* one box per line on a phone, Add at the bottom */
  .vip-add { grid-template-columns: 1fr; }
  #newNameEn, #newNameLo, #newPosEn, #newPosLo, #newContact, #addVipBtn {
    grid-area: auto;
  }

  .tabs { flex: 0 0 100%; }      /* flex-basis 0 from a shorthand would win over width */
  .tab { flex: 1 1 0; text-align: center; padding: 7px 8px; }

  .line-lo { font-size: 13.5px; }

  /* Four columns of names and job titles is unreadable on a phone, so a VIP
     row becomes a little card: name, position, contact stacked, with the
     number and the delete button pinned to the corners. */
  #vipTbl thead { display: none; }
  #vipTbl, #vipTbl tbody, #vipTbl tr, #vipTbl td { display: block; width: auto; }
  #vipTbl tr {
    position: relative;
    padding: 10px 30px 11px 32px;
  }
  #vipTbl td { padding: 0; }
  #vipTbl td + td { margin-top: 5px; }
  #vipTbl td.no {
    position: absolute;
    left: 6px; top: 11px;
    margin: 0;
    text-align: left;
  }
  #vipTbl td.act {
    position: absolute;
    right: 2px; top: 6px;
    margin: 0;
  }
  #vipTbl td.contact {
    font-size: 13.5px;
    color: var(--blue);
  }

  .filterbar { flex-wrap: wrap; gap: 8px; padding: 9px 11px; }
  .letters { margin-left: 0; width: 100%; }

  thead th { top: 0; padding: 9px 10px; font-size: 10px; letter-spacing: .06em; }
  .c-no { width: 38px; }
  .c-act { width: 34px; }
  tbody td { padding: 8px 10px; }
  td.eng, td.lao { font-size: 15px; }
  td.no { padding-left: 6px; padding-right: 6px; }
  .statusline .hint { display: none; }
}