body { font-family: 'IBM Plex Sans', sans-serif; }
.font-heading { font-family: 'Outfit', sans-serif; }
::selection { background: rgba(4,120,87,.18); }
@keyframes drawerIn { from { opacity:0; transform: translateY(-4px);} to {opacity:1; transform: translateY(0);} }
.animate-drawer-in { animation: drawerIn .25s ease-out; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.pill-wrap:hover .doc-preview { display:block; }

/* ---- Header (preview: clienti-task-daily) ---- */
.hdr { background: linear-gradient(90deg,#06543f 0%,#0a6a57 30%,#0d7377 52%,#155670 80%,#1b3e62 100%); position: sticky; top:0; z-index:1040; overflow: visible; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.hdr-inner { max-width:1920px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; gap:.75rem; height:64px; overflow: visible; position: relative; }
.logo { height:44px; width:auto; user-select:none; }
.menus { display:flex; align-items:center; gap:.15rem; flex:1; overflow: visible; }
.right { display:flex; align-items:center; gap:.5rem; margin-left:auto; position: relative; z-index: 2; }
.ic { width:1rem; height:1rem; display:inline-block; vertical-align:middle; }
.hdr .menu { position:relative; }
.menu-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.9); padding:.5rem .75rem; border-radius:.375rem; background:transparent; border:0; cursor:pointer; white-space:nowrap; text-decoration:none; }
.menu-btn:hover { color:#fff; background:rgba(255,255,255,.1); }
.menu-btn i, .menu-btn .ic, .menu-btn svg { width:1rem; height:1rem; pointer-events: none; }
.chev { width:.85rem; height:.85rem; opacity:.7; pointer-events: none; }
.hdr .menu-panel { display:none; position:absolute; top:calc(100% + 2px); left:0; min-width:15rem; background:#fff; border:1px solid #e2e8f0; border-radius:.5rem; box-shadow:0 10px 25px rgba(15,23,42,.18); padding:.35rem; z-index:5000; }
.hdr .menu-panel.right { left:auto; right:0; }
.hdr .menu-panel::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.hdr .menu.is-open > .menu-panel { display:block; }
.mi { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; font-size:.875rem; color:#334155; border-radius:.375rem; cursor:pointer; white-space:nowrap; text-decoration:none; width:100%; background:transparent; border:0; font-family:inherit; text-align:left; }
.mi:hover { background:#f1f5f9; color:#334155; }
.mi-sub { position:relative; }
.mi-sub > .mi .chev { margin-left:auto; opacity:.55; width:.85rem; height:.85rem; }
.hdr .mi-sub > .menu-panel { top:0; left:auto; right:calc(100% + 4px); display:none; }
.hdr .mi-sub.is-open > .menu-panel { display:block; }
@media (min-width: 1200px) and (hover: hover) {
  .hdr .menu:hover > .menu-panel,
  .hdr .menu:focus-within > .menu-panel,
  .hdr .mi-sub:hover > .menu-panel,
  .hdr .mi-sub:focus-within > .menu-panel { display:block; }
}
.mi-ic { color:#059669; display:inline-flex; }
.mi-ic i, .mi-ic .ic, .mi-ic svg { width:1rem; height:1rem; pointer-events: none; }
.mi.danger, .mi.danger .mi-ic { color:#e11d48; font-weight:500; }
.sep { height:1px; background:#e2e8f0; margin:.35rem .25rem; }
.task-active { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; color:#fff; background:rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); padding:.5rem .75rem; border-radius:.375rem; white-space:nowrap; text-decoration:none; margin-left:.25rem; border:0; cursor:pointer; font-family: inherit; }
.task-active:hover { color:#fff; }
.nuovo-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:600; color:#065f46; background:#fff; padding:.5rem .9rem; border-radius:.375rem; box-shadow:0 1px 2px rgba(0,0,0,.1); border:0; cursor:pointer; font-family: inherit; }
.nuovo-btn:hover { background:#ecfdf5; }
.bell { position:relative; color:rgba(255,255,255,.9); background:transparent; border:0; padding:.5rem; border-radius:.375rem; cursor:pointer; }
.bell:hover { background:rgba(255,255,255,.1); color:#fff; }
.bell svg, .gear svg { pointer-events: none; }
.bell .badge { position:absolute; top:-2px; right:-2px; font-size:9px; font-weight:700; background:#f43f5e; color:#fff; border-radius:9999px; padding:0 4px; line-height:1.3; }
.user { color:#fff; font-weight:600; font-size:.875rem; letter-spacing:.03em; }
.gear { display:inline-flex; align-items:center; gap:.15rem; color:rgba(255,255,255,.9); background:transparent; border:0; padding:.5rem; border-radius:.375rem; cursor:pointer; }
.gear:hover { background:rgba(255,255,255,.1); color:#fff; }
.hdr-toggle { align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); border-radius:.375rem; color:#fff; display:none; height:38px; justify-content:center; width:40px; cursor:pointer; }
.hdr .dropdown-menu { z-index: 5000 !important; }

.tm-page-wrap { max-width:1920px; margin:0 auto; padding:1.5rem 2rem 2.5rem; position: relative; min-width: 0; width: 100%; }
body.normal_body.tm-preview-body { background:#f8fafc !important; }

@media (max-width: 1199px) {
  .hdr { height:auto; }
  .hdr-inner { flex-wrap:wrap; height:auto; padding:.65rem 1rem; }
  .hdr-toggle { display:inline-flex; }
  .logo { height:36px; }
  .menus { display:none; flex:0 0 100%; flex-direction:column; align-items:stretch; gap:2px; padding:.35rem 0 .5rem; overflow: visible; }
  .menus.is-open { display:flex; }
  .menu-btn, .task-active { width:100%; }
  .hdr .menu-panel { position:static; display:none; margin:0 0 .35rem; box-shadow:none; }
  .hdr .menu.is-open > .menu-panel { display:block; }
  .hdr .mi-sub > .menu-panel { position:static; margin:0 0 .25rem .75rem; box-shadow:none; right:auto; }
  .hdr .hdr-inner > .right,
  .hdr .hdr-inner > .right > .menu { position:static; }
  .hdr .hdr-inner > .right > .menu > .menu-panel {
    position:absolute;
    top:100%;
    left:auto;
    right:.5rem;
    width: min(320px, calc(100vw - 1rem));
    min-width:0;
    max-height:70vh;
    overflow-y:auto;
    margin:0;
    box-shadow:0 10px 25px rgba(15,23,42,.18);
  }
  .hdr .menus {
    position:absolute;
    top:100%;
    left:.5rem;
    right:.5rem;
    max-height:70vh;
    overflow-y:auto;
    padding:.5rem;
    background:#06543f;
    border-radius:0 0 .5rem .5rem;
    box-shadow:0 10px 25px rgba(15,23,42,.18);
    z-index:5000;
  }
  .right { margin-left:auto; }
  .user { display:none; }
  .tm-page-wrap { padding:1.25rem 1rem 2rem; }
}

/* Keep the mobile logo, menu toggle and account actions on one row. */
@media (max-width: 575.98px) {
  .hdr .hdr-inner {
    display:grid;
    grid-template-columns:auto auto minmax(0, 1fr);
    gap:.5rem;
    padding:.65rem .5rem;
  }
  .hdr .hdr-inner > a { grid-column:1; grid-row:1; }
  .hdr .hdr-toggle { grid-column:2; grid-row:1; }
  .hdr .hdr-inner > .right {
    grid-column:3;
    grid-row:1;
    justify-self:end;
    gap:.25rem;
    margin-left:0;
  }
  .hdr .nuovo-btn { gap:.25rem; padding:.5rem; white-space:nowrap; }
  .hdr .nuovo-btn > svg { width:18px; height:18px; }
  .hdr .nuovo-btn > .chev { width:12px; height:12px; }
  .hdr .bell, .hdr .gear { padding:.5rem .25rem; }
  .hdr .menus, .hdr .new-navbar-search { grid-column:1 / -1; }
}