/* =====================================================================
   Trust Cover staff portal. Dense, fast, no framework.
   ===================================================================== */

:root {
  --navy-900: #06182f; --navy-800: #0b2545; --navy-700: #13315c; --navy-100: #e8eef6;
  --teal-600: #0f766e; --teal-500: #14918a; --teal-100: #dff3f1;
  --amber-600: #b45309; --amber-100: #fdf0dc;
  --red-600: #b3261e;  --red-100: #fdecea;
  --green-600: #15803d; --green-100: #e6f5ea;
  --ink: #16202c; --ink-soft: #5a6875; --line: #dfe5ec;
  --bg: #f4f7fa; --card: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(6,24,47,.05), 0 4px 14px rgba(6,24,47,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; color: var(--navy-900); }
h1 { font-size: 1.35rem; } h2 { font-size: 1.02rem; } h3 { font-size: .92rem; }
p { margin: 0 0 .8em; }
a { color: var(--teal-600); }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; background: var(--navy-100); padding: 1px 4px; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; }

/* ---- shell ---------------------------------------------------------- */
.portal { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--navy-900); color: #c3d2e2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side__brand { display: flex; gap: .6rem; align-items: center; padding: 1rem; color: #fff; text-decoration: none; font-weight: 700; }
.side__brand small { display: block; font-weight: 400; font-size: .68rem; color: #8ba3bd; letter-spacing: .06em; text-transform: uppercase; }
.side__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-weight: 800; color: #fff;
              background: linear-gradient(135deg, var(--navy-700), var(--teal-600)); flex: 0 0 34px; }
.side__nav { display: flex; flex-direction: column; padding: .4rem; gap: 2px; overflow-y: auto; flex: 1; }
.side__link { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
              padding: .5rem .7rem; border-radius: 7px; color: #c3d2e2; text-decoration: none; font-weight: 500; }
.side__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side__link.is-on { background: var(--teal-600); color: #fff; }
.side__foot { padding: .8rem 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
.side__foot a { color: #8ba3bd; text-decoration: none; }
.badge { background: var(--amber-600); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .72rem; font-weight: 700; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.4rem;
           background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topline h1 { margin: 0; }
.topline__user { display: flex; align-items: center; gap: .5rem; }
.who strong { display: block; font-size: .86rem; }
.who small { color: var(--ink-soft); font-size: .74rem; }
.page { padding: 1.2rem 1.4rem 2.5rem; }
.foot { padding: 1rem 1.4rem 2rem; color: var(--ink-soft); font-size: .8rem; }

@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .side__nav { flex-direction: row; flex-wrap: wrap; }
  .side__link { padding: .4rem .6rem; font-size: .85rem; }
}

/* ---- buttons -------------------------------------------------------- */
.btn { display: inline-block; padding: .5rem .9rem; border-radius: 7px; border: 1px solid transparent;
       font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--teal-600); color: #fff; }
.btn--primary:hover { background: var(--teal-500); }
.btn--ghost { background: #fff; border-color: var(--line); color: var(--navy-800); }
.btn--ghost:hover { border-color: var(--navy-700); }
.btn--amber { background: var(--amber-600); color: #fff; }
.btn--danger { background: var(--red-600); color: #fff; }
.btn--sm { padding: .38rem .7rem; font-size: .85rem; }
.btn--xs { padding: .22rem .5rem; font-size: .78rem; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---- cards, grids --------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.card h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.card__link { font-size: .82rem; font-weight: 500; }
.grid2 { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* ---- KPI tiles ------------------------------------------------------- */
.kpis { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.2rem; }
.kpis--mine { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; text-decoration: none; color: inherit; display: block; }
.kpi:hover { border-color: var(--teal-500); }
.kpi span { display: block; font-size: .76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.kpi strong { display: block; font-size: 1.5rem; color: var(--navy-900); line-height: 1.2; }
.kpi--sm strong { font-size: 1.25rem; }
.kpi--alert { border-color: var(--amber-600); background: var(--amber-100); }
.kpi--alert strong { color: var(--amber-600); }
.kpi--warn strong { color: var(--red-600); }

/* ---- tables ---------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); background: #f8fafc; position: sticky; top: 0; }
.table tbody tr:hover { background: #f8fbfd; }
.table small { color: var(--ink-soft); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table--wide { display: block; overflow-x: auto; white-space: nowrap; }
.table--wide td, .table--wide th { white-space: normal; }
.nowrap { white-space: nowrap; }
.row--alert { background: var(--amber-100); }
.row--alert:hover { background: #fbe8cd; }
.cell--alert { color: var(--red-600); font-weight: 600; }
.empty { color: var(--ink-soft); text-align: center; padding: 1.4rem; }
.count { color: var(--ink-soft); margin: .2rem 0 .8rem; }

/* ---- pills ----------------------------------------------------------- */
.pill { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
        background: var(--navy-100); color: var(--navy-800); text-transform: uppercase; letter-spacing: .03em; }
.pill--sm { font-size: .68rem; }
.pill--new, .pill--pending, .pill--assigned { background: var(--navy-100); color: var(--navy-700); }
.pill--contacted, .pill--qualified, .pill--in_progress, .pill--quoted { background: #e7effb; color: #1d4ed8; }
.pill--proposal, .pill--documents_pending, .pill--submitted, .pill--pending_approval, .pill--returned, .pill--hot { background: var(--amber-100); color: var(--amber-600); }
.pill--approved, .pill--converted, .pill--active, .pill--renewed, .pill--done, .pill--paid, .pill--settled { background: var(--green-100); color: var(--green-600); }
.pill--lost, .pill--rejected, .pill--duplicate, .pill--not_interested, .pill--inactive, .pill--alert,
.pill--overdue, .pill--missed, .pill--locked, .pill--blacklisted, .pill--expired { background: var(--red-100); color: var(--red-600); }

/* ---- filters, tabs, pager -------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem;
           background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; }
.filters input, .filters select { font: inherit; font-size: .86rem; padding: .38rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.filters input[type="search"] { min-width: 230px; }
.filters__spacer { flex: 1; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.tab { padding: .4rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--navy-800); font-weight: 600; font-size: .85rem; }
.tab.is-on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.tab b { background: var(--amber-600); color: #fff; border-radius: 999px; padding: 0 .35rem; font-size: .72rem; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 1rem 0; color: var(--ink-soft); }

/* ---- forms ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.field label { font-size: .8rem; font-weight: 600; color: var(--navy-800); }
.field input, .field select, .field textarea { font: inherit; font-size: .88rem; padding: .45rem .55rem;
    border: 1px solid var(--line); border-radius: 6px; background: #fff; width: 100%; }
.field textarea { resize: vertical; }
.row2 { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.formgrid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.formgrid .field--wide { grid-column: 1 / -1; }
.inline { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.mini { font-size: .8rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 5px; max-width: 160px; }
.hint { color: var(--ink-soft); font-size: .84rem; background: #fff; border-left: 3px solid var(--teal-500);
        padding: .6rem .8rem; border-radius: 0 6px 6px 0; margin-bottom: .9rem; }

/* ---- notes ----------------------------------------------------------- */
.note { padding: .7rem .9rem; border-radius: var(--radius); margin: 0 1.4rem 1rem; font-weight: 600; }
.note--info    { background: var(--teal-100); color: var(--teal-600); }
.note--success { background: var(--green-100); color: var(--green-600); }
.note--error   { background: var(--red-100); color: var(--red-600); }

/* ---- lead detail ------------------------------------------------------ */
.crumb { margin-bottom: .6rem; }
.lead-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lead-head h2 { margin: 0; }
.lead-head small { font-weight: 400; color: var(--ink-soft); }
.lead-meta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; color: var(--ink-soft); font-size: .84rem; margin: .4rem 0 0; }
.lead-actions { display: flex; gap: .4rem; }
.dl { display: grid; grid-template-columns: 40% 60%; gap: .25rem 0; margin: 0; font-size: .86rem; }
.dl dt { color: var(--ink-soft); }
.dl dd { margin: 0; }
.dl--tight { grid-template-columns: 45% 55%; font-size: .82rem; }
.wrapall { word-break: break-all; }
.quotebox { background: #f8fafc; border-left: 3px solid var(--line); padding: .6rem .8rem; border-radius: 0 6px 6px 0; }
.maker { color: var(--amber-600); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-left: 2px solid var(--line); padding: 0 0 .8rem 1rem; margin-left: .3rem; position: relative; font-size: .86rem; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .35rem; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); }
.timeline__when { display: block; color: var(--ink-soft); font-size: .76rem; }
.timeline p { margin: .2rem 0; color: var(--ink-soft); }
.notes { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.notes li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.notes small { color: var(--ink-soft); }

/* ---- approvals -------------------------------------------------------- */
.approval { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; box-shadow: var(--shadow); overflow: hidden; }
.approval__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
                  padding: .7rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--line); }
.approval__meta { color: var(--ink-soft); font-size: .84rem; }
.approval__body { display: grid; gap: 1.2rem; grid-template-columns: 1fr; padding: 1rem; }
@media (min-width: 900px) { .approval__body { grid-template-columns: 1.3fr 1fr; } }
.approval__buttons { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---- login ------------------------------------------------------------ */
.loginpage { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(150deg, var(--navy-900), var(--navy-700) 60%, var(--teal-600) 160%); padding: 1.5rem; }
.loginbox { background: #fff; border-radius: 14px; padding: 1.8rem; width: min(100%, 400px); box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.loginbox__brand { display: flex; gap: .7rem; align-items: center; margin-bottom: 1.2rem; }
.loginbox__brand small { display: block; color: var(--ink-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.loginbox .note { margin: 0 0 1rem; }
.loginbox__note { color: var(--ink-soft); font-size: .8rem; margin-top: 1rem; }
.loginbox__back { font-size: .84rem; margin: 0; }

/* ---------- Phase 1: search bar, notification bell, timeline feed ---------- */
.searchbar { display: flex; gap: .35rem; align-items: center; flex: 1 1 320px; max-width: 460px; }
.searchbar input[type="search"] {
  flex: 1; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .88rem; background: #fff; min-width: 0;
}
.searchbar input[type="search"]:focus { outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-500); }
.searchbar--page { max-width: none; margin-bottom: .6rem; }
.searchbar--page input[type="search"] { padding: .6rem .9rem; font-size: 1rem; }

.bell {
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); font-size: .82rem; font-weight: 600; background: #fff;
}
.bell:hover { border-color: var(--teal-500); color: var(--navy-800); }
.bell--on { border-color: var(--amber-600); color: var(--amber-600); background: var(--amber-100); }
.bell .badge { background: var(--red-600); color: #fff; border-radius: 999px; padding: 0 .35rem; font-size: .7rem; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed__item {
  display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.feed__item:last-child { border-bottom: 0; }
.feed__item.is-unread { background: var(--amber-100); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; border-radius: var(--radius); }
.feed__body { min-width: 0; }
.feed__body p { margin: .2rem 0; color: var(--ink-soft); font-size: .9rem; }
.feed__body small { display: block; color: var(--ink-soft); font-size: .76rem; margin-top: .15rem; }
.feed__act { flex: 0 0 auto; }

.ticks { margin: .4rem 0 0; padding-left: 1.1rem; }
.ticks li { margin-bottom: .25rem; }

.row--warn > td { background: var(--amber-100); }
.warn { color: var(--red-600); font-weight: 600; }

.pill--warn, .pill--failed, .pill--critical { background: var(--red-100); color: var(--red-600); }
.pill--high, .pill--queued, .pill--running { background: var(--amber-100); color: var(--amber-600); }
.pill--medium, .pill--low, .pill--cancelled { background: var(--navy-100); color: var(--navy-700); }

@media (max-width: 900px) {
  .searchbar { order: 3; flex-basis: 100%; max-width: none; }
  .topline { flex-wrap: wrap; }
  .bell__text { display: none; }
}

/* ---------- Phase 2: pipeline board ---------- */
.board { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; }
.board__col { background: var(--navy-100, #eef2f7); border-radius: var(--radius); padding: .6rem; }
.board__head { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem;
               margin-bottom: .5rem; font-size: .85rem; }
.board__head span { color: var(--ink-soft); font-size: .78rem; }
.board__empty { color: var(--ink-soft); font-size: .82rem; margin: .2rem 0; }
.board__card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px;
               padding: .5rem .6rem; margin-bottom: .45rem; text-decoration: none; color: inherit; }
.board__card:hover { border-color: var(--teal-500); }
.board__card strong { display: block; font-size: .9rem; }
.board__card small { display: block; color: var(--ink-soft); font-size: .75rem; }
.board__card.is-late { border-left: 3px solid var(--red-600); }
.board__money { display: block; font-weight: 700; font-size: .85rem; margin: .2rem 0; }
.board__money b { font-weight: 600; color: var(--ink-soft); font-size: .78rem; }

/* ---------- Phase 3: quotation comparison ---------- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { min-width: 640px; }
.compare th, .compare td { vertical-align: top; }
.compare thead th { background: var(--navy-100, #eef2f7); }
.compare thead th small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .74rem; }
.compare th.is-best, .compare td.is-best { background: var(--green-100, #e6f5ea); }
.compare tbody td:first-child { font-weight: 600; white-space: nowrap; color: var(--ink-soft); }
.row--total td { border-top: 2px solid var(--line); }

.is-muted td { opacity: .55; }
.is-muted small { font-style: italic; }

/* ---------- Phase 7: card scans and social posts ---------- */
.cardscan { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; margin-bottom: .8rem; }
.cardscan__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .5rem; }
.cardscan__head small { color: var(--ink-soft); font-size: .78rem; }
.postbox { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-bottom: .9rem; }
.postbox header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .5rem; }
.postbox header small { color: var(--ink-soft); font-size: .78rem; }
.postbox__idea { color: var(--ink-soft); font-style: italic; font-size: .9rem; }
.postbox footer { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.postbox textarea { min-width: 18rem; }

.kpi .up { color: var(--green-600); font-size: .78rem; font-weight: 600; }
.kpi .down { color: var(--red-600); font-size: .78rem; font-weight: 600; }
td.is-late { color: var(--red-600); font-weight: 700; }

@media print {
  .side, .topline__user, .filters, .tabs, .foot, .btn { display: none; }
  .portal { display: block; }
  body { background: #fff; }
}

/* ---- CMS editor extras ------------------------------------------------ */
.field--wide { grid-column: 1 / -1; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .84rem; }
.fieldhint { color: var(--ink-soft); font-size: .78rem; }
.switch { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.switch input { width: auto; }
.charcount { font-size: .76rem; color: var(--ink-soft); }
.charcount.is-over { color: var(--red-600); font-weight: 700; }

/* ---- P&L statement ---------------------------------------------------- */
.pl-head td { background: #f8fafc; text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; color: var(--ink-soft); }
.pl-total td { border-top: 2px solid var(--line); }
.pl-net td { background: var(--teal-100); font-size: 1rem; }
@media print { .side, .topline, .filters, .foot, .hint { display: none !important; } .portal { display: block; } }

/* ---- inline row forms -------------------------------------------------- */
.rowform { display: inline-block; }
.rowform > summary { list-style: none; cursor: pointer; }
.rowform > summary::-webkit-details-marker { display: none; }
.rowform[open] > summary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.rowform[open] form { display: flex; gap: .3rem; padding: .4rem 0; flex-wrap: wrap; }