/* Dashboard: header, summary strip, filters, marketplace-style listings */
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dash-head .kicker{margin-bottom:10px}
#dashboard .dash-head{justify-content:space-between;align-items:center}
.dash-head h1{font-size:clamp(32px,3.6vw,44px)}
.dash-sub{margin:8px 0 0;color:var(--muted);font-size:15px}

/* summary: three totals in a ruled strip inside the notebook page */
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.summary>div{padding:0 28px;border-left:1px solid var(--line)}
.summary>div:first-child{border-left:0}
.summary span{display:block;font:500 clamp(17px,1.6vw,20px)/1.1 var(--serif);color:var(--pine);letter-spacing:-.01em}
.summary small{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* filters + sort */
.dash-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:0}
.tool-right{display:flex;gap:10px;flex-wrap:wrap}
.dash-tools input,.dash-tools select{padding:5px 14px;border-radius:999px;font-size:14px;line-height:1.3;width:auto}
.dash-tools input{min-width:230px}
.dash-tools select{border:1px solid var(--field);background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.dash-tools select:focus{outline:0;border-color:var(--pine-2);box-shadow:0 0 0 3px rgba(51,82,63,.15)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 13px;border:1px solid var(--field);border-radius:999px;background:transparent;color:var(--pine);font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s}
.chip:hover{background:var(--sage)}
.chip.on{background:var(--pine);border-color:var(--pine);color:#fff}
.chip .count{font-size:12.5px;opacity:.7;font-variant-numeric:tabular-nums}
.chip:focus-visible{outline:3px solid rgba(51,82,63,.4);outline-offset:2px}
.result-count{margin:-4px 0 -6px;color:var(--muted);font-size:14.5px;font-weight:600}
#dashStatus{margin:0}

/* list of sales: plain rows separated by thin lines, no card boxes */
.listings{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.listing{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}

.info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.l-title{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.8vw,20px);line-height:1.25;letter-spacing:-.012em;color:var(--pine);overflow-wrap:anywhere}
.l-assoc{margin:0;color:var(--brass-ink);font-weight:600;font-size:15px}
.l-detail{margin:2px 0 0;max-width:62ch;color:var(--muted);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.l-contact{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14.5px;color:var(--muted);overflow-wrap:anywhere}
.l-contact span{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.l-contact a{color:var(--pine);font-weight:600;text-decoration:underline;text-decoration-color:var(--field);text-underline-offset:3px}
.l-contact a:hover{text-decoration-color:var(--pine)}

.side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.listed{margin:0;color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap}

.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--sage);color:var(--pine)}
.pill.in_progress{background:#f1e6cd;color:var(--brass-ink)}
.pill.completed{background:var(--pine);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.pill.cancelled{background:#ece8de;color:var(--muted)}

.empty{text-align:center;padding:48px 20px}
.empty h3{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:25px;color:var(--pine)}
.empty p{margin:0 auto 22px;max-width:380px;color:var(--muted)}

@media(max-width:700px){
  .summary{grid-template-columns:.75fr .85fr 1.4fr;padding:10px 0}
  .summary>div{padding:0 12px}
  .summary span{font-size:15px}
  .summary small{font-size:9.5px;letter-spacing:.05em;margin-top:4px}
  .dash-head .btn{width:100%}
  .tool-right{width:100%}
  .listing{grid-template-columns:minmax(0,1fr);gap:12px}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;gap:6px 14px}
  .dash-tools input{flex:1;min-width:0}
}


/* notebook: the page content sits on a spiral-bound notebook page. Rings on the left, divider tabs on top. */
#dashboard,#overview,#newsale{padding-top:clamp(28px,5vw,64px)}
.tabs{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;padding-right:clamp(18px,3vw,36px);position:relative;z-index:2}
.tab{white-space:nowrap;margin-bottom:-1px;padding:9px 24px 8px;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;color:var(--pine);font-weight:600;font-size:14.5px;letter-spacing:.01em;transform:translateY(5px);transition:transform .2s,background .2s}
.tab[data-go=overview]{background:#efe5cb}
.tab[data-go=portal]{background:#dde6da}
.tab:hover{transform:translateY(2px)}
.tab.on{background:var(--card);transform:none;padding-top:11px;padding-bottom:9px;position:relative;z-index:3;cursor:default}
.tab:focus-visible{outline:3px solid rgba(51,82,63,.4);outline-offset:2px}
.notebook{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,4vw,44px) clamp(22px,4vw,44px) clamp(26px,4vw,44px) 68px;background:var(--card);border:1px solid var(--line);border-radius:6px 14px 14px 6px;
  box-shadow:-9px 0 0 var(--pine),3px 0 0 -1px #fbf9f2,4px 0 0 -1px var(--line),7px 0 0 -2px #f6f3ea,8px 0 0 -2px var(--line),12px 10px 24px -14px rgba(36,60,48,.35)}
.notebook::before{content:"";position:absolute;left:-21px;top:22px;bottom:22px;width:48px;pointer-events:none;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='64' viewBox='0 0 48 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f0dca6'/%3E%3Cstop offset='.45' stop-color='%23b8954f'/%3E%3Cstop offset='1' stop-color='%236f5522'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='31' cy='38' rx='3' ry='5' fill='%23c9c2ad'/%3E%3Crect x='4.9' y='27.5' width='32' height='9' rx='4.5' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='3.4' transform='translate(.9 .6)'/%3E%3Crect x='4.9' y='27.5' width='32' height='9' rx='4.5' fill='none' stroke='url(%23g)' stroke-width='2.6'/%3E%3C/svg%3E") left top/48px 64px no-repeat space}
.notebook .empty{border:0;box-shadow:none;background:none;padding:36px 0}
body:is([data-view="dashboard"],[data-view="overview"],[data-view="newsale"]) :is(#navDash,#navOverview,#navNew){display:none}
@media(max-width:700px){
  #dashboard,#overview,#newsale{padding-left:30px}
  .tabs{padding-right:14px;gap:3px;flex-wrap:wrap}
  .tab{padding-left:9px;padding-right:9px;font-size:12px}
  .notebook{padding:22px 18px 26px 50px}
}

/* wider notebook */
#dashboard,#overview,#newsale{max-width:1480px}
body:is([data-view="dashboard"],[data-view="overview"],[data-view="newsale"]) nav{max-width:1480px}

/* numbered pager */
.pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;padding-top:4px}
.pg{min-width:40px;height:40px;padding:0 14px;border:1px solid var(--field);border-radius:999px;background:transparent;color:var(--pine);font-weight:600;font-size:14.5px;transition:background .2s,border-color .2s}
.pg:hover:not(:disabled):not(.on){background:var(--sage)}
.pg.on{background:var(--pine);border-color:var(--pine);color:#fff;cursor:default}
.pg:disabled{opacity:.4;cursor:default}
.pg:focus-visible{outline:3px solid rgba(51,82,63,.4);outline-offset:2px}
.pg-gap{color:var(--muted);padding:0 2px}
@media(max-width:700px){.pg{min-width:36px;height:36px;padding:0 10px;font-size:13.5px}}


/* desktop: the notebook fits the screen. The page itself never scrolls, only the list inside the notebook does. */
@media(min-width:701px) and (min-height:560px){
  body[data-view="dashboard"],body[data-view="overview"],body[data-view="newsale"]{height:100vh;height:100dvh;overflow:hidden}
  #dashboard,#overview,#newsale{min-height:0;display:flex;flex-direction:column;padding-top:clamp(10px,1.6vw,22px);padding-bottom:18px}
  body[data-view="dashboard"] footer,body[data-view="overview"] footer,body[data-view="newsale"] footer{padding:10px 24px;font-size:13.5px}
  .tabs{flex:none}
  #dashboard .notebook,#overview .notebook,#newsale .notebook{flex:1 1 0;min-height:0}
  #dashboard .notebook>*,#overview .notebook>*{flex-shrink:0}
  #newsale .notebook>.ns-wrap{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--field) transparent}
  #dashboard .notebook>.listings,#overview .notebook>.listings{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--field) transparent}
}

/* prominent search bar in the page header row */
.search-box{position:relative;flex:1 1 360px;max-width:520px}
.search-box svg{position:absolute;left:18px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--pine);pointer-events:none}
.search-box input{width:100%;padding:12px 20px 12px 48px;border:1.5px solid var(--pine-2);border-radius:999px;background:#fff;font-size:16px;box-shadow:0 2px 8px -3px rgba(36,60,48,.25)}
.search-box input:hover{border-color:var(--pine)}
.search-box input:focus{border-color:var(--pine);box-shadow:0 0 0 4px rgba(51,82,63,.16)}
#overview .dash-head{align-items:center}
#overview .search-box{margin-left:auto}
@media(max-width:700px){.search-box{flex:1 1 100%;max-width:none}#dashboard .dash-head{flex-direction:column-reverse;align-items:stretch}}

/* wider notebook */
#dashboard,#overview,#newsale{max-width:1840px}
body:is([data-view="dashboard"],[data-view="overview"],[data-view="newsale"]) nav{max-width:1840px}

/* use the extra width: each record sits on one compact line */
@media(min-width:701px){
  .listing{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding-top:9px;padding-bottom:9px}
  .side{flex-direction:row;align-items:center;justify-content:flex-end;gap:14px;text-align:right}
  .side .when{font-size:17px}
  .side .kind{white-space:nowrap}
  .side .pill{order:-1}
}
@media(min-width:901px){
  .info{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));column-gap:36px;row-gap:1px;align-items:start}
  .info>.l-title{grid-column:1;grid-row:1}
  .info>.l-assoc{grid-column:1;grid-row:2}
  .info>.l-contact,.info>.l-detail{margin:0}
  .info>.l-detail{grid-column:2/4}
}

/* counts sit in the top row, beside the search bar */
.dash-head{gap:14px 28px;flex-wrap:nowrap}
.dash-head .summary{display:flex;flex:none;margin:0;padding:0;border:0}
.dash-head .summary>div{padding:0 22px;border-left:1px solid var(--line)}
.dash-head .summary>div:first-child{border-left:0}
.dash-head .summary span{font-size:18px}
.dash-head>div:first-child:not(.search-box):not(.summary){flex:1 1 auto;min-width:0}
#dashboard .dash-head .summary{margin-left:auto}
#overview .search-box{margin-left:0;flex:0 1 460px}
@media(min-width:701px){
  .listings{margin:0 -14px;overflow-x:hidden}
}
@media(max-width:700px){
  .dash-head{flex-wrap:wrap}
  .dash-head .summary{flex:1 1 100%;margin:0!important;justify-content:space-between}
  .dash-head .summary>div{padding:0 10px}
}

/* floating pager: sits over the bottom of the screen while the list scrolls behind it */
.pager{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;max-width:calc(100vw - 24px);padding:7px 10px;gap:6px;background:rgba(255,254,251,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 28px -6px rgba(36,60,48,.35),0 2px 6px rgba(36,60,48,.12)}
.listings:has(+ .pager:not([hidden])){padding-bottom:84px}

/* filters + result count sit to the right of the search bar */
.dash-head{flex-wrap:wrap}
.filter-group{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex:none}
.filter-group:not(:has(>:not([hidden]))){display:none}
.filter-group .dash-tools{padding:0;flex-wrap:nowrap;gap:12px}
.filter-group .result-count{margin:0;font-size:13.5px;line-height:1.2}
@media(max-width:700px){.filter-group{flex:1 1 100%}.filter-group .dash-tools{flex-wrap:wrap}}

/* pager: just Previous / Next with a page note, floating inside the notebook, no row of its own */
.pg-info{padding:0 10px;color:var(--ink,var(--pine));font-size:13.5px;font-weight:500;white-space:nowrap}
.pg-info{color:var(--muted)}
.listings:has(+ .pager:not([hidden])){padding-bottom:64px}
@media(min-width:701px) and (min-height:560px){
  #dashboard,#overview,#newsale{padding-bottom:12px}
  #dashboard .notebook,#overview .notebook,#newsale .notebook{padding-bottom:0}
  #dashboard .notebook>.pager,#overview .notebook>.pager{position:absolute;left:calc(50% + 24px);bottom:12px;transform:translateX(-50%);flex-shrink:1}
}
@media(max-width:700px){.pg-info{font-size:12.5px;padding:0 4px}}

/* edit / delete on each submitted sale */
.row-actions{display:flex;gap:6px;margin-left:6px}
.row-btn{padding:4px 12px;border:1px solid var(--field);border-radius:999px;background:transparent;color:var(--pine);font-weight:600;font-size:13px;transition:background .18s,border-color .18s,color .18s}
.row-btn:hover{background:var(--sage);border-color:var(--pine-2)}
.row-btn.danger{color:var(--err)}
.row-btn.danger:hover{background:#f7e4e0;border-color:var(--err)}
.row-btn:focus-visible{outline:3px solid rgba(51,82,63,.4);outline-offset:2px}
@media(max-width:700px){.row-actions{margin-left:0}}

/* Submitted Sale list: name | breed | sale date | sale association | three-dot menu. Click a row for the details popup. */
.listing.sale-row{cursor:pointer;display:grid;grid-template-columns:minmax(220px,460px) 170px 130px minmax(0,1fr) max-content 40px;gap:8px 28px;align-items:center;padding:10px 14px;outline:0}
.listing.sale-row:focus-visible{background:var(--sage);box-shadow:inset 0 0 0 2px rgba(51,82,63,.45)}
.sale-row .l-title{font-size:clamp(17px,1.6vw,19px)}
.sale-row .l-cell{margin:0;min-width:0;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sale-row .l-main{min-width:0}
.sale-row .l-main .l-assoc{margin:2px 0 0;font-size:13px;line-height:1.3;font-weight:600;color:var(--brass-ink)}
.sale-row .l-sub{font-size:13.5px;font-weight:600;color:var(--muted);text-align:right;white-space:nowrap}
.sale-row .l-cell.blank{color:var(--muted);font-weight:400}
.sale-row .l-sub{grid-column:5}
.sale-row .kebab{grid-column:6;justify-self:end}
.sale-row>.l-sub:nth-last-child(1){grid-column:5 / 7}
@media(min-width:701px) and (max-width:1100px){
  .listing.sale-row{grid-template-columns:minmax(0,1fr) 130px 118px max-content 40px;gap:8px 16px}
  .sale-row .l-sub{grid-column:4}
  .sale-row .kebab{grid-column:5}
  .sale-row>.l-sub:nth-last-child(1){grid-column:4 / 6}
}
.kebab{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--pine);transition:background .18s,border-color .18s}
.kebab svg{width:20px;height:20px}
.kebab:hover,.kebab[aria-expanded="true"]{background:#fff;border-color:var(--field)}
.kebab:focus-visible{outline:3px solid rgba(51,82,63,.4);outline-offset:2px}
.row-menu{position:fixed;z-index:60;min-width:150px;padding:6px;background:#fff;border:1px solid var(--field);border-radius:12px;box-shadow:0 12px 32px -8px rgba(36,60,48,.28)}
.row-menu[hidden]{display:none}
.row-menu-item{display:block;width:100%;padding:9px 14px;border:0;border-radius:8px;background:transparent;color:var(--pine);font:600 14.5px var(--sans);text-align:left}
.row-menu-item:hover,.row-menu-item:focus-visible{background:var(--sage);outline:0}
.row-menu-item.danger{color:var(--err)}
.row-menu-item.danger:hover,.row-menu-item.danger:focus-visible{background:#f7e4e0}
@media(max-width:700px){
  .listing.sale-row{grid-template-columns:minmax(0,1fr) 40px;gap:2px 12px;padding:12px 8px}
  .sale-row>*{grid-column:1}
  .sale-row .kebab{grid-column:2;grid-row:1 / span 2;align-self:start}
  .sale-row .l-cell{white-space:normal}
  .sale-row .l-sub{text-align:left;grid-column:1}
  .sale-row>.l-sub:nth-last-child(1){grid-column:1}
}

/* details popup */
.detail-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0;color:var(--muted);font-size:14.5px;font-weight:600}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.detail-item{min-width:0}
.detail-item.wide{grid-column:1 / -1}
.detail-item dt{margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.detail-item dd{margin:0;color:var(--ink);font-size:16px;overflow-wrap:anywhere;white-space:pre-wrap}
.detail-item dd.blank{color:var(--muted)}
.detail-item dd a{color:var(--pine);font-weight:600;text-decoration:underline;text-decoration-color:var(--field);text-underline-offset:3px}
.detail-item dd a:hover{text-decoration-color:var(--pine)}
@media(max-width:560px){.detail-grid{grid-template-columns:1fr}}

/* wider details popup */
#detailCard{max-width:880px}
#detailTitle{padding-right:44px}
@media(min-width:761px){.detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* contact lines in the details popup: name, email and phone each on their own line */
.ov-contact{display:flex;flex-direction:column;gap:2px;white-space:normal}