/* leaflets.css — Private Dashboard (ENT)
   Pill-style rows, centred QR with white-only backdrop, high-contrast buttons
*/

/* ===== Theme ===== */
:root{
  --bg-page:#0f1115;
  --bg-card:#1a1d22;
  --bg-card-alt:#22262d;
  --text-main:#f2f4f6;
  --text-dim:#8f96a3;
  --border-col:#2d323c;
  --accent:#1c4b5b;          /* PP teal */
  --accent-text:#ffffff;
  --radius:12px;
  --nav-height:56px;         /* height of fixed private menu */
}
@media (prefers-color-scheme: light){
  :root{
    --bg-page:#f9fafb;
    --bg-card:#ffffff;
    --bg-card-alt:#f2f4f7;
    --text-main:#1a1d22;
    --text-dim:#5b626f;
    --border-col:#d8dce3;
    --accent:#1c4b5b;
    --accent-text:#ffffff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-main);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  display:flex;
  min-height:100vh;
}

/* ===== Layout ===== */
.content-wrapper{
  flex:1; min-width:0;
  padding:calc(16px + var(--nav-height)) clamp(16px,2vw,24px) 80px;
  display:grid; gap:24px;
}
header.page-head{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; row-gap:8px;
  margin-top:calc(-1 * var(--nav-height) + 8px);
  padding-top:var(--nav-height);
}
.page-head-titles h1{margin:0; font-size:1.25rem; font-weight:700; color:var(--text-main)}
.page-head-titles p{margin:4px 0 0; font-size:.9rem; color:var(--text-dim)}

.panels-grid{display:grid; gap:24px}
@media (min-width:900px){
  .panels-grid{grid-template-columns:1fr 360px; align-items:start}
}

/* ===== Cards / Panels ===== */
.panel{
  background:var(--bg-card);
  border:1px solid var(--border-col);
  border-radius:var(--radius);
  padding:16px;
}
.panel h2{margin:0 0 8px; font-size:1rem; font-weight:700; color:var(--text-main)}
.panel p.desc{margin:0 0 12px; font-size:.85rem; color:var(--text-dim)}
.sticky{position:sticky; top:calc(var(--nav-height) + 12px)} /* keep QR visible */

/* Section blocks (left column) */
.section-block{
  background:var(--bg-card-alt);
  border:1px solid var(--border-col);
  border-radius:var(--radius);
  padding:12px 16px; margin-bottom:16px;
}
.section-block h3{margin:0 0 8px; font-size:.95rem; font-weight:700; color:var(--text-main)}
.section-block p{margin:0 0 12px; font-size:.85rem; color:var(--text-dim)}

/* ===== Forms / Buttons ===== */
label.form-label{display:block; font-size:.85rem; font-weight:600; color:var(--text-main); margin-bottom:6px}
select,input[type="text"],textarea{
  width:100%; background:var(--bg-card); color:var(--text-main);
  border:1px solid var(--border-col); border-radius:10px;
  font-size:.95rem; padding:10px 12px; line-height:1.4; appearance:none;
}
textarea{resize:vertical; min-height:80px}

.row-flex{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start}
.row-flex>*{flex:1; min-width:180px}

.btn-accent,.btn-outline,.btn-inline{
  border-radius:10px; cursor:pointer; transition:filter .15s ease, transform .02s ease-in-out;
}
.btn-accent:active,.btn-outline:active,.btn-inline:active{transform:translateY(1px)}

.btn-accent{
  background:var(--accent); color:var(--accent-text); border:1px solid var(--accent);
  font-size:.9rem; font-weight:700; padding:10px 14px;
}
.btn-accent:hover{filter:brightness(1.05)}

/* Higher-contrast outline for dark mode */
.btn-outline{
  background:color-mix(in oklab, var(--bg-card) 88%, #ffffff 0%);
  color:var(--text-main);
  border:1px solid var(--border-col);
  font-size:.9rem; font-weight:600; padding:10px 14px;
}
.btn-outline:hover{filter:brightness(1.06)}
.btn-outline[disabled]{opacity:.45; cursor:not-allowed}

/* Search control */
#searchInput,#categoryFilter{
  background:var(--bg-card); color:var(--text-main);
  border:1px solid var(--border-col); border-radius:10px;
  font-size:.95rem; padding:10px 12px;
}

/* ===== Leaflet list (pill style) ===== */
.cat-block{margin-bottom:16px}
.cat-head{
  font-size:.85rem; font-weight:700; color:var(--text-dim);
  margin-bottom:8px; border-bottom:1px solid var(--border-col); padding-bottom:4px;
}

.leaflet-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  margin:8px 0;
  background:var(--bg-card);
  border:1px solid var(--border-col);
  border-radius:999px;    /* pill */
}
.leaflet-item input[type="checkbox"]{transform:translateY(1px)}

.leaflet-item-title{
  font-size:.95rem; color:var(--text-main); font-weight:600; line-height:1.35;
}
.leaflet-item-cat{
  font-size:.8rem; color:var(--text-dim); margin-left:6px;
}

.leaflet-actions{
  margin-left:auto; display:flex; gap:6px; align-items:center;
}
.leaflet-actions a,
.leaflet-actions .btn-inline{
  text-decoration:none;
  padding:6px 10px;
  border:1px solid var(--border-col);
  background:var(--bg-card-alt);
  color:var(--text-main);
  border-radius:999px;     /* pill for the "Open" control */
  font-size:.8rem;
}

/* ===== QR panel ===== */
.qr-box{
  /* same background as panel; white only behind the code itself */
  background:var(--bg-card);
  border:1px solid var(--border-col);
  border-radius:var(--radius);
  padding:12px;
  text-align:center;
}

/* white-only backdrop around the QR */
#qrCanvas{
  display:inline-block;
  background:#fff;
  border-radius:10px;
  padding:10px;
  margin:0 auto 12px;
  max-width:100%;
}
#qrCanvas img, #qrCanvas canvas{
  display:block; height:auto; max-width:100%; margin:0 auto;
}

/* URL below QR — centred and readable */
.qr-url{
  font-size:.85rem; line-height:1.4; margin:10px 0 12px;
  background:#fff; color:#111; text-align:center;
  border:1px solid var(--border-col); border-radius:8px; padding:10px 12px;
  word-break:break-all;
}
.qr-url a{color:inherit; text-decoration:underline}

/* Diagnostics & small text */
#diag{font-size:.75rem; color:var(--text-dim); white-space:pre-wrap; word-break:break-word}
.small-note{font-size:.75rem; color:var(--text-dim); line-height:1.4}

/* Accessibility focus */
:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 65%, transparent); outline-offset:2px; border-radius:8px}

/* === QR actions: make all buttons uniform & full width === */
#qrBox .btn-accent,
#qrBox .btn-outline {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;         /* consistent vertical rhythm */
}

/* keep the QR area centred and spaced the same */
#qrCanvas { margin: 0 auto 12px; }
.qr-url   { margin: 10px 0 12px; }

/* ===== Mobile tweaks ===== */
@media (max-width:540px){
  .page-head-titles h1{font-size:1.1rem}
  .page-head-titles p{font-size:.85rem}
  .btn-accent,.btn-outline{width:100%}
  .row-flex>*{min-width:100%}
}