/* Agent and admin portals. Uses the tokens in site-pages.css. */
body{background:var(--mist)}
[hidden]{display:none!important}
.portal{width:min(920px,calc(100% - 32px));margin:0 auto;padding:clamp(22px,4vw,44px) 0 clamp(48px,7vw,84px)}
#msg{width:min(920px,calc(100% - 32px));margin:16px auto 0;font-size:.97rem;font-weight:550;border-radius:12px}
#msg:empty{display:none}
#msg.ok,#msg.err{padding:13px 16px}
#msg.ok{background:#DDF3E7;color:#0B5A3A;border-left:5px solid var(--check)}
#msg.err{background:#FBE3E0;color:#8E2219;border-left:5px solid var(--stamp)}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,3vw,28px);margin:0 0 16px}
.card h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 6px}
.card h3{font-size:1.2rem;margin:0 0 6px}
.hint,.portal small{color:var(--muted);font-size:.92rem}
.hint{margin:4px 0 0}
#auth,#reset,#status,#setup{max-width:500px;margin-inline:auto}

/* forms */
.portal label{display:block;font-size:.92rem;font-weight:650;color:var(--forest-deep);margin:16px 0 6px}
.portal label.inline{display:flex;gap:11px;align-items:flex-start;font-weight:500;color:var(--text)}
.portal label.inline input{width:20px;height:20px;margin-top:2px;accent-color:var(--forest)}
.portal input:not([type=checkbox]):not([type=file]):not([type=radio]),.portal select,.portal textarea{width:100%;min-height:48px;padding:11px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r-ctl);font:inherit;color:var(--text);background:#fff}
.portal textarea{resize:vertical}
.portal input:focus,.portal select:focus,.portal textarea:focus{border-color:var(--forest);outline:3px solid rgba(10,77,58,.18);outline-offset:0}
.portal input[type=file]{width:100%;padding:10px;border:1.5px dashed var(--line-strong);border-radius:var(--r-ctl);background:var(--mist);font:inherit}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}

/* buttons: primary by default, .alt outlined, .bad for destructive */
.portal button{display:inline-flex;align-items:center;justify-content:center;background:var(--forest);color:#fff;border:1.5px solid var(--forest);border-radius:var(--r-ctl);padding:12px 20px;font:inherit;font-weight:650;cursor:pointer;margin:14px 10px 0 0;line-height:1.2;transition:background .15s,color .15s}
.portal button:hover{background:var(--forest-deep);border-color:var(--forest-deep)}
.portal button.alt{background:#fff;color:var(--forest);border-color:var(--forest)}
.portal button.alt:hover{background:var(--forest);color:#fff}
.portal button.bad{background:var(--stamp);border-color:var(--stamp);color:#fff}
.portal button.bad:hover{background:#9C2820;border-color:#9C2820}
.portal button:disabled{opacity:.55;cursor:wait}

.pill{display:inline-block;padding:3px 11px;border-radius:999px;background:var(--mist);color:var(--forest-deep);font-size:.8rem;font-weight:700;vertical-align:middle}
.pill.warn{background:#FFF0C2}.pill.good{background:#D5F0DF;color:#0B5A3A}.pill.bad{background:#FBE0DC;color:#8E2219}

/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 16px;position:sticky;top:72px;background:var(--mist);padding:10px 0;z-index:5}
.tabs button,.portal .tabs button{margin:0;background:#fff;color:var(--forest-deep);border:1.5px solid var(--line);border-radius:999px;padding:10px 18px}
.tabs button:hover{background:#fff;border-color:var(--forest);color:var(--forest-deep)}
.tabs button[aria-selected="true"],.tabs button.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.tabs .push{margin-left:auto}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--mist);border-radius:12px;padding:4px;margin:14px 0 4px}
.portal .seg button{margin:0;background:transparent;color:var(--forest-deep);border:0;border-radius:9px;padding:11px}
.portal .seg button:hover{background:#fff;color:var(--forest-deep)}
.portal .seg button.on{background:var(--forest);color:#fff}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 4px}
.stat{background:var(--mist);border-radius:12px;padding:14px 16px;font-size:.92rem;color:var(--muted)}
.stat b{display:block;font-size:2rem;line-height:1.1;letter-spacing:-.03em;color:var(--forest-deep);font-weight:750}

/* add-property steps: numbered because they are done in order */
#p_add{counter-reset:pa}
#p_add .card h3{display:flex;align-items:center;gap:12px;font-size:1.3rem}
#p_add .card h3::before{counter-increment:pa;content:counter(pa);width:32px;height:32px;border-radius:50%;background:var(--mark);color:var(--forest-deep);font-weight:800;font-size:.95rem;display:grid;place-items:center;flex:none}

/* photos */
.drop{display:block;border:2px dashed var(--line-strong);border-radius:14px;padding:30px 18px;text-align:center;background:var(--mist);cursor:pointer;margin:12px 0 0;font-weight:500}
.drop strong{color:var(--forest-deep);font-size:1.05rem}
.drop:hover,.drop.over{background:#E3F1E8;border-color:var(--forest)}
.drop input{display:none}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.ph{position:relative;border-radius:12px;overflow:hidden;background:var(--mist);aspect-ratio:4/3}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .cover{position:absolute;left:8px;top:8px;background:var(--mark);color:var(--forest-deep);font-size:.76rem;font-weight:800;padding:3px 10px;border-radius:999px}
.ph-actions{position:absolute;left:0;right:0;bottom:0;display:flex;background:rgba(6,52,39,.82)}
.portal .ph-actions button{flex:1;margin:0;border:0;border-radius:0;background:transparent;padding:8px 0;font-size:1rem;color:#fff}
.portal .ph-actions button:hover{background:rgba(255,255,255,.18)}
progress{width:100%;height:10px;accent-color:var(--forest)}

.private{border-left:6px solid var(--mark);background:var(--mark-soft);padding:12px 16px;border-radius:0 12px 12px 0;margin:10px 0 4px}

/* listing rows and admin thumbnails */
.lst{display:grid;grid-template-columns:104px 1fr;gap:16px;border-top:1px solid var(--line);padding:16px 0}
.lst:first-child{border-top:0}
.lst img,.lst .noimg{width:104px;height:80px;border-radius:10px;object-fit:cover;background:var(--mist)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.thumbs img{width:84px;height:64px;object-fit:cover;border-radius:9px}

/* steps list inside the overview */
.card .steps{margin-top:14px}

@media(max-width:640px){
  .row,.row3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{top:64px}
  .tabs .push{margin-left:0}
  .lst{grid-template-columns:76px 1fr}
  .lst img,.lst .noimg{width:76px;height:62px}
}

.portal input[type=file]::file-selector-button{background:var(--forest);color:#fff;border:0;border-radius:8px;padding:8px 14px;margin-right:12px;font:inherit;font-weight:650;cursor:pointer}