/* ================================================================
   obiettivi.css — REDESIGN v2.0
   ================================================================ */

   :root {
    --ob-bg:        var(--bg-base, #080b10);
    --ob-panel:     var(--bg-surface, #0d1117);
    --ob-elev:      var(--bg-card, #111722);
    --ob-head:      var(--bg-elevated, #1a2233);
    --ob-row:       var(--bg-surface, #0d1117);
    --ob-text:      var(--text-primary, #f0f4ff);
    --ob-text-dim:  var(--text-secondary, #8b9bbf);
    --ob-border:    var(--border-subtle, rgba(255,255,255,0.06));
    --ob-border-2:  var(--border-soft, rgba(255,255,255,0.10));
    --ob-border-3:  rgba(255,255,255,0.14);
    --ob-accent:    #16a34a;
    --ob-accent-2:  var(--bg-elevated, #1a2233);
    --ob-danger:    #9e2a2a;
    --ob-pill-bg:   var(--bg-elevated, #1a2233);
    --ob-green-soft: rgba(22,163,74,0.10);
    --ob-red-soft:   rgba(220,53,69,0.12);
    --ob-radius-lg: var(--r-xl, 20px);
    --ob-radius-md: var(--r-lg, 14px);
    --ob-radius-sm: var(--r-md, 10px);
    --ob-shadow:    var(--shadow-card, 0 1px 3px rgba(0,0,0,.5), 0 8px 32px rgba(0,0,0,.3));
    --ob-heading-color: var(--text-primary, #f0f4ff);
    --ob-font-sans: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --ob-font-size-100: 11px; --ob-font-size-200: 13px;
    --ob-font-size-300: 15px; --ob-font-size-400: 17px;
    --ob-line-tight: 1.15; --ob-line-base: 1.4;
  }
  
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  
  #obiettiviApp {
    max-width: 960px; margin: 16px auto; padding: 0 12px;
    color: var(--ob-text); font-family: var(--ob-font-sans);
    font-size: var(--ob-font-size-300); line-height: var(--ob-line-base);
    background: transparent;
  }
  
  /* ===== HEADER ===== */
  .ob-head {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 !important; padding: 12px 14px;
    background: var(--ob-head); border: 1px solid var(--ob-border);
    border-radius: 0 !important;
  }
  .ob-head > h2 {
    position: relative; margin: 0; cursor: pointer;
    padding: 4px 22px 4px 8px; font-size: clamp(13px, 1.4vw, 17px);
    font-weight: 800; color: var(--ob-heading-color); font-family: 'Sora', sans-serif;
    border: 1px solid transparent; border-radius: var(--r-md, 10px);
    transition: background .18s, border-color .18s;
  }
  .ob-head > h2::after {
    content: "▾"; position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); font-size: 11px; opacity: .75;
    transition: transform .18s, opacity .18s;
  }
  .ob-head > h2::before {
    content: ""; position: absolute; left: 10px; right: 28px; bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, rgba(249,115,22,.3), rgba(245,158,11,.3), rgba(249,115,22,.1));
    transform: scaleX(0); transform-origin: left; transition: transform .18s;
  }
  .ob-head:hover > h2, .ob-head.is-open > h2 {
    background: rgba(255,255,255,.04); border-color: var(--ob-border-2);
  }
  .ob-head:hover > h2::after, .ob-head.is-open > h2::after { transform: translateY(-50%) rotate(180deg); opacity: 1; }
  .ob-head:hover > h2::before, .ob-head.is-open > h2::before { transform: scaleX(1); }
  
  /* Dropdown */
  .ob-head-actions {
    position: absolute; top: 100% !important; left: 14px; min-width: 230px;
    display: grid; gap: 6px; padding: 10px;
    background: var(--ob-elev) !important;
    border: 1px solid var(--ob-border-2) !important;
    border-radius: var(--r-lg, 14px) !important;
    box-shadow: var(--shadow-modal, 0 24px 80px rgba(0,0,0,.65)) !important;
    z-index: 10; margin-top: 0 !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  .ob-head-actions::before {
    content: ""; position: absolute; left: 0; right: 0; top: -8px;
    height: 8px; pointer-events: auto; background: transparent;
  }
  .ob-head-actions::after { display: none !important; }
  .ob-head-actions .ob-ghost-btn {
    width: 100%; border: none !important; border-radius: var(--r-sm, 6px);
    background: transparent; padding: 9px 12px;
    font-weight: 700; font-size: 13px; line-height: 1; color: var(--ob-text);
    transition: background .15s, transform .12s; font-family: inherit; cursor: pointer;
  }
  .ob-head-actions .ob-ghost-btn:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
  @media (hover: hover) {
    .ob-head:hover .ob-head-actions, .ob-head:focus-within .ob-head-actions {
      opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    }
  }
  @media (hover: none), (pointer: coarse) {
    .ob-head.is-open .ob-head-actions {
      opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    }
  }
  
  /* Plan badge */
  .ob-planBadge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px; font-size: 12px; font-weight: 800; color: #fff;
    white-space: nowrap; border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ob-border-3);
  }
  .ob-planBadge::before { display: none !important; }
  
  /* ===== BUTTONS ===== */
  .ob-ghost-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; font-size: 13px; font-weight: 700;
    color: var(--ob-text); background: transparent;
    border-radius: var(--ob-radius-sm); border: 1px solid var(--ob-border);
    cursor: pointer; opacity: .9;
    transition: border-color .15s, transform .15s, background .2s;
    font-family: inherit;
  }
  .ob-ghost-btn:hover { opacity: 1; border-color: var(--ob-border-3); transform: translateY(-1px); }
  .ob-ghost-btn:focus-visible { outline: 2px solid var(--brand-blue, #3b82f6); outline-offset: 2px; }
  .ob-ghost-btn.hidden { display: none !important; }
  
  .ob-btn {
    background: var(--ob-accent); color: #fff; border: none;
    border-radius: var(--r-md, 10px); padding: 10px 14px;
    cursor: pointer; font-weight: 700; font-size: 13px;
    transition: filter .15s, transform .15s; font-family: inherit;
  }
  .ob-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .ob-btn:active { transform: translateY(0); }
  .ob-btn.outline { background: transparent; border: 1px solid var(--ob-accent-2); color: var(--ob-text); }
  .ob-btn.danger { background: var(--ob-danger); }
  
  /* ===== CARDS ===== */
  .ob-card {
    background: var(--ob-elev); border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg); padding: 14px; margin: 10px 0;
  }
  .ob-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
  .ob-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ob-text); }
  .ob-grid input {
    background: var(--ob-row); border: 1px solid var(--ob-border-2);
    border-radius: var(--r-md, 10px); padding: 9px; color: var(--ob-text);
    font-family: inherit; outline: none; transition: border-color .2s;
  }
  .ob-grid input::placeholder { color: var(--text-muted, #4a5578); }
  .ob-grid input:focus-visible { border-color: rgba(59,130,246,.5); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
  
  /* ===== LISTA ===== */
  .ob-list { display: grid; gap: 8px; }
  .ob-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px; border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-md); background: var(--ob-panel);
    transition: border-color .2s;
  }
  .ob-item:hover { border-color: var(--ob-border-2); }
  .ob-item .meta { font-size: 13px; color: var(--ob-text-dim); }
  .ob-item .meta strong { color: #fff; }
  
  /* progress */
  .ob-mini { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 12px; }
  .ob-mini-bar {
    flex: 1 1 auto; height: 6px; background: var(--bg-elevated, #1a2233);
    border-radius: 999px; overflow: hidden; border: 1px solid var(--ob-border-2);
  }
  .ob-mini-fill { height: 100%; width: 0%; background: var(--ob-accent); border-radius: 999px; transition: width .4s ease; }
  
  /* ===== DETTAGLIO ===== */
  .ob-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
  .ob-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
  .ob-pill {
    background: var(--ob-pill-bg); border: 1px solid var(--ob-border-3);
    padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--ob-text);
  }
  
  /* ===== TABELLA SESSIONI ===== */
  .ob-table-wrap {
    overflow: auto; border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-md); max-height: 60vh; background: var(--ob-panel);
    scrollbar-width: thin; scrollbar-color: var(--bg-elevated, #1a2233) transparent;
  }
  .ob-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
  .ob-table-wrap::-webkit-scrollbar-thumb { background: var(--bg-elevated, #1a2233); border-radius: 4px; }
  .ob-table { width: 100%; border-collapse: collapse; min-width: 680px; color: var(--ob-text); }
  .ob-table thead th {
    background: var(--ob-head); text-align: left; padding: 10px;
    font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--ob-border-2);
    position: sticky; top: 0; z-index: 1; color: var(--text-muted, #4a5578);
  }
  .ob-table td { padding: 8px 10px; border-bottom: 1px solid var(--ob-border); font-size: 13px; }
  .ob-table input[type="number"], .ob-table input[type="text"],
  .ob-table input[type="date"], .ob-table input[type="datetime-local"] {
    width: 100%; box-sizing: border-box;
    background: var(--ob-row); border: 1px solid var(--ob-border-2);
    color: var(--ob-text); border-radius: 7px; padding: 7px; font-size: 13px;
    font-family: inherit; outline: none;
  }
  .ob-table input:focus-visible { border-color: rgba(59,130,246,.5); }
  .ob-row.win  { background: var(--ob-green-soft); }
  .ob-row.lose { background: var(--ob-red-soft); }
  
  /* ===== GATING ===== */
  .ob-gate {
    background: var(--ob-panel); border: 1px dashed var(--ob-border-2);
    border-radius: var(--ob-radius-md); padding: 14px; margin: 10px 0;
  }
  
  .hidden { display: none !important; }
  
  /* ===== MODALI OBIETTIVI ===== */
  .ob-modal.hidden { display: none; }
  .ob-modal { position: fixed; inset: 0; z-index: 1000; }
  .ob-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
  .ob-modal__dialog {
    position: relative; max-width: 540px; width: min(92vw, 540px);
    margin: 8vh auto 0 auto;
    background: var(--ob-elev); color: var(--ob-text);
    border: 1px solid var(--ob-border-2); border-radius: var(--r-lg, 14px);
    box-shadow: var(--shadow-modal, 0 24px 80px rgba(0,0,0,.65));
    padding: 16px; z-index: 1;
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin;
  }
  .ob-modal__title { margin: 0 0 4px; font-size: 1.1rem; font-family: 'Sora', sans-serif; font-weight: 800; }
  .ob-modal__close {
    position: absolute; top: 10px; right: 12px;
    border: 0; background: var(--bg-elevated, #1a2233); color: var(--ob-text);
    font-size: 18px; line-height: 1; cursor: pointer;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all .2s;
  }
  .ob-modal__close:hover { background: var(--bg-card-hover, #161d2a); }
  .ob-modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
  .ob-form .ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ob-form .ob-grid label { color: var(--ob-text); }
  
  /* ===== RESPONSIVE ===== */
  @media (max-width: 860px) { .ob-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 680px) { .ob-form .ob-grid { grid-template-columns: 1fr; } }
  @media (max-width: 620px) {
    .ob-table input[type="number"] { max-width: 100px; }
    .ob-table input[type="text"] { max-width: 150px; }
    .ob-table input[type="date"], .ob-table input[type="datetime-local"] { max-width: 130px; }
    .ob-table td { padding: 6px 7px; }
    .ob-table thead th { padding: 8px; }
  }
  @media (max-width: 520px) {
    .ob-grid { grid-template-columns: 1fr; }
    .ob-modal__dialog { margin-top: 6vh; padding: 12px; }
    .ob-form .ob-grid { gap: 8px; }
    .ob-form .ob-grid label {
      display: grid; grid-template-columns: minmax(80px, 34%) 1fr;
      align-items: center; gap: 8px; font-size: .9rem;
    }
    .ob-ghost-btn { padding: 6px 8px; font-size: .9rem; }
    .ob-item { padding: 9px; gap: 7px; flex-wrap: wrap; }
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  }
  @media (max-width: 480px) {
    .ob-table th:nth-child(5), .ob-table td:nth-child(5) { display: none; }
    .ob-table th:nth-child(3), .ob-table td:nth-child(3) { display: none; }
    .ob-table td:first-child { width: 34px; }
  }
  @media (min-width: 1024px) {
    #obListModal .ob-modal__dialog { max-width: 1280px !important; width: min(96vw, 1280px); }
    #obCreateModal .ob-modal__dialog { max-width: 700px; width: min(92vw, 700px); }
    .ob-table { min-width: unset; }
    .ob-table thead th { padding: 11px; }
    .ob-table td { padding: 10px 11px; }
  }
  @media (min-width: 1440px) {
    #obListModal .ob-modal__dialog { max-width: 1400px !important; width: min(95vw, 1400px); }
  }