/* =========================================================
   MONVISO B2B PORTAL — shared stylesheet
   Brand: navy #003A70 / teal #4A90A4 / sky #A8D8E6 / ice #E8F4F8
   Donation accent: coral #d98b87. Fonts: Bricolage + Instrument Sans
   ========================================================= */

:root{
  --navy:#003A70; --navy-d:#002a52; --teal:#4A90A4; --sky:#A8D8E6; --ice:#E8F4F8;
  --cyan:#2a9fd6; --coral:#d98b87; --coral-d:#b95f4c;
  --ink:#0f2b45; --body:#3d5b73; --muted:#7794a8;
  --line:#dbe9f1; --line-2:#eaf3f8; --bg:#f5fafc; --white:#fff;
  --ok:#1c8a5b; --ok-bg:#e7f6ef; --ok-line:#b9e6cf;
  --warn:#a9720d; --warn-bg:#fdf4e3; --warn-line:#f0dcae;
  --bad:#b4432c; --bad-bg:#fbece8; --bad-line:#f0cec4;
  --head:'Bricolage Grotesque',sans-serif; --sans:'Instrument Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--body);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.12;letter-spacing:-.015em;font-weight:700}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer}
.num{font-family:var(--head);font-weight:800;letter-spacing:-.02em}

/* ---------- top bar ---------- */
.bar{background:var(--navy);color:#cfe2ef}
.bar-in{max-width:1080px;margin:0 auto;padding:0 26px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar-brand .mark{height:26px;width:auto;display:block;flex:none}
.bar-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.bar .logo{font-family:var(--head);font-weight:800;font-size:19px;color:#fff;white-space:nowrap}
.bar .logo .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-left:3px}
.bar .tag{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);border-left:1px solid rgba(255,255,255,.22);padding-left:12px;white-space:nowrap}
.bar-right{display:flex;align-items:center;gap:16px;min-width:0;justify-content:flex-end}
.bar .who{font-size:13.5px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar .out{font-size:13px;color:#8fb4d0;white-space:nowrap;flex:0 0 auto}
.bar .out:hover{color:#fff}

/* ---------- page ---------- */
.page{max-width:1080px;margin:0 auto;padding:30px 26px 60px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:27px}
.page-head .sub{font-size:14px;color:var(--muted);margin-top:5px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--teal);font-weight:500;white-space:nowrap}
.live .p{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(42,159,214,.5)}70%{box-shadow:0 0 0 7px rgba(42,159,214,0)}100%{box-shadow:0 0 0 0 rgba(42,159,214,0)}}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.card-h h3{font-size:16.5px;margin-bottom:3px}
.card-h .s{font-size:12.5px;color:var(--muted)}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)} .g-5 .kpi{padding:18px 16px} .g-5 .kpi .n{font-size:27px}
.mb{margin-bottom:14px}

/* ---------- KPI ---------- */
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.kpi .t{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.kpi .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.kpi .l{font-size:12.5px;font-weight:600;color:var(--body);line-height:1.3}
.kpi .n{font-size:31px;color:var(--ink);line-height:1}
.kpi .n small{font-size:14px;font-weight:700;color:var(--body)}
.kpi .s{font-size:11.5px;color:var(--teal);margin-top:8px;font-weight:500}
.kpi.hero{background:linear-gradient(150deg,#fff,#fdf1ef);border-color:#f2d9d4}
.kpi.hero .n{color:var(--coral-d)} .kpi.hero .s{color:var(--coral-d)}
.i-coral{background:#fbeeec}.i-teal{background:#e6f1f3}.i-navy{background:var(--ice)}.i-sky{background:#eef8fc}

/* ---------- badges + buttons ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.b-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.b-bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.b-info{background:var(--ice);color:var(--navy);border:1px solid var(--line)}
.badge .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;border:1.5px solid transparent;transition:.15s;white-space:nowrap}
.btn-p{background:var(--navy);color:#fff}.btn-p:hover{background:var(--navy-d)}
.btn-g{background:#fff;color:var(--navy);border-color:var(--line)}.btn-g:hover{border-color:var(--navy)}
.btn-w{width:100%}
.btn-s{padding:8px 15px;font-size:13px}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);padding:0 12px 11px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .r{text-align:right} .tbl .strong{font-weight:600;color:var(--ink)}
.tbl .don{font-family:var(--head);font-weight:700;color:var(--coral-d)}
.tbl tbody tr:hover{background:#fafdff}
.tbl td:first-child,.tbl th:first-child{min-width:130px}

/* ---------- chart ---------- */
.chart{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:22px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;min-width:0}
.track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
/* Named cbar, not bar: .bar is the page top bar and would collide */
.cbar{width:72%;max-width:40px;background:linear-gradient(180deg,var(--cyan),var(--sky));border-radius:6px 6px 0 0;position:relative}
.cbar .v{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-family:var(--head);font-weight:700;font-size:10.5px;color:var(--navy);white-space:nowrap}
.col .x{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap}

/* ---------- misc ---------- */
.rows .row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;font-size:13.5px;border-bottom:1px solid var(--line-2)}
.rows .row:last-child{border-bottom:none}
.rows .row span{color:var(--body)} .rows .row b{color:var(--ink);font-family:var(--head);font-weight:700}
.warnbox{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:13px 15px;font-size:13px;color:#7a5406;margin-bottom:14px}
.okbox{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.note{background:var(--ice);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:12.5px;color:var(--body);line-height:1.5}
.note b{color:var(--ink)}
.banner{display:flex;align-items:center;gap:11px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:13px 15px;font-size:13.5px;color:#7a5406;margin-bottom:14px;flex-wrap:wrap}
.banner b{font-family:var(--head)}
.cert-band{background:var(--navy);color:#fff;border-radius:16px;padding:24px;display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.cert-band .seal{width:62px;height:62px;border-radius:50%;border:2px solid var(--coral);display:grid;place-items:center;text-align:center;font-family:var(--head);font-size:8.5px;font-weight:700;color:var(--coral);text-transform:uppercase;line-height:1.15;flex:0 0 auto;transform:rotate(-7deg)}
.cert-band .txt{flex:1;min-width:200px}
.cert-band h3{color:#fff;font-size:18px;margin-bottom:5px}
.cert-band p{font-size:13.5px;color:#bcd8ea}
.demo-flag{position:fixed;bottom:14px;right:14px;z-index:80;background:var(--ink);color:#cfe6f2;font-size:11px;font-weight:600;padding:7px 12px;border-radius:8px;opacity:.88;pointer-events:none}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.field input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-family:var(--sans);font-size:14.5px;color:var(--ink);background:#fff}
.field input:focus{outline:none;border-color:var(--cyan)}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ---------- responsive ---------- */
@media(max-width:820px){ .g-4,.g-5{grid-template-columns:repeat(2,1fr)} .g-5>.kpi:last-child{grid-column:span 2} .g-3,.g-2{grid-template-columns:1fr} }
@media(max-width:560px){
  .bar-in{padding:0 16px;height:56px}
  .bar .tag{display:none}
  .page{padding:22px 16px 50px}
  .page-head h1{font-size:23px}
  .g-4,.g-5{grid-template-columns:1fr 1fr}
  .kpi,.g-5 .kpi{padding:15px 14px}
  .kpi .l{font-size:11.5px} .kpi .n{font-size:24px} .kpi .n small{font-size:12px}
  .card{padding:18px 15px;overflow-x:auto}
  .chart{gap:5px;height:150px}
  .tbl .hide-s{display:none}
}
@media print{ .bar,.demo-flag,.no-print{display:none!important} .page{padding:0;max-width:100%} }


/* ---------- reporting band ----------
   The monthly report is the message. Picking a custom period is the exception,
   so it stays folded away until someone actually needs it. */
.cert-band{align-items:flex-start}
.cert-band .seal{margin-top:2px}
.cert-band .txt{flex:1;min-width:0}

.period{margin-top:13px;border-top:1px solid rgba(255,255,255,.16);padding-top:11px}
.period > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;font-size:13px;font-weight:600;color:#fff;opacity:.82;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.period > summary::-webkit-details-marker{display:none}
.period > summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.period[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.period > summary:hover{opacity:1}
.period-body{padding-top:4px}
.period-row{display:flex;gap:10px;flex-wrap:wrap}
.period-row label{display:flex;flex-direction:column;gap:5px;flex:1 1 130px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.period-row input[type=date]{font-family:inherit;font-size:16px;line-height:normal;
  min-height:44px;padding:0 11px;border:1px solid rgba(255,255,255,.28);border-radius:8px;
  background:rgba(255,255,255,.10);color:#fff;width:100%;max-width:100%;min-width:0;
  box-sizing:border-box;display:block;-webkit-appearance:none;appearance:none}
.period-row label{min-width:0}
.period, .period-body, .period form{min-width:0;max-width:100%}
.period-row input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.75;cursor:pointer}
.period-note{font-size:12.5px;opacity:.82;margin:10px 0 12px;line-height:1.5}
.period-note.bad{opacity:1;color:#ffc9c4}
.period .btn{width:100%;min-height:44px}
.cert-band .btn[aria-disabled=true]{opacity:.45;pointer-events:none}

/* ---------- mobile ---------- */
@media(max-width:560px){
  .bar .out{min-height:44px;display:inline-flex;align-items:center}
  .cert-band{padding:20px 17px;gap:15px}
  .cert-band .seal{width:52px;height:52px;font-size:7.5px}
  .cert-band h3{font-size:17px}
  .period-row label{flex:1 1 100%;width:100%}
  .cert-band .txt{flex:1 1 0;min-width:0;max-width:100%}
  /* Make the delivery table FIT instead of asking people to swipe. Four
     columns survive on a phone: date, cartons, recycled, donated. */
  .tbl{min-width:0;width:100%;table-layout:fixed}
  .tbl th,.tbl td{padding:11px 6px;font-size:12.5px}
  .tbl th:first-child,.tbl td:first-child{padding-left:0}
  .tbl th:last-child,.tbl td:last-child{padding-right:0}
  .tbl td.strong{font-size:12.5px}
  .card{overflow-x:visible}
}
.scroll-hint{display:none}

@media(max-width:560px){
  /* Approve and Open sit inside table rows on the internal console, so they
     are the buttons a thumb actually has to hit. */
  .tbl .btn-s{min-height:44px;padding:0 14px;display:inline-flex;align-items:center}
}