/* ---------------------------------------------------------------
   Monitor Opere Pubbliche - modulo pubblico incorporabile.
   Tema chiaro fisso: dentro un iframe di terzi non seguiamo il
   tema del sistema, per non stonare con la pagina che ci ospita.
---------------------------------------------------------------- */
:root{
    --mo-primary:#2f6fed;
    --mo-primary-dark:#1f4fb8;
    --mo-bg:#f5f7fa;
    --mo-border:#e1e5eb;
    --mo-text:#2b2f36;
    --mo-muted:#6b7280;
    --mo-soft:#eef3ff;
    --mo-sel:#f59e0b;
}
*{ box-sizing:border-box; }
html, body{
    margin:0; padding:0; height:100%;
    font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color:var(--mo-text);
    background:var(--mo-bg);
}
[hidden]{ display:none !important; }

.mo-wrapper{
    display:flex; flex-direction:column;
    height:100%; min-height:600px;
    border:1px solid var(--mo-border);
    overflow:hidden;
}

/* ---------- Barra titolo e legenda ---------- */
.mo-topbar{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px; background:#fff; border-bottom:1px solid var(--mo-border);
}
.mo-heading{ min-width:0; flex:1 1 auto; }
.mo-topbar h1{ font-size:16px; margin:0; font-weight:700; overflow-wrap:anywhere; }
.mo-topbar .mo-sub{
    font-size:12px; color:var(--mo-muted); margin-top:2px; overflow-wrap:anywhere;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mo-legend{ display:flex; gap:14px; font-size:12px; color:var(--mo-muted); flex-wrap:wrap; justify-content:flex-end; }
.mo-legend span{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.mo-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.mo-dot.area{ border-radius:2px; opacity:.85; }

/* ---------- Ricerca e filtri per tipo ---------- */
.mo-toolbar{
    flex:0 0 auto;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:10px 16px; background:#fff; border-bottom:1px solid var(--mo-border);
}
.mo-search{ position:relative; flex:1 1 240px; max-width:340px; display:flex; align-items:center; }
.mo-search-icon{ position:absolute; left:10px; font-size:13px; opacity:.6; pointer-events:none; }
#mo-search-input{
    width:100%; padding:7px 30px; border:1px solid var(--mo-border); border-radius:20px;
    font:inherit; font-size:13px; outline:none; background:var(--mo-bg); color:var(--mo-text);
    -webkit-appearance:none; appearance:none;
}
#mo-search-input::-webkit-search-cancel-button{ display:none; }
#mo-search-input:focus{ border-color:var(--mo-primary); background:#fff; }
.mo-search-clear{
    position:absolute; right:6px; border:none; background:transparent; cursor:pointer;
    font-size:12px; color:var(--mo-muted); padding:4px 6px; line-height:1;
}
.mo-search-clear:hover{ color:var(--mo-text); }
.mo-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.mo-chip{
    border:1px solid var(--mo-border); background:#fff; color:var(--mo-text);
    font:inherit; font-size:12.5px; padding:6px 12px; border-radius:20px;
    cursor:pointer; white-space:nowrap; transition:all .15s ease;
}
.mo-chip:hover{ border-color:var(--mo-primary); }
.mo-chip.active{ background:var(--mo-primary); border-color:var(--mo-primary); color:#fff; font-weight:600; }

/* ---------- Corpo: mappa + pannello laterale ---------- */
.mo-body{ flex:1 1 auto; display:flex; min-height:0; }
#mo-map{ flex:1 1 auto; min-width:0; }

.mo-aside{
    flex:0 0 340px; width:340px;
    display:flex; flex-direction:column; min-height:0;
    border-left:1px solid var(--mo-border); background:#fff;
}
.mo-aside h2{
    margin:0 0 8px; font-size:12px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--mo-muted); font-weight:600;
}
.mo-list-box{ flex:0 1 38%; min-height:120px; overflow-y:auto; padding:12px 14px 6px; border-bottom:1px solid var(--mo-border); }
.mo-info-box{ flex:1 1 62%; min-height:0; overflow-y:auto; padding:14px; }
.mo-count{ margin:-4px 0 8px; color:var(--mo-muted); font-size:12px; }
.mo-hint{ color:var(--mo-muted); font-size:13px; margin:0 0 8px; }

.mo-item{
    display:block; width:100%; text-align:left; background:none; color:inherit;
    border:1px solid var(--mo-border); border-radius:8px; padding:8px 10px; margin-bottom:6px;
    cursor:pointer; font:inherit;
}
.mo-item:hover, .mo-item.on{ background:var(--mo-soft); border-color:var(--mo-primary); }
.mo-item.on{ border-color:var(--mo-sel); }
.mo-item.fuori{ opacity:.45; }
.mo-item strong{ display:flex; align-items:center; gap:6px; font-size:13.5px; }
.mo-item small{ display:block; color:var(--mo-muted); font-size:11.5px; margin-top:2px; }

/* ---------- Scheda dettaglio ---------- */
.mo-detail-head{ display:flex; align-items:flex-start; gap:8px; }
.mo-detail-head h3{ margin:0; font-size:16px; flex:1; }
.mo-x{ background:none; border:0; color:var(--mo-muted); font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
.mo-x:hover{ color:var(--mo-text); }
.mo-badges{ margin:6px 0 4px; display:flex; flex-wrap:wrap; gap:6px; }
.mo-badge{ font-size:11px; padding:2px 9px; border-radius:20px; background:var(--mo-soft); color:var(--mo-primary-dark); }
.mo-desc{ margin:6px 0 0; font-size:13px; line-height:1.45; }
.mo-dl{ display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:10px 0 0; font-size:13px; }
.mo-dl dt{ color:var(--mo-muted); }
.mo-dl dd{ margin:0; }
.mo-recent{ margin-top:14px; padding-top:12px; border-top:1px solid var(--mo-border); }

/* ---------- Elenchi documenti ---------- */
.mo-docs a{
    display:flex; gap:8px; align-items:center; padding:7px 10px;
    border:1px solid var(--mo-border); border-radius:8px; margin-bottom:6px;
    color:var(--mo-primary); text-decoration:none; font-size:13px;
}
.mo-docs a:hover{ background:var(--mo-soft); }
.mo-docs a b{ font-weight:500; color:var(--mo-text); }
.mo-docs a small{ display:block; color:var(--mo-muted); font-size:12px; }
.mo-docs a .mo-fmt{ margin-left:auto; color:var(--mo-muted); font-size:12px; }
.mo-more{
    display:inline-block; margin-top:4px; background:none; border:0; padding:4px 0;
    color:var(--mo-primary); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline;
}

/* ---------- Segnaposto su mappa ---------- */
.mo-pin{ background:transparent; border:0; }
.mo-pin-body{
    width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,.4); border:2px solid #fff;
}
.mo-pin-body span{ transform:rotate(45deg); font-size:14px; }
.mo-pin.is-sel .mo-pin-body{ border-color:var(--mo-sel); box-shadow:0 0 0 3px rgba(245,158,11,.55), 0 1px 4px rgba(0,0,0,.4); }

/* ---------- Modale documenti ---------- */
#mo-modal{
    width:min(720px, 94vw); max-height:88%; padding:0;
    border:1px solid var(--mo-border); border-radius:12px; background:#fff; color:var(--mo-text);
}
#mo-modal[open]{ display:flex; flex-direction:column; }
#mo-modal::backdrop{ background:rgba(0,0,0,.5); }
.mo-mh{ display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid var(--mo-border); }
.mo-mh h2{ margin:0; font-size:17px; }
.mo-mh button{ margin-left:auto; background:none; border:0; color:var(--mo-muted); font-size:24px; cursor:pointer; line-height:1; }
.mo-filters{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px; }
.mo-filters input, .mo-filters select{
    padding:8px 10px; border:1px solid var(--mo-border); border-radius:8px;
    background:#fff; color:inherit; font:inherit; font-size:13px; max-width:100%;
}
.mo-filters input{ flex:1 1 220px; }
#mo-results-info{ padding:0 18px 4px; color:var(--mo-muted); font-size:13px; }
#mo-results{ padding:8px 18px 14px; overflow-y:auto; flex:1 1 auto; min-height:80px; }
.mo-pager{ display:flex; align-items:center; gap:10px; padding:10px 18px; border-top:1px solid var(--mo-border); }
.mo-pager button{
    padding:6px 12px; border:1px solid var(--mo-border); border-radius:8px; background:none;
    color:var(--mo-primary); font:inherit; font-size:13px; cursor:pointer;
}
.mo-pager button:disabled{ color:var(--mo-muted); cursor:default; opacity:.5; }
.mo-pager span{ color:var(--mo-muted); font-size:13px; flex:1; text-align:center; }

/* ---------- Schermi stretti (frame stretto o telefono) ---------- */
@media (max-width:760px){
    .mo-legend{ display:none; }
    .mo-toolbar{ gap:8px; padding:8px 12px; }
    .mo-search{ flex:1 1 100%; max-width:none; }
    .mo-chips{ flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:2px; }
    .mo-body{ flex-direction:column; }
    #mo-map{ flex:0 0 52%; }
    .mo-aside{ flex:1 1 auto; width:auto; border-left:0; border-top:1px solid var(--mo-border); }
    .mo-list-box{ flex:0 0 auto; max-height:130px; }
}

/* ---------- Barra "Chiedi documenti" sotto la mappa ---------- */
.mo-footer{
    flex:0 0 auto;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:8px 16px; background:#fff; border-top:1px solid var(--mo-border);
    font-size:13px; color:var(--mo-muted);
}
.mo-footer .mo-more{ margin:0; }
.mo-btn{
    border:0; border-radius:8px; padding:8px 14px; cursor:pointer;
    background:var(--mo-primary); color:#fff; font:inherit; font-size:13px; font-weight:600;
}
.mo-btn:hover{ background:var(--mo-primary-dark); }
.mo-btn:disabled{ opacity:.6; cursor:default; }

/* ---------- Modale richiesta documenti ---------- */
#mo-req{
    width:min(640px, 94vw); max-height:92%; padding:0;
    border:1px solid var(--mo-border); border-radius:12px; background:#fff; color:var(--mo-text);
}
#mo-req[open]{ display:flex; flex-direction:column; }
#mo-req::backdrop{ background:rgba(0,0,0,.5); }
.mo-tabs{ display:flex; gap:4px; padding:0 18px; border-bottom:1px solid var(--mo-border); }
.mo-tabs button{
    border:0; background:none; padding:10px 12px; font:inherit; font-size:13.5px; cursor:pointer;
    color:var(--mo-muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.mo-tabs button.on{ color:var(--mo-primary-dark); border-bottom-color:var(--mo-primary); font-weight:600; }
.mo-req-body{ overflow-y:auto; padding:14px 18px 18px; flex:1 1 auto; min-height:0; }

.mo-note{
    margin:0 0 14px; padding:10px 12px; border-radius:8px; background:var(--mo-soft);
    font-size:12.5px; line-height:1.45; color:var(--mo-text);
}
.mo-form .mo-field{ margin-bottom:12px; }
.mo-form label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; }
.mo-form input[type=text], .mo-form input[type=email], .mo-form select, .mo-form textarea{
    width:100%; padding:8px 10px; border:1px solid var(--mo-border); border-radius:8px;
    font:inherit; font-size:13.5px; color:inherit; background:#fff;
}
.mo-form textarea{ resize:vertical; }
.mo-form input:focus, .mo-form select:focus, .mo-form textarea:focus{ outline:none; border-color:var(--mo-primary); }
.mo-form .mo-hint{ display:block; margin:4px 0 0; font-size:12px; }
.mo-opt{ font-weight:400; color:var(--mo-muted); }
.mo-ferr{ display:block; color:#b91c1c; font-size:12px; margin-top:3px; }
.mo-ferr:empty{ display:none; }
.mo-newbox{ border:1px solid var(--mo-border); border-radius:8px; padding:10px 12px 2px; margin:0 0 12px; }
.mo-newbox legend{ font-size:12.5px; font-weight:600; padding:0 4px; }
.mo-r-map{ height:220px; border:1px solid var(--mo-border); border-radius:8px; }
.mo-consent{ display:flex !important; gap:8px; align-items:flex-start; font-weight:400 !important; font-size:12.5px !important; line-height:1.4; }
.mo-consent input{ margin-top:2px; flex:0 0 auto; }
/* campo trappola: fuori schermo, non display:none (alcuni bot lo riconoscono) */
.mo-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.mo-alert{ margin:10px 0 0; padding:9px 12px; border-radius:8px; background:#fef2f2; color:#991b1b; font-size:13px; }
.mo-form-actions{ margin-top:14px; display:flex; justify-content:flex-end; }

.mo-done{ text-align:center; padding:10px 0; }
.mo-done h3{ margin:0 0 8px; font-size:18px; }
.mo-done p{ margin:0 0 8px; font-size:13.5px; }
.mo-done-icon{ font-size:30px; }
.mo-code{
    font-family:ui-monospace, Menlo, Consolas, monospace; font-size:22px !important; font-weight:700;
    letter-spacing:.06em; user-select:all; background:var(--mo-soft); display:inline-block;
    padding:6px 14px; border-radius:8px;
}
.mo-check-form{ display:flex; gap:8px; align-items:flex-end; }
.mo-check-form .mo-field{ flex:1; margin:0; }
#mo-check-code{ text-transform:uppercase; font-family:ui-monospace, Menlo, Consolas, monospace; }
#mo-check-result{ margin-top:14px; }
.mo-status{ border:1px solid var(--mo-border); border-radius:8px; padding:12px 14px; }
.mo-status-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.mo-code-sm{ font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:700; }
.mo-st-fulfilled .mo-badge{ background:#dcfce7; color:#166534; }
.mo-st-rejected .mo-badge{ background:#fee2e2; color:#991b1b; }
.mo-status h4{ margin:12px 0 6px; font-size:13px; }
.mo-pre{ white-space:pre-wrap; overflow-wrap:anywhere; }

@media (max-width:760px){
    .mo-footer{ padding:6px 12px; gap:8px; }
    .mo-footer > span{ display:none; }
    #mo-req{ width:calc(100vw - 16px); max-height:calc(100% - 16px); }
    .mo-check-form{ flex-direction:column; align-items:stretch; }
}