:root{
  /* Bond Financial brand: espresso + bronze (bondfinancial.co) */
  --navy:#281d1b; --navy2:#4a3530; --gold:#a3856b;
  --ink:#241f1d; --muted:#6e655f; --line:#e7e2db; --bg:#f6f4f1;
  --green:#1e7d52; --red:#c0392b; --amber:#b9821a;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5}
h1,h2,h3,.brand{font-family:'Outfit','Inter',-apple-system,sans-serif}
a{color:var(--navy2);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;gap:1.5rem;background:var(--navy);
  color:#fff;padding:.7rem 1.4rem;border-bottom:3px solid var(--gold)}
.topbar .brand{color:#fff;font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;gap:.55rem}
.brand-logo{height:30px;width:auto;display:block}
.topbar nav{display:flex;gap:1.1rem;flex:1}
.topbar nav a{color:#cdd6e6;font-size:.93rem}
.topbar nav a:hover{color:#fff}
.userbox{display:flex;align-items:center;gap:.7rem;font-size:.9rem}
.userbox a{color:#fff}
.inline{display:inline}
button.link{background:none;border:none;color:#cdd6e6;cursor:pointer;font-size:.9rem}
button.link:hover{color:#fff;text-decoration:underline}

.container{max-width:1080px;margin:1.6rem auto;padding:0 1.4rem}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:2rem 0}

.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
h1{font-size:1.5rem;margin:.2rem 0}
h3{margin:.2rem 0 .6rem}

.flash{padding:.7rem 1rem;border-radius:7px;margin-bottom:1rem;font-size:.93rem}
.flash.ok{background:#e7f6ee;color:var(--green);border:1px solid #bfe6cf}
.flash.error{background:#fdeceb;color:var(--red);border:1px solid #f4c7c3}

.stats{display:flex;gap:1rem;margin-bottom:1.1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:9px;padding:.7rem 1.1rem;font-size:.85rem;color:var(--muted)}
.stat .num{display:block;font-size:1.5rem;font-weight:700;color:var(--navy)}
.stat.danger .num{color:var(--red)}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;background:#fff;
  padding:.8rem;border:1px solid var(--line);border-radius:9px}
.filters input[name=q]{flex:1;min-width:200px}
input,select,textarea{font:inherit;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:6px;background:#fff;width:100%}
select{width:auto}

.btn{display:inline-block;padding:.5rem .9rem;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;font-size:.9rem}
.btn:hover{text-decoration:none;border-color:#c3ccda}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:var(--navy2)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:#eecac6}
.btn.danger:hover{background:#fdeceb}
.btn.tiny{padding:.3rem .6rem;font-size:.8rem}
button.primary{background:var(--navy);color:#fff;border:none;padding:.6rem 1rem;border-radius:6px;cursor:pointer;width:100%;font-size:.95rem}

table.grid{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.grid th,.grid td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.grid th{background:#fafbfd;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.grid tr:last-child td{border-bottom:none}
.grid tr.lifted{opacity:.55}
.row-actions{white-space:nowrap;display:flex;gap:.3rem}
.small{font-size:.82rem}
.muted{color:var(--muted)}
.empty{background:#fff;border:1px dashed var(--line);padding:2rem;text-align:center;border-radius:9px;color:var(--muted)}

.badge{display:inline-block;padding:.12rem .5rem;border-radius:20px;font-size:.75rem;background:#eef1f6;color:var(--navy)}
.role-admin{background:#e9e1c9;color:#7a5e15}
.role-reviewer{background:#dde7f5;color:#2c4f86}
.role-viewer{background:#e8edf3;color:#54616f}

.sev{font-weight:600;font-size:.83rem}
.sev-high{color:var(--red)}
.sev-medium{color:var(--amber)}
.sev-low{color:var(--green)}
.sev-none{color:var(--muted)}
.status{display:inline-block;padding:.1rem .5rem;border-radius:20px;font-size:.78rem}
.status-active{background:#fdeecc;color:#8a6516}
.status-lifted{background:#e7f6ee;color:var(--green)}

.login-card{max-width:360px;margin:4rem auto;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:2rem;text-align:center;border-top:3px solid var(--gold)}
.login-logo{height:46px;width:auto;margin:0 auto .8rem;display:block}
.login-card form{text-align:left;margin-top:1rem;display:flex;flex-direction:column;gap:.8rem}
.login-card h1{margin:0}

.record-form fieldset{border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:1.1rem;padding:1rem 1.2rem}
.record-form legend{padding:0 .5rem;font-weight:600;color:var(--navy)}
.record-form label{display:block;margin-bottom:.7rem;font-size:.88rem;color:var(--muted)}
.record-form input,.record-form textarea,.record-form select{margin-top:.25rem;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid2 .full{grid-column:1/3}
.req{color:var(--red)}
.form-actions{display:flex;gap:.6rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-top:.3rem}
.seg .seg-opt{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.45rem 1rem;
  cursor:pointer;background:#fff;color:var(--ink);font-size:.92rem}
.seg .seg-opt:first-child{border-right:1px solid var(--line)}
.seg .seg-opt:has(input:checked){background:var(--navy);color:#fff}
.seg input{width:auto;margin:0}
.hint{color:var(--muted);font-size:.82rem;margin:.45rem 0 .9rem}

.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem}
.detail dl{background:#fff;border:1px solid var(--line);border-radius:9px;padding:1.1rem 1.3rem;margin:0;
  display:grid;grid-template-columns:150px 1fr;row-gap:.55rem;column-gap:1rem}
.detail dt{color:var(--muted);font-size:.85rem}
.detail dd{margin:0}
.meta-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:1.1rem 1.3rem}
.meta-card label{display:block;margin-bottom:.7rem;font-size:.88rem;color:var(--muted)}
.timeline{list-style:none;padding:0;margin:.5rem 0 0}
.timeline li{padding:.4rem 0;border-top:1px solid var(--line);font-size:.9rem}

@media(max-width:720px){
  .detail{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid2 .full{grid-column:1}
  .topbar{flex-wrap:wrap;gap:.7rem}
}

.actions-bar{display:flex;align-items:center;gap:.5rem;margin:.75rem 0 1rem}
.actions-bar form.inline{margin:0}

/* Wrapper that lets a table scroll sideways on small screens */
.table-wrap{width:100%}

/* ---- Phone layout (≤640px) ---- */
@media(max-width:640px){
  .container{padding:0 1rem;margin:1rem auto}
  .topbar{padding:.7rem 1rem;gap:.7rem}
  .page-head{flex-wrap:wrap}
  .page-head h1{font-size:1.3rem}
  h1{font-size:1.3rem}

  /* Stack the filter controls full-width for easy tapping */
  .filters{flex-direction:column;align-items:stretch}
  .filters input[name=q]{width:100%;min-width:0}
  .filters select{width:100%}
  .filters .btn{width:100%;text-align:center}
  .actions-bar{flex-wrap:wrap}
  .stats{gap:.5rem}
  .stat{flex:1}

  /* Admin/audit tables keep columns but scroll sideways */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);border-radius:9px}
  .table-wrap .grid{border:none;border-radius:0;min-width:560px}

  /* Records table -> one card per record */
  table.grid.cards,.grid.cards tbody,.grid.cards tr,.grid.cards td{display:block}
  .grid.cards{border:none;background:transparent;overflow:visible}
  .grid.cards thead{display:none}
  .grid.cards tr{background:#fff;border:1px solid var(--line);border-radius:10px;
    margin-bottom:.8rem;padding:.4rem .2rem}
  .grid.cards tr.lifted{opacity:.55}
  .grid.cards td{border:none;padding:.3rem .9rem;display:flex;gap:1rem;
    justify-content:space-between;align-items:baseline}
  .grid.cards td::before{content:attr(data-label);color:var(--muted);
    font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;
    font-weight:600;flex:0 0 40%}
  .grid.cards td.cell-name{display:block;padding:.5rem .9rem .15rem}
  .grid.cards td.cell-name::before{display:none}
  .grid.cards td.cell-name strong{font-size:1.05rem}
  .grid.cards td.row-actions{justify-content:flex-start;padding-top:.5rem}
  .grid.cards td.row-actions::before{display:none}
  .grid.cards td.row-actions:not(:has(*)){display:none}
}