/* 4th Dimension: styled after the FileMaker 4th Dimension layouts. Light and dark. */
:root {
  --frame: #9fd8f4;          /* FileMaker's light blue window frame */
  --band: #a9b7f2;           /* lilac band behind the title bar */
  --title: #6584d8;          /* "ACCOUNTS" heading blue */
  --tab: #cdd6f8; --tab-line: #93a3e3; --tab-ink: #1d2430;
  --bg: #9fd8f4;
  --card: #ffffff;
  --bar: #ececf0;            /* title bar */
  --sect: #e4e4e8;           /* section header */
  --ink: #1d2430;
  --muted: #6b7280;
  --line: #d9dde5;
  --field: #f6f7f9;
  --accent: #2f5fb3;
  --accent-ink: #ffffff;
  --brand: #FA6001;
  --ok-bg: #e7f6ec; --ok-ink: #17643a;
  --err-bg: #fdecec; --err-ink: #b42318;
  --warn-bg: #fff6e0; --warn-ink: #7a5300;
  --include: #eaf0fd;
  --green: #2e8b3a; --blue: #2f6fd6; --red: #c0262d;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --frame: #10202c; --band: #2a3366; --title: #9bb2f0;
    --tab: #26304f; --tab-line: #44508a; --tab-ink: #e6e9ef;
    --bg: #10202c; --card: #1b212b; --bar: #232a36; --sect: #2a3240;
    --ink: #e6e9ef; --muted: #98a2b3; --line: #2f3746; --field: #151a22;
    --accent: #6f9cf0; --accent-ink: #0d1220;
    --ok-bg: #143322; --ok-ink: #8fe0ad; --err-bg: #3a1a1a; --err-ink: #f4a3a3;
    --warn-bg: #3a2e12; --warn-ink: #f2cf7d; --include: #1e2b44;
    --green: #6fd07c; --blue: #82acf5; --red: #f08a8f;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.4; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0; }
h3 { font-size: .9rem; margin: 1rem 0 .4rem; }
.count { font-size: .8em; color: var(--muted); font-weight: 400; margin-left: .3rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Header: logo, section name, tab buttons */
.top { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--card); border-bottom: 4px solid var(--band); flex-wrap: nowrap; }
.brand { display: flex; }
.biglogo { width: 56px; height: 56px; border-radius: 10px; display: block; }
.section { font-size: 1.9rem; font-weight: 800; color: var(--title); text-transform: uppercase; letter-spacing: .02em; min-width: 11rem; flex: none; }
.who { flex: none; }
@media (max-width: 1150px) { .tab-later { display: none; } }
@media (max-width: 1350px) { .tabs a, .tab-later { font-size: .66rem; padding: .5rem .45rem; } .section { font-size: 1.5rem; min-width: 9rem; } }
.tabs { display: flex; gap: 0; flex-wrap: nowrap; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tab-later { white-space: nowrap; flex: none; padding: .55rem .6rem; background: var(--tab); border: 1px solid var(--tab-line); margin-left: -1px; color: var(--tab-ink);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.tabs a:first-child, .tabs .tab-later:first-child { border-radius: 4px 0 0 4px; }
.tabs .gear { border-radius: 0 4px 4px 0; font-size: 1rem; padding: .3rem .6rem; }
.tabs a.on { background: var(--card); color: var(--title); border-bottom-color: var(--card); box-shadow: inset 0 3px 0 var(--title); }
.tabs a:hover { text-decoration: none; filter: brightness(1.05); }
.tab-later { color: color-mix(in srgb, var(--tab-ink) 40%, transparent); cursor: default; }
.who { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.mark { display: inline-block; width: 1.9rem; height: 1.9rem; border-radius: 7px; vertical-align: middle; }
.login .mark { width: 2.6rem; height: 2.6rem; border-radius: 9px; }

/* Page frame */
.page { max-width: 1500px; margin: 0 auto; padding: 1rem; }
.page.narrow { max-width: 420px; padding-top: 10vh; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }

/* Title bar with the record name and tool buttons */
.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--bar); border: 6px solid var(--band); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; }
.titlebar h1 { font-size: 1.7rem; }
.tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tbtn { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .55rem; border-radius: 6px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; text-align: center; }
.tbtn:hover { text-decoration: none; border-color: var(--accent); }
.tbtn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.tbtn.wide { font-size: .68rem; font-weight: 700; line-height: 1.1; color: #8c1d18; }
.tbtn.later { opacity: .45; cursor: default; }
.tbtn.save { background: #bfe6a8; border-color: #8cc56e; font-weight: 700; color: #1d3b12; }
.tbtn.save.dirty { background: var(--brand); border-color: var(--brand); color: #fff; }
.tbtn.plus { font-size: 1.4rem; font-weight: 700; background: #e8f5e0; color: #1d3b12; }
.tbtn.minus { font-size: 1.4rem; font-weight: 700; background: #fbe4e0; color: #5a1410; }
.recno { display: inline-grid; place-items: center; height: 1.9rem; padding: 0 .8rem; border-radius: 99px; background: #e6f4dc; border: 2px solid #9ccd7e; font-weight: 600; color: #2f4d1f; }
.newflag { font-size: .8rem; color: var(--green); }

/* Three FileMaker columns */
.fm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
@media (max-width: 1100px) { .fm-cols { grid-template-columns: 1fr 1fr; } .fm-cols > .col:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .fm-cols { grid-template-columns: 1fr; } }
.col { display: grid; gap: .8rem; }
.panel { background: var(--card); border-radius: 6px; padding: .7rem .8rem .9rem; border: 1px solid var(--line); }
.panel h2 { margin: -.7rem -.8rem .7rem; padding: .45rem .8rem; background: var(--sect); border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.panel.later { opacity: .65; }
.panel.later p { margin: 0; }

/* Fields: small grey label over a quiet input, like FileMaker */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; }
.statusgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem .7rem; }
.span2 { grid-column: span 2; }
.span3 { grid-column: 1 / -1; }
.fm { display: block; min-width: 0; color: var(--ink); font-size: inherit; }
.fm .lbl { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .1rem; }
.fm .lbl i { font-style: normal; opacity: .75; }
.fm .in { display: flex; align-items: center; gap: .3rem; }
.fm input, .fm textarea, .fm select { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--field);
  padding: .3rem .4rem; border-radius: 3px 3px 0 0; font: inherit; font-size: .92rem; color: var(--ink); }
.fm input:focus, .fm textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--card); }
.fm textarea { resize: vertical; min-height: 3.6rem; }
.fm .go { flex: none; font-size: .9rem; padding: 0 .2rem; }
.fm.ro .val { display: block; width: 100%; padding: .3rem .4rem; border-bottom: 1px solid var(--line); min-height: 1.9rem; overflow-wrap: anywhere; white-space: pre-line; }
.fm.when input { background: #e8f3d8; }
.flagrow { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; padding-top: 1.1rem; }
.fm-check { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--ink); }
.fm-check input { width: auto; margin: 0; }
.fm-check.green { color: var(--green); } .fm-check.blue { color: var(--blue); } .fm-check.red { color: var(--red); }
.err { display: block; color: var(--err-ink); font-style: normal; font-size: .78rem; margin-top: .15rem; }
.ro-grid { margin-top: .3rem; }

/* People and account slots in the middle column */
.person, .acctslot { padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.person.included, .acctslot.included { background: var(--include); }
.person-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.person-head b { font-size: 1rem; }
.person-head .incl { margin-left: auto; }
.acct { display: flex; gap: .6rem; align-items: baseline; padding: .15rem 0; }
.acct .lbl, .acctslot .lbl { font-size: .72rem; color: var(--muted); }
.vbtn { border: 1px solid var(--line); border-radius: 4px; padding: .05rem .4rem; background: var(--card); }
.xbtn { border: 0; background: #2f5fb3; color: #fff; border-radius: 4px; width: 1.5rem; height: 1.5rem; padding: 0; cursor: pointer; }
.linkbox { margin-top: .7rem; }

/* Lists */
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
table.list { width: 100%; border-collapse: collapse; }
.list th, .list td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.list th { font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.list th a { color: var(--muted); }
.list th a.sorted { color: var(--ink); }
.list th a.sorted::after { content: " ▾"; }
.list tr:last-child td { border-bottom: 0; }
.list tr.omitted td { opacity: .5; }
.list td.empty { text-align: center; color: var(--muted); padding: 2rem; }
.pager { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; background: var(--card); padding: .5rem; border-radius: 6px; }

/* Accounts List: one card per venue, like the FileMaker list layout */
.cards { display: grid; gap: .5rem; }
.vcard { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr auto; gap: .2rem 1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: .6rem .8rem; }
.vcard.omitted { opacity: .55; }
.vcard .fm.ro .val { border-bottom-color: transparent; padding: .05rem 0; min-height: 1.2rem; }
.vcard .name .val { font-weight: 700; font-size: 1rem; }
.vcard .checks3 { display: flex; gap: .8rem; font-size: .72rem; color: var(--muted); text-align: center; }
.vcard .checks3 b { display: block; font-size: .95rem; color: var(--ink); }
.vcard .warnincl .val { color: var(--err-ink); font-weight: 600; }
.sortbar { display: flex; gap: .8rem; align-items: center; font-size: .85rem; margin: 0 0 .6rem; color: var(--ink); }
.sortbar a.sorted { font-weight: 700; color: var(--ink); }
@media (max-width: 900px) { .vcard { grid-template-columns: 1fr 1fr; } }

/* Flags */
.flags { display: flex; gap: .3rem; flex-wrap: wrap; }
.pill { font-size: .72rem; padding: .1rem .5rem; border-radius: 99px; background: var(--include); white-space: nowrap; }
.pill.omit { background: var(--err-bg); color: var(--err-ink); }
.pill.been_there { background: var(--ok-bg); color: var(--ok-ink); }

/* Generic forms */
input, select, textarea, button, .button { font: inherit; color: var(--ink); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea {
  padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 5px; background: var(--field); }
label { display: block; font-size: .85rem; color: var(--muted); }
label input, label select, label textarea { margin-top: .2rem; color: var(--ink); width: 100%; }
label.check { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-size: .85rem; }
label.check input { margin: 0; width: auto; }
label.order { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-size: .85rem; }
label.order input { width: 3.6rem; margin: 0; padding: .2rem .3rem; }
button, .button { display: inline-block; padding: .45rem .9rem; border-radius: 5px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
button:hover, .button:hover { text-decoration: none; border-color: var(--accent); }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.small { padding: .15rem .5rem; font-size: .8rem; }
button.link { border: 0; background: none; color: var(--accent); padding: 0; }
button.danger, .danger { color: var(--err-ink); }
button.danger:not(.link) { border-color: var(--err-ink); }
form.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1rem; }
.formactions { margin-top: 1rem; grid-column: 1 / -1; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; align-items: center; background: var(--card); padding: .6rem; border-radius: 6px; }
.filters input[type=search] { flex: 1 1 260px; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: .5rem; }
form.inline { display: inline-flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin: .2rem 0; }
form.inline select { width: auto; }
.danger-zone { margin-top: 1rem; border-color: var(--err-ink); }
.login h1 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.login form { display: grid; gap: .9rem; }
.email-row { padding: .35rem 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .cols2 { grid-template-columns: 1fr; } }

/* Pickers */
.picker { position: relative; }
.picker input[type=text] { width: 100%; }
.picker .results { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 5; left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 5px; max-height: 260px; overflow: auto; }
.picker .results:empty { display: none; }
.picker .results li { padding: .4rem .6rem; cursor: pointer; }
.picker .results li:hover, .picker .results li:focus { background: var(--include); outline: none; }
.picker .results li.none { color: var(--muted); cursor: default; }

/* Messages */
.flash { padding: .55rem .8rem; border-radius: 5px; margin-bottom: .7rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash.error { background: var(--err-bg); color: var(--err-ink); }
.flash.warn { background: var(--warn-bg); color: var(--warn-ink); font-size: .88rem; }

/* Footer */
.foot { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--ink); font-size: .8rem; padding: 1.5rem 1rem 2rem; }
.foot img { height: 72px; width: auto; border-radius: 6px; background: #fff; padding: 4px 8px; }

@media (max-width: 700px) {
  .section { font-size: 1.3rem; min-width: 0; }
  .tab-later { display: none; }
  .titlebar h1 { font-size: 1.3rem; }
  .grid2 { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
}

/* Solicitations and Engagements: wide record column + email column, like FileMaker */
.fm-cols.wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .fm-cols.wide-left { grid-template-columns: 1fr; } }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem .7rem; }
.grid2.tight, .grid3.tight { gap: .3rem .5rem; }
.fm.tall textarea { min-height: 6.5rem; }
.fm.xtall textarea { min-height: 26rem; }
.fm.body textarea { font-family: inherit; line-height: 1.4; }
.fm.green-bg textarea, .fm.green-bg input { background: #eef7e6; }
.panel h2.mid { margin: .9rem -.8rem .6rem; border-radius: 0; border-top: 1px solid var(--line); }
.tbtn.go-green { color: #2e7d32; }
.btn-green { display: inline-block; justify-self: start; border: 1px solid #8cc56e; background: #e8f5e0; color: #2e7d32; font-size: .72rem; font-weight: 800;
  padding: .35rem .7rem; border-radius: 5px; letter-spacing: .02em; }
.btn-green:hover { text-decoration: none; border-color: #2e7d32; }

/* Engagement top block: three side-by-side stacks */
.eng-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .6rem 1rem; align-items: start; }
.days-dates { display: grid; grid-template-columns: 3.5rem 1fr; gap: .5rem; }
@media (max-width: 760px) { .eng-top { grid-template-columns: 1fr; } }
.ipchecks { float: right; display: inline-flex; gap: .7rem; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.ipchecks .fm-check { font-size: .78rem; font-weight: 600; }

/* Payment and deal sums: Fee + Travel + ... = Total */
.pay-row { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: .6rem 1rem; align-items: end; }
@media (max-width: 900px) { .pay-row { grid-template-columns: 1fr; } }
.calc { display: flex; flex-wrap: wrap; align-items: end; gap: .3rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 5px; background: var(--field); }
.calc.deal { margin-bottom: .7rem; }
.calc .fm { width: 5.4rem; text-align: center; }
.calc .fm.cur { width: 3.6rem; }
.calc .fm input { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.calc .fm .lbl { text-align: center; }
.calc .fm.ro .val { text-align: center; font-weight: 700; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.calc .op { padding-bottom: .4rem; color: var(--muted); font-weight: 700; }

/* Card lists for solicitations / engagements */
.vcard.two { grid-template-columns: 1fr 1.6fr; }
.vcard.three { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 900px) { .vcard.two, .vcard.three { grid-template-columns: 1fr; } }

/* Related lists on the account screen */
.rel { display: block; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.rel:hover { background: var(--include); text-decoration: none; }
.rel .meta { display: block; font-size: .78rem; color: var(--muted); }
.addlink { display: inline-block; margin-top: .5rem; font-weight: 600; }

/* Templates: list on the left, template on the right */
.subtabs { display: inline-flex; border: 1px solid var(--tab-line); border-radius: 6px; overflow: hidden; margin-right: .4rem; }
.subtabs a { padding: .45rem .8rem; background: var(--tab); color: var(--tab-ink); font-size: .78rem; font-weight: 700; }
.subtabs a.on { background: var(--title); color: #fff; }
.subtabs a:hover { text-decoration: none; }
.tpl-cols { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: .8rem; align-items: start; }
@media (max-width: 900px) { .tpl-cols { grid-template-columns: 1fr; } }
.tpl-list { padding-bottom: .3rem; max-height: 80vh; overflow: auto; }
.tpl-item { display: grid; grid-template-columns: 1fr auto; padding: .45rem .5rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.tpl-item:hover { background: var(--include); text-decoration: none; }
.tpl-item.on { background: #d6ecfb; }
.tpl-item.default .tpl-code, .tpl-item.default .tpl-name { color: var(--red); }
.tpl-code { font-weight: 700; font-size: .82rem; }
.tpl-date { font-size: .75rem; color: var(--muted); }
.tpl-name { grid-column: 1 / -1; font-size: .85rem; }
.tpl-head { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: end; margin-bottom: .6rem; }
.tpl-head .fm { width: 9rem; }

/* Engagement Report: a quiet printable page */
.report { background: #fff; color: #111; max-width: 960px; margin: 0 auto; padding: 1.2rem 1.5rem; border-radius: 6px; position: relative; }
.report h1 { font-size: 1.3rem; margin: .2rem 0 1rem; }
.report h2 { font-size: .78rem; text-transform: uppercase; background: #ececf0; border: 1px solid #ccc; padding: .3rem .5rem; margin: 1rem 0 .5rem; border-radius: 4px; }
.report .lbl { display: block; font-size: .72rem; color: #666; margin-top: .45rem; }
.report-badge { position: absolute; right: 1.5rem; top: 1rem; font-size: .68rem; font-weight: 800; color: #2e7d32; border: 1px solid #8cc56e; background: #e8f5e0; padding: .15rem .5rem; }
.report-tools { margin-bottom: .5rem; }
.r-grid3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.r-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
.r-calc { padding: .4rem 0; }
.r-box { min-height: 1.4rem; padding: .3rem .5rem; background: #f3f8ee; border-radius: 3px; white-space: normal; }
.r-checks { float: right; display: inline-flex; gap: .8rem; text-transform: none; font-weight: 600; }
@media print {
  body { background: #fff; }
  header.top, .foot, .report-tools, .flash { display: none !important; }
  .page { padding: 0; max-width: none; }
  .report { padding: 0; }
}
.scrolllist { max-height: 22rem; overflow: auto; }