/* =========================================================
   MyTime UI – foglio di stile completo
   - Reset leggero
   - Card & layout
   - Bottoni & input
   - Liste & testo
   - Sidebar categorie
   - Calendario
   - Missioni
   - Allegati
   - Modal
   - Bottom bar (mobile) con evidenza pagina attiva
   - Responsive
   ========================================================= */

/* ========== RESET LEGGERO ========== */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; max-width:100%; overflow-x:hidden; }
body {
  color:#0f172a;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#f8fafc;
}

/* ========== CARD & LAYOUT ========== */
.mytime-page,
.rmw-time-calendar { max-width:1100px; margin:18px auto; padding:0 16px; }

.rmw-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  max-width:100%;
}
.rmw-hd{
  position:sticky; top:0; z-index:5;
  padding:12px 14px;
  border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between;
  background:#ffffff; gap:8px; flex-wrap:wrap;
}
.rmw-bd{ padding:14px; }
.rmw-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:861px){
  .rmw-grid{ grid-template-columns:280px 1fr; gap:18px; }
}

/* ========== BOTTONI & INPUT ========== */
.rmw-btn{
  padding:.7rem .9rem; border-radius:12px; border:1px solid #cbd5e1;
  background:#f8fafc; color:#0f172a; cursor:pointer;
  min-height:36px; font-size:14px; min-width:0;
  transition:background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.rmw-btn:hover{ background:#eef2f7; }
.rmw-btn:focus{ outline:2px solid #bfdbfe; outline-offset:2px; }
.rmw-btn:active{ transform:translateY(1px); }

.rmw-btn.primary{ background:#3b82f6; border-color:#3b82f6; color:#fff; }
.rmw-btn.primary:hover{ background:#2563eb; }
.rmw-btn.danger{ background:#ef4444; border-color:#ef4444; color:#fff; }

.rmw-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc;
  color:#1f2937; font-size:12px;
}

.rmw-label{ font-size:13px; color:#111827; display:block; margin:8px 0 6px; font-weight:600; }

.rmw-input,.rmw-select,.rmw-textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid #e5e7eb;
  background:#ffffff; color:#0f172a; font-size:16px;
}
.rmw-input:focus,.rmw-select:focus,.rmw-textarea:focus{
  outline:2px solid #bfdbfe; border-color:#93c5fd;
}
.rmw-textarea{ min-height:96px; }

/* ========== LISTE & TESTO ========== */
.rmw-list{ list-style:none; margin:0; padding:0; }
.rmw-empty{ padding:12px; color:#334155; }

/* ========== SIDEBAR CATEGORIE ========== */
.rmw-cat{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid #e5e7eb; border-radius:12px; background:#ffffff; margin-bottom:8px;
}
.rmw-cat .dot{ width:12px; height:12px; border-radius:999px; border:1px solid #e5e7eb; flex:0 0 12px; }
.rmw-cat .nm{ font-size:15px; font-weight:600; color:#111827; }
.rmw-spacer{ flex:1; }
.rmw-iconbtn{
  border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; transition:background-color .12s ease;
}
.rmw-iconbtn:hover{ background:#f1f5f9; }
.rmw-icon svg{ width:18px; height:18px; display:block; color:#0f172a; }

/* ========== CALENDARIO ========== */
.rmw-wd{ font-size:12px; color:#334155; text-align:center; padding:4px 0; font-weight:700; }
.rmw-calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.rmw-cell{
  border:1px solid #e5e7eb; border-radius:12px; padding:8px; min-height:72px; background:#f8fafc;
}
.rmw-cell .d{ font-size:12px; color:#334155; }
.rmw-cell .b{ margin-top:6px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.rmw-tag{
  font-size:10.5px; border-radius:8px; padding:2px 6px; background:#e2e8f0; color:#0f172a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.rmw-note-dot{
  display:inline-block; width:6px; height:6px; border-radius:999px; background:#f59e0b; margin-left:6px; vertical-align:middle;
}
.rmw-note-tag{
  font-size:10.5px; border-radius:8px; padding:2px 6px; background:#fef3c7; color:#7c2d12;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.rmw-cell.rmw-today .d { color:#ef4444 !important; font-weight:700; }

/* ========== MISSIONI ========== */
.rmw-mission{
  padding:12px; border:1px solid #e5e7eb; border-radius:14px; margin-bottom:10px; background:#ffffff; overflow:hidden;
}
.rmw-mission *{ min-width:0; }
.rmw-tools{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.rmw-tools .rmw-btn{ flex:1 1 140px; }
.rmw-progress{
  margin-left:6px; font-size:12px; color:#334155; background:#e5e7eb;
  border-radius:999px; padding:2px 8px; display:inline-block;
}
.rmw-dot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; border:1px solid #e5e7eb; vertical-align:baseline; }
.rmw-checkrow{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; }
.rmw-checktext{
  flex:1; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  line-height:1.35; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  min-height:40px; max-width:100%;
}
.rmw-miniiconbtn{
  border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; transition:background-color .12s ease;
}
.rmw-miniiconbtn:hover{ background:#f1f5f9; }
.rmw-miniicon svg{ width:16px; height:16px; display:block; }

/* checkbox rotondo “done” */
.rmw-done.rmw-circle{
  -webkit-appearance:none; appearance:none; position:relative;
  width:20px; height:20px; border-radius:999px;
  border:2px solid #94a3b8; background:transparent; cursor:pointer; flex:0 0 20px; margin-top:2px; outline:none;
}
.rmw-done.rmw-circle:focus{ box-shadow:0 0 0 2px #bfdbfe; }
.rmw-done.rmw-circle:checked{ border-color:#22c55e; }
.rmw-done.rmw-circle:checked::before{ content:""; position:absolute; inset:0; background:#22c55e; border-radius:999px; }
.rmw-done.rmw-circle:checked::after{ content:"✓"; position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); font-size:14px; line-height:1; font-weight:700; color:#fff; }

/* ========== ALLEGATI ========== */
.rmw-attach{ margin-top:10px; max-width:100%; }
.rmw-attach-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; max-width:100%; }
.rmw-attach-chip{
  display:flex; align-items:center; gap:6px; border:1px solid #e5e7eb; background:#f8fafc;
  border-radius:999px; padding:6px 10px; font-size:13px; max-width:100%;
}
.rmw-attach-chip a{
  color:#0f172a; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:160px; word-break:break-all;
}
.rmw-attach-chip button{
  border:0; background:#ef4444; color:#fff; border-radius:8px; padding:2px 6px; cursor:pointer;
}
.rmw-filebtn{ position:relative; display:inline-block; margin-top:8px; cursor:pointer; }
.rmw-filebtn .rmw-file{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:999px; -webkit-appearance:none; appearance:none;
}

/* ========== MODAL ========== */
.rmw-modal-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:50; display:none;
}
.rmw-modal, .rmw-modal * { box-sizing:border-box; }
.rmw-modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px, 100vw); max-width:100vw; max-height:calc(100vh - 16px);
  background:#fff; border-radius:14px; border:1px solid #e5e7eb;
  box-shadow:0 16px 32px rgba(0,0,0,.15); z-index:51; display:none;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.rmw-modal .rmw-hdm{
  position:sticky; top:0; background:#fff; z-index:1;
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #e5e7eb;
}
.rmw-modal .rmw-bdm{ padding:16px; overflow-wrap:anywhere; word-break:break-word; }
.rmw-modal p{ margin:0 0 10px 0; line-height:1.4; }
.rmw-modal-close{ border:0; background:#f1f5f9; border-radius:10px; padding:.5rem .7rem; cursor:pointer; }
.rmw-ios .rmw-modal{
  transform:none !important; left:0 !important; right:0 !important; top:0 !important; margin:0 auto !important;
}

/* ========== BOTTOM BAR (MOBILE) ========== */
.rmw-bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:space-around; align-items:center;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  padding-bottom: calc(8px + constant(safe-area-inset-bottom)); /* fallback iOS vecchi */
  background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -6px 18px rgba(0,0,0,.06);
}

/* bottone */
.rmw-bottom-bar .rmw-bbtn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 10px; border-radius:12px; min-width:54px; text-decoration:none; color:inherit;
  transition:background-color .12s ease, transform .12s ease, opacity .12s ease;
}

/* icone COLORATE di base nel markup (sprite/inline) → le desaturiamo quando NON attive */
.rmw-bottom-bar .rmw-bbtn .ico{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.rmw-bottom-bar .rmw-bbtn .ico svg{
  width:22px; height:22px; display:block;
  filter: grayscale(1) saturate(.2);   /* NON attivo → B/N */
  opacity:.7;                           /* leggermente attenuata */
  transition: filter .18s ease, opacity .18s ease;
}

/* label */
.rmw-bottom-bar .lbl{ font-size:11px; color:#64748b; line-height:1; }

/* Hover (solo non attivi) */
.rmw-bottom-bar .rmw-bbtn:not(.active):not([aria-current="page"]):hover{
  background:#f8fafc;
}
.rmw-bottom-bar .rmw-bbtn:not(.active):not([aria-current="page"]):hover .ico svg{
  filter: grayscale(.6) saturate(.6);
  opacity:.9;
}

/* ===== Stato ATTIVO: a colori + evidenza ===== */
.rmw-bottom-bar .rmw-bbtn.active,
.rmw-bottom-bar .rmw-bbtn[aria-current="page"]{
  background:#f0f7ff; border:1px solid #bfdbfe; transform:translateY(-1px);
}
.rmw-bottom-bar .rmw-bbtn.active .ico svg,
.rmw-bottom-bar .rmw-bbtn[aria-current="page"] .ico svg{
  filter:none;           /* torna a colori */
  opacity:1;
}
.rmw-bottom-bar .rmw-bbtn.active .lbl,
.rmw-bottom-bar .rmw-bbtn[aria-current="page"] .lbl{
  color:#0f172a; font-weight:600;
}
.rmw-bottom-bar .rmw-bbtn.active::after,
.rmw-bottom-bar .rmw-bbtn[aria-current="page"]::after{
  content:""; display:block; width:24px; height:3px; border-radius:999px; background:#2563eb; margin-top:4px;
}

/* Spazio di sicurezza sotto ai contenuti */
.rmw-bottom-pad{
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: calc(64px + constant(safe-area-inset-bottom)); /* fallback */
}

/* ========== RESPONSIVE ========== */
@media (max-width:560px){
  .rmw-tools{ gap:6px; }
  .rmw-tools .rmw-btn{ flex:1 1 100%; min-width:0; }
  .rmw-attach-chip a{ max-width:120px; }
  .rmw-checkrow{ gap:6px; }
  .rmw-miniiconbtn{ width:22px; height:22px; }
  .rmw-miniicon svg{ width:13px; height:13px; }
  .rmw-modal{
    position:fixed; left:0; right:0; top:0; transform:none;
    width:100vw; max-width:100vw; max-height:calc(100vh - 12px);
    margin:0 auto; border-radius:12px; overflow-x:hidden;
  }
  .rmw-modal .rmw-bdm{ padding:14px; }
}

@media (min-width:561px){
  /* su desktop mostri il “calendario pieno” quando esiste */
  #view-time { display:none !important; }
  #view-calendar { display:block !important; }
}