/* SelfSurvAI — broker dashboard */

:root{
    --navy:#0B2545;
    --ocean:#13315C;
    --teal:#2CA6A4;
    --teal-hover:#23918F;
    --bg:#F4F7FA;
    --card:#FFFFFF;
    --border:#E3E9F0;
    --text:#1B2733;
    --muted:#6B7A8D;
    --input-border:#CBD6E2;
    --sidebar-w:230px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.5;
}

a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- Sidebar ---------------------------------------------------------- */

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar-w);
    background:var(--navy);
    display:flex;
    flex-direction:column;
    z-index:20;
}

.brand{
    display:block;
    padding:22px 20px 2px;
    color:#fff;
    font-size:21px;
    font-weight:800;
    letter-spacing:-.02em;
    text-decoration:none;
}
.brand:hover{ text-decoration:none; }
.brand span{ color:var(--teal); }

.brand-sub{
    padding:0 20px 20px;
    color:rgba(255,255,255,.45);
    font-size:11.5px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.nav{ display:flex; flex-direction:column; }

.nav a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 20px 11px 17px;
    color:rgba(255,255,255,.7);
    font-size:13.5px;
    font-weight:500;
    border-left:3px solid transparent;
    text-decoration:none;
    transition:background .12s, color .12s;
}
.nav a svg{ width:17px; height:17px; flex:none; opacity:.85; }
.nav a:hover{ color:#fff; background:rgba(255,255,255,.04); text-decoration:none; }
.nav a.active{
    color:#fff;
    border-left-color:var(--teal);
    background:rgba(255,255,255,.06);
    font-weight:600;
}

.nav-foot{
    margin-top:auto;
    padding:10px 0 14px;
    border-top:1px solid rgba(255,255,255,.08);
}

/* ---- Layout ----------------------------------------------------------- */

.main{ margin-left:var(--sidebar-w); min-height:100vh; }

.content{ max-width:1100px; padding:28px; margin:0 auto; }

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}
.topbar h1{ font-size:21px; font-weight:700; color:var(--navy); letter-spacing:-.01em; }

.who{ display:flex; align-items:center; gap:11px; }
.who-text{ text-align:right; }
.who-name{ font-size:13.5px; font-weight:600; }
.who-company{ font-size:12px; color:var(--muted); }
.avatar{
    width:36px; height:36px;
    border-radius:50%;
    background:var(--ocean);
    color:#fff;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    letter-spacing:.02em;
}

/* ---- Cards ------------------------------------------------------------ */

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 1px 2px rgba(16,35,61,.06);
    padding:22px 24px;
    margin-bottom:20px;
}

.card h2{
    font-size:15px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:14px;
}

.card-sub{ font-size:13px; color:var(--muted); margin:-10px 0 16px; }

/* ---- Stat cards ------------------------------------------------------- */

.stat-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-bottom:20px;
}
.stat{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 1px 2px rgba(16,35,61,.06);
    padding:18px 20px;
}
.stat .num{ font-size:28px; font-weight:700; color:var(--navy); line-height:1.15; }
.stat .lbl{
    font-size:11.5px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-top:4px;
}
.stat.stat-accent{ border-top:3px solid var(--teal); }

/* ---- Tables ----------------------------------------------------------- */

.table-wrap{ overflow-x:auto; }

table{ width:100%; border-collapse:collapse; }

th{
    text-align:left;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:9px 12px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
td{
    font-size:14px;
    padding:11px 12px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:#F8FAFC; }

td.td-muted{ color:var(--muted); }
td.td-empty{ text-align:center; color:var(--muted); padding:34px 12px; }
.table-title{ font-weight:600; color:var(--text); }

/* ---- Status chips ----------------------------------------------------- */

.chip{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    line-height:1.5;
    white-space:nowrap;
}
.chip-pending    { background:#EEF2F7; color:#5A6B7F; }
.chip-in_progress{ background:#E3F2FD; color:#1565C0; }
.chip-submitted  { background:#EDE7F6; color:#5E35B1; }
.chip-processing { background:#FFF3E0; color:#B26A00; }
.chip-complete   { background:#E8F5E9; color:#2E7D32; }
.chip-failed     { background:#FFEBEE; color:#C62828; }
.chip-approved   { background:#E8F5E9; color:#2E7D32; }
.chip-rejected   { background:#FFEBEE; color:#C62828; }

/* ---- Buttons ---------------------------------------------------------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 16px;
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover{ text-decoration:none; }

.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-hover); }

.btn-secondary{ background:#fff; color:var(--text); border-color:var(--input-border); }
.btn-secondary:hover{ background:#F8FAFC; }

.btn-sm{ padding:6px 12px; font-size:13px; border-radius:7px; }
.btn-lg{ padding:12px 22px; font-size:15px; }
.btn-block{ width:100%; }

.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(44,166,164,.3); }

/* ---- Forms ------------------------------------------------------------ */

.field{ margin-bottom:15px; }
.field:last-child{ margin-bottom:0; }

label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:5px;
}

.input,
input[type=text], input[type=email], input[type=password], input[type=tel],
textarea, select{
    width:100%;
    font-family:inherit;
    font-size:14px;
    color:var(--text);
    background:#fff;
    padding:9px 12px;
    border:1px solid var(--input-border);
    border-radius:8px;
    transition:border-color .12s, box-shadow .12s;
}
textarea{ resize:vertical; min-height:42px; }

.input:focus,
input:focus, textarea:focus, select:focus{
    outline:none;
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(44,166,164,.18);
}

::placeholder{ color:#9AA9BB; }

.hint{ font-size:12px; color:var(--muted); margin-top:5px; }

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 18px;
}

.form-actions{ margin-top:18px; display:flex; align-items:center; gap:10px; }

/* ---- Flash banners ---------------------------------------------------- */

.flash{
    padding:11px 15px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    margin-bottom:18px;
    border:1px solid transparent;
}
.flash-success{ background:#E8F5E9; color:#2E7D32; border-color:#CBE7CD; }
.flash-danger { background:#FFEBEE; color:#C62828; border-color:#F5CDD2; }

.flash ul{ margin:2px 0 0 18px; }

/* ---- Filter tabs ------------------------------------------------------ */

.filter-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tabs a{
    display:inline-block;
    padding:6px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    background:transparent;
    border:1px solid transparent;
    text-decoration:none;
    transition:background .12s, color .12s;
}
.tabs a:hover{ background:#E9EEF4; color:var(--text); text-decoration:none; }
.tabs a.active{ background:var(--navy); color:#fff; }

.search-form{ display:flex; gap:8px; }
.search-form input{ width:210px; }

/* ---- Asset type picker (request_new) ----------------------------------- */

.asset-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:12px;
}

.asset-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:13px 15px;
    background:#FBFCFE;
    border:1px solid var(--input-border);
    border-radius:10px;
    cursor:pointer;
    margin-bottom:0;
    font-weight:400;
    color:var(--text);
    transition:border-color .12s, background .12s, box-shadow .12s;
}
.asset-card:hover{ border-color:var(--teal); background:#fff; }

.asset-card input{
    position:absolute;
    opacity:0;
    width:1px; height:1px;
    pointer-events:none;
}

.ac-dot{
    flex:none;
    width:18px; height:18px;
    margin-top:1px;
    border:2px solid var(--input-border);
    border-radius:50%;
    background:#fff;
    transition:border-color .12s, box-shadow .12s;
}
.asset-card input:checked + .ac-dot{
    border-color:var(--teal);
    box-shadow:inset 0 0 0 4px var(--teal);
}

.asset-card:has(input:checked){
    border-color:var(--teal);
    background:#fff;
    box-shadow:0 0 0 3px rgba(44,166,164,.18);
}
.asset-card:has(input:focus-visible){
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(44,166,164,.3);
}

.ac-body{ min-width:0; }
.ac-name{
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--navy);
    line-height:1.35;
}
.ac-desc{
    display:block;
    font-size:12.5px;
    color:var(--muted);
    margin-top:2px;
}

.h2-optional{ font-weight:500; color:var(--muted); }

/* ---- Items editor (request_new) --------------------------------------- */

.item-row{
    border:1px solid var(--border);
    border-radius:8px;
    background:#FBFCFE;
    padding:14px 16px;
    margin-bottom:12px;
}

.item-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}
.item-num{
    font-size:12px;
    font-weight:700;
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.05em;
    min-width:52px;
}
.item-head select{ width:auto; padding:6px 30px 6px 10px; font-size:13px; font-weight:600; }

.item-actions{ margin-left:auto; display:flex; gap:6px; }

.icon-btn{
    width:30px; height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid var(--input-border);
    border-radius:7px;
    color:var(--muted);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:background .12s, color .12s, border-color .12s;
}
.icon-btn:hover{ background:#F4F7FA; color:var(--text); }
.icon-btn.act-remove:hover{ background:#FFEBEE; color:#C62828; border-color:#F5CDD2; }
.icon-btn:disabled{ opacity:.35; cursor:default; }
.icon-btn:disabled:hover{ background:#fff; color:var(--muted); border-color:var(--input-border); }
.icon-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(44,166,164,.25); }

.item-row .field{ margin-bottom:11px; }
.item-row .field:last-child{ margin-bottom:0; }
.item-row.is-question .f-ai-wrap{ display:none; }

.items-empty{
    border:1px dashed var(--input-border);
    border-radius:8px;
    padding:22px;
    text-align:center;
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:12px;
}

/* ---- Request view ----------------------------------------------------- */

.req-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.req-header h2{ font-size:18px; margin-bottom:4px; }
.req-header .req-meta{ font-size:13px; color:var(--muted); }

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.two-col .card{ margin-bottom:20px; }

.detail-list{ list-style:none; }
.detail-list li{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:7px 0;
    border-bottom:1px solid var(--border);
    font-size:13.5px;
}
.detail-list li:last-child{ border-bottom:none; }
.detail-list .k{ color:var(--muted); font-weight:500; }
.detail-list .v{ font-weight:600; text-align:right; }

.pdf-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    border-left:4px solid var(--teal);
}
.pdf-banner h2{ margin-bottom:2px; }
.pdf-banner p{ font-size:13px; color:var(--muted); }

.info-note{
    background:#E3F2FD;
    border:1px solid #C5DEF5;
    color:#1565C0;
    border-radius:8px;
    padding:11px 15px;
    font-size:13.5px;
    font-weight:500;
    margin-bottom:14px;
}

.src-badge{
    display:inline-block;
    vertical-align:1px;
    margin-left:6px;
    padding:1px 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    line-height:1.6;
    border:1px solid transparent;
}
.src-anchor{ background:rgba(44,166,164,.12); color:#1B7A78; border-color:rgba(44,166,164,.3); }
.src-broker{ background:#EDE7F6; color:#5E35B1; border-color:#DCD0F0; }
.src-ai    { background:#EEF2F7; color:#5A6B7F; border-color:#DDE5EE; }

.item-view{
    display:flex;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--border);
}
.item-view:first-of-type{ padding-top:4px; }
.item-view:last-of-type{ border-bottom:none; padding-bottom:4px; }

.item-view .iv-body{ flex:1; min-width:0; }
.iv-kind{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.07em;
}
.iv-title{ font-size:14.5px; font-weight:600; color:var(--navy); margin:2px 0 3px; }
.iv-instructions{ font-size:13px; color:var(--muted); }
.iv-answer{
    margin-top:9px;
    font-size:14px;
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 13px;
    white-space:pre-wrap;
}
.iv-answer.empty{ color:var(--muted); }
.iv-feedback{ font-size:12.5px; color:var(--muted); margin-top:7px; max-width:180px; }

.item-view .iv-photo{ flex:none; width:180px; text-align:right; }
.thumb{ display:inline-block; }
.thumb img{
    max-width:180px;
    max-height:140px;
    border-radius:8px;
    border:1px solid var(--border);
    display:block;
}
.iv-photo .chip{ margin-top:8px; }
.no-photo{
    width:180px; height:110px;
    border:1px dashed var(--input-border);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-size:12.5px;
    background:#FBFCFE;
}

/* ---- Login ------------------------------------------------------------ */

.auth-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(44,166,164,.14), transparent 60%),
        radial-gradient(700px 420px at -10% 110%, rgba(11,37,69,.10), transparent 60%),
        var(--bg);
}

.auth-card{
    width:100%;
    max-width:400px;
}

.auth-brand{
    text-align:center;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--navy);
    margin-bottom:2px;
}
.auth-brand span{ color:var(--teal); }
.auth-sub{
    text-align:center;
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:22px;
}

.auth-card .card{ padding:26px 28px; }

.dev-hint{
    margin-top:16px;
    background:#FFF8E1;
    border:1px solid #F3E2A8;
    border-radius:8px;
    padding:12px 15px;
    font-size:12.5px;
    color:#8A6D1A;
}
.dev-hint strong{ display:block; margin-bottom:3px; }
.dev-hint code{
    background:rgba(255,255,255,.7);
    border-radius:4px;
    padding:1px 5px;
    font-size:12px;
}

/* ---- Misc ------------------------------------------------------------- */

.muted{ color:var(--muted); }
.mb-0{ margin-bottom:0; }

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 900px){
    .sidebar{
        position:static;
        width:auto;
        flex-direction:row;
        align-items:center;
        flex-wrap:wrap;
        padding:6px 10px;
    }
    .brand{ padding:10px 12px; font-size:18px; }
    .brand-sub{ display:none; }
    .nav{ flex-direction:row; flex-wrap:wrap; }
    .nav a{ border-left:none; border-bottom:3px solid transparent; padding:9px 12px; }
    .nav a.active{ border-left:none; border-bottom-color:var(--teal); }
    .nav a svg{ display:none; }
    .nav-foot{ margin-top:0; margin-left:auto; border-top:none; padding:0; }
    .main{ margin-left:0; }
    .content{ padding:18px 14px; }
    .stat-grid{ grid-template-columns:repeat(2, 1fr); }
    .form-grid, .two-col{ grid-template-columns:1fr; }
    .item-view{ flex-direction:column; }
    .item-view .iv-photo{ width:auto; text-align:left; }
    .iv-feedback{ max-width:none; }
    .who-text{ display:none; }
}

.chip-skipped{ background:#FFF3E0; color:#B26A00; }
.chip-unclear{ background:#FFF3E0; color:#B26A00; }

/* "Something else": the broker describes the asset, the AI designs the shot */
.custom-asset{ margin-top:14px; }
.field-hint{
  margin:6px 0 0;
  font-size:12.5px;
  color:#6B7A8D;
  line-height:1.45;
}
.asset-grid-tail{ margin-top:10px; }

/* Editing a survey that is still in progress */
.iv-actions{ margin-top:8px; }
.btn-link-danger{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  font-size:13px;
  color:#C62828;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.btn-link-danger:hover{ color:#8E1F1F; }
.label-hint{ font-weight:400; color:#6B7A8D; }
.finalise-card p{ margin:0 0 10px; font-size:14px; color:#6B7A8D; line-height:1.5; }
.finalise-count{ color:#1B2733 !important; }
.finalise-card .btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Confirmation modal + toast (replacing the browser's confirm dialog) */
/* The display below would otherwise beat the UA's [hidden] rule and paint
   the dialog over every page load */
.modal-overlay[hidden]{ display:none; }
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,37,69,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:80;
  animation:modal-fade .16s ease-out;
}
@keyframes modal-fade{ from{ opacity:0 } to{ opacity:1 } }
.modal-card{
  background:#fff;
  border-radius:14px;
  padding:24px 24px 18px;
  width:100%;
  max-width:440px;
  box-shadow:0 20px 60px rgba(11,37,69,.35);
  animation:modal-rise .2s cubic-bezier(.3,1.2,.5,1);
}
@keyframes modal-rise{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.modal-card h2{ margin:0 0 8px; font-size:19px; color:#0B2545; }
.modal-card p{ margin:0 0 20px; font-size:14.5px; color:#6B7A8D; line-height:1.55; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }
.btn-danger{ background:#C62828; color:#fff; border-color:#C62828; }
.btn-danger:hover{ background:#A81E1E; border-color:#A81E1E; }
.btn-danger:disabled{ opacity:.6; cursor:not-allowed; }

.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  background:#0B2545;
  color:#fff;
  font-size:14px;
  padding:12px 20px;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(11,37,69,.3);
  z-index:90;
  max-width:88%;
  text-align:center;
  animation:toast-rise .2s ease-out;
}
.toast-bad{ background:#C62828; }
@keyframes toast-rise{ from{ opacity:0; transform:translate(-50%, 8px) } to{ opacity:1; transform:translate(-50%, 0) } }

.item-view[data-item-row]{ transition:opacity .18s ease; }

.check-row{ display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:14px; color:#1B2733; }
.check-row input{ width:17px; height:17px; }
.finalise-none{ margin-top:10px; }
.items-heading:focus{ outline:none; }