:root {
      --space-12: 12px;
      --space-16: 16px;
      --space-24: 24px;
      --bg: #020617;
      --sidebar: #020617;
      --card: #0b1120;
      --accent: #22c55e;
      --accent-soft: rgba(34, 197, 94, 0.15);
      --text: #e5e7eb;
      --muted: #9ca3af;
      --danger: #ef4444;
      --date-input-w: 160px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: radial-gradient(circle at top left, #1e293b, #020617);
      color: var(--text);
    }
    .app {
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: 100vh;
    }
    .sidebar {
      background: var(--sidebar);
      border-right: 1px solid rgba(148,163,184,0.35);
      padding: 20px 14px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .sidebar-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-12);
      padding: 22px 10px;
    }
    .sidebar-logo-img{
      height: 100px;
      width: auto;
      display: block;
    }

    /* USD cards can show an approx EUR conversion badge */
    .fx-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      background: rgba(15, 23, 42, 0.08);
      color: rgba(15, 23, 42, 0.70);
      margin-top: 4px;
      line-height: 1.4;
    }
    .sidebar-logo-icon {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
    }
    .sidebar-logo-text {
      font-weight: 600;
      font-size: 16px;
    }
    .sidebar-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      margin-top: 8px;
      margin-bottom: 4px;
      padding: 0 4px;
    }
    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .sidebar-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text);
      border: 1px solid transparent;
    }
    .sidebar-item:hover {
      background: rgba(15,23,42,0.9);
    }
    .sidebar-item.active {
      background: var(--accent-soft);
      border-color: rgba(34,197,94,0.6);
      color: var(--accent);
    }
    .main {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header {
      padding: 16px 24px;
      border-bottom: 1px solid rgba(148,163,184,0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(15,23,42,0.96);
      backdrop-filter: blur(16px);
    }
    header h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .header-left{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .portfolio-switch-wrap{
      display:flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(148,163,184,0.28);
      border-radius:999px;
      padding:4px 10px;
      background: rgba(2,6,23,0.35);
    }
    .portfolio-switcher{
      border:0;
      background: transparent;
      color: var(--text);
      font-size: 12px;
      min-width: 110px;
      outline: none;
    }
    .portfolio-switcher option{
      background: #0b1120;
      color: var(--text);
    }
    .header-pill {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.4);
      font-size: 11px;
      color: var(--muted);
    }

    .hidden{ display:none !important; }

    /* Header right area (pill + icons) */
    .header-right{
      display:flex;
      align-items:center;
      gap:10px;
    }

    /* Alerts button (visible ONLY on dashboard via JS) */
    #alerts-btn{ display:none; }
    .header-actions{
      position:relative;
      z-index: 5001;
    }
    .icon-btn{
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.35);
      background: rgba(15,23,42,0.35);
      color: var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
    }
    .icon-btn:hover{ background: rgba(15,23,42,0.55); }
    .icon{
      font-size:16px;
      line-height:1;
    }
    #logout-btn .icon{
      color:#22c55e;
    }
    .icon-logout-svg{
      width:18px;
      height:18px;
      display:block;
    }
    .icon-badge{
      position:absolute;
      top:-4px;
      right:-4px;
      min-width:18px;
      height:18px;
      padding:0 5px;
      border-radius:999px;
      background:#ef4444;
      color:#fff;
      font-size:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 2px solid rgba(15,23,42,0.96);
      box-sizing:border-box;
    }

    .alerts-dropdown{
      position:absolute;
      right:0;
      top:42px;
      width:320px;
      max-height:420px;
      overflow:auto;
      background: #0b1220;
      border: 1px solid rgba(148,163,184,0.25);
      border-radius: 14px;
      box-shadow: 0 20px 50px rgba(15,23,42,0.85);
      padding: 10px;
      z-index: 5002;
    }
    .alerts-title{
      font-size:12px;
      font-weight:600;
      margin-bottom:6px;
    }
    .alerts-empty{ font-size:12px; padding: 8px 6px; }
    .alerts-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
    .alert-row{
      border: 1px solid rgba(148,163,184,0.22);
      border-radius: 12px;
      padding: 10px;
      cursor:pointer;
      background: #111a2d;
    }
    .alert-row:hover{ background: #16233d; }
    .alert-row-top{ display:flex; justify-content:space-between; gap:10px; }
    .alert-row-title{ font-size:12px; font-weight:600; }
    .alert-row-mini{ font-size:11px; color: var(--muted); }
    .alert-row-details{ margin-top:8px; font-size:12px; color: var(--muted); display:none; }
    .alert-row.expanded .alert-row-details{ display:block; }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--space-24) var(--space-24) calc(var(--space-24) + var(--space-12));
      width: 100%;
    }
    .card {
      background: linear-gradient(145deg, rgba(15,23,42,0.95), rgba(15,23,42,0.75));
      border-radius: 18px;
      padding: 16px 18px 18px;
      border: 1px solid rgba(148,163,184,0.25);
      box-shadow: 0 20px 50px rgba(15,23,42,0.8);
      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
      will-change: transform;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .card-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
    }
    .card-main-value {
      font-size: 26px;
      font-weight: 600;
    }
    .metric-inline-row{
      display:flex;
      align-items:baseline;
      gap:16px;
      flex-wrap:wrap;
    }
    .metric-inline-col{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .global-kpi-row{
      display:flex;
      align-items:flex-end;
      gap:28px;
      flex-wrap:wrap;
    }
    .global-kpi-item{
      min-width: 260px;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .pill {
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      border: 1px solid rgba(148,163,184,0.4);
      color: var(--muted);
      background: rgba(15,23,42,0.8);
    }
    .pill.green {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(34,197,94,0.5);
    }
    .pill.red {
      background: rgba(239,68,68,0.12);
      color: #f97373;
      border-color: rgba(239,68,68,0.5);
    }

    /* Generic positive/negative coloring (tables, inline values) */
    .green, td.green, span.green {
      color: var(--accent);
      font-weight: 600;
    }
    .red, td.red, span.red {
      color: #f97373;
      font-weight: 600;
    }

    .pill.orange {
      background: rgba(249,115,22,0.14);
      color: #fb923c;
      border-color: rgba(249,115,22,0.55);
    }
    .asset-card.sold {
      background: #ff9f43;
      border-color: #ff9f43;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
      color: #1b1b1b;
    }
    .asset-card.sold * { color: #1b1b1b !important; }
    .btn-soft.orange{
      border-color: rgba(249,115,22,0.55);
      color: #fb923c;
    }
    .btn-soft.orange:hover{
      border-color: rgba(249,115,22,0.85);
      color: #fb923c;
    }

    .modal-actions-row{
      display:flex;
      gap:10px;
      margin-top:14px;
      justify-content:flex-end;
      align-items:center;
    }
    .modal-left-actions{ margin-right:auto; display:flex; flex-direction:column; gap:10px; }

    .btn-sold-round{
      min-width: 44px;
      height: 44px;
      padding: 0 12px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .muted {
      color: var(--muted);
      font-size: 12px;
    }
    .grid {
      display: grid;
      grid-template-columns: 2fr 1.1fr;
      gap: var(--space-24);
    }
    .assets-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
      max-height: 340px;
      overflow-y: auto;
      padding-right: 4px;
    }
    .asset-card {
      background: radial-gradient(circle at top left, rgba(15,23,42,0.9), #020617);
      border-radius: 14px;
      padding: 10px 12px;
      border: 1px solid rgba(55,65,81,0.8);
      font-size: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .asset-card.with-thumb{
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 10px;
      align-items: start;
    }
    .asset-thumb{
      width: 64px;
      height: 64px;
      border-radius: 12px;
      object-fit: cover;
      border: 1px solid rgba(148,163,184,0.25);
    }
    .asset-body{ display:flex; flex-direction:column; gap:4px; }
    .asset-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .asset-name { font-weight: 500; }
    .asset-type {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--muted);
    }
    .asset-values {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
    }
.asset-cashflow {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.asset-actions {
  display: flex;
  justify-content: flex-end;
      gap: 6px;
      margin-top: 4px;
    }
    .asset-btn {
      border: none;
      background: transparent;
      font-size: 11px;
      cursor: pointer;
    }
    .asset-btn.edit { color: var(--muted); }
    .asset-btn.delete { color: #f97373; }
    .sparkline-wrap svg {
      width: 100%;
      height: 34px;
      display: block;
    }
    form {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 12px;
      margin-top: 10px;
    }
    .field-label {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 2px;
    }
    form input,
    form select {
      width: 100%;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.4);
      background: #020617;
      color: var(--text);
      font-size: 13px;
    }
    form input[type="date"]{
      width: min(100%, var(--date-input-w));
      justify-self: flex-start;
      padding-right: 34px;
      color-scheme: dark;
    }
    form input:focus,
    form select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
    }
    .btn-primary {
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: white;
      font-weight: 500;
      padding: 8px 10px;
      cursor: pointer;
      font-size: 13px;
      justify-self: flex-start;
      margin-top: 14px;
    }
    .btn-primary:hover { opacity: 0.95; }
    .btn-soft {
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.4);
      background: rgba(15,23,42,0.9);
      color: var(--muted);
      font-size: 11px;
      padding: 6px 8px;
      cursor: pointer;
    }
    .btn-soft:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .view { display: none; }
    .view.active { display: block; }
    @media (max-width: 900px) {
      .app { grid-template-columns: 70px 1fr; }
      .sidebar-logo-text { display: none; }
      .sidebar-section-title { display: none; }
      .sidebar-item span.label { display: none; }
      .grid { grid-template-columns: 1fr; }
      form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
  
    .gold-spot-box {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--card-soft);
      border: 1px solid rgba(148,163,184,0.3);
      font-size: 12px;
    }
    .gold-spot-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    .gold-spot-line:last-child { margin-bottom: 0; }
    .gold-spot-box .value {
      font-variant-numeric: tabular-nums;
    }
    .gold-spot-box .value.positive { color: #22c55e; }
    .gold-spot-box .value.negative { color: #f97373; }


    /* Tables (Top 10 crypto, etc.) */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .data-table th, .data-table td {
      padding: 10px 8px;
      text-align: center;
      border-bottom: 1px solid rgba(148,163,184,0.18);
      vertical-align: middle;
    }
    .data-table thead th {
      position: sticky;
      top: 0;
      background: rgba(2,6,23,0.95);
      backdrop-filter: blur(10px);
      font-size: 12px;
      color: #cbd5e1;
      letter-spacing: 0.02em;
    }
    .data-table tbody tr:hover {
      background: rgba(148,163,184,0.06);
    }
    .data-table th + th,
    .data-table td + td {
      border-left: 1px solid rgba(148,163,184,0.12);
    }
    .data-table th,
    .data-table td {
      padding: 8px 10px;
      text-align: center;
      border-bottom: 1px solid rgba(148,163,184,0.25);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .data-table th:not(:last-child),
    .data-table td:not(:last-child) {
      border-right: 1px solid rgba(148,163,184,0.15);
    }

    .data-table th {
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 11px;
    }
    .data-table tbody tr:hover {
      background: rgba(15,23,42,0.9);
    }
    .change-pos {
      color: #22c55e;
      font-weight: 500;
    }
    .change-neg {
      color: #ef4444;
      font-weight: 500;
    }


  
    /* --- Modal (éditer actif) : centré dans la zone "main" sans recouvrir la sidebar --- */
    :root {
      --space-12: 12px;
      --space-16: 16px;
      --space-24: 24px; --sidebar-w: 240px; }
    .sidebar { width: var(--sidebar-w); }
    .modal-overlay{
      position: fixed;
      top: 0;
      left: var(--sidebar-w);
      right: 0;
      bottom: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(2,6,23,0.55);
      z-index: 60;
      padding: 16px;
      backdrop-filter: blur(2px);
    }
    .modal-content{
      width: min(760px, calc(100vw - var(--sidebar-w) - 32px));
      max-height: calc(100vh - 32px);
      overflow: auto;
    }

    /* Edit modal sizing: adapt to the content (default is "narrow").
       Some asset types (Actions/Crypto) need more horizontal space. */
    #edit-modal{ --edit-modal-w: 760px; }
    #edit-modal .modal-content{
      width: min(var(--edit-modal-w), calc(100vw - var(--sidebar-w) - 32px));
    }
    #edit-modal[data-size="medium"]{ --edit-modal-w: 900px; }
    #edit-modal[data-size="wide"]{ --edit-modal-w: 1080px; }

    /* Loan edit modal: medium width by default */
    #loan-edit-modal{ --loan-edit-modal-w: 820px; }
    #loan-edit-modal .modal-content{
      width: min(var(--loan-edit-modal-w), calc(100vw - var(--sidebar-w) - 32px));
    }
    #loan-edit-modal[data-size="wide"]{ --loan-edit-modal-w: 980px; }

    .loan-amort-toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:8px;
      margin-bottom:6px;
      flex-wrap:wrap;
    }
    .loan-amort-toolbar .field-label{ margin: 0; }
    .loan-amort-select{
      background: rgba(15,23,42,0.5);
      border: 1px solid rgba(148,163,184,0.25);
      color: #e5e7eb;
      border-radius: 10px;
      padding: 8px 10px;
      outline: none;
      min-width: 200px;
    }

    /* Lots modal: keep it wide and make the list scrollable */
    #lots-modal{ --lots-modal-w: 1080px; }
    #lots-modal .modal-content{ width: min(var(--lots-modal-w), calc(100vw - var(--sidebar-w) - 32px)); }
    #add-asset-modal{ --add-asset-modal-w: 1080px; }
    #add-asset-modal .modal-content{ width: min(var(--add-asset-modal-w), calc(100vw - var(--sidebar-w) - 32px)); }
    #add-loan-modal{ --add-loan-modal-w: 900px; }
    #add-loan-modal .modal-content{ width: min(var(--add-loan-modal-w), calc(100vw - var(--sidebar-w) - 32px)); }
    #tax-details-modal{ --tax-details-modal-w: 980px; }
    #tax-details-modal .modal-content{ width: min(var(--tax-details-modal-w), calc(100vw - var(--sidebar-w) - 32px)); }
    #add-asset-modal #add-asset-modal-body .card{ margin: 0; }
    #add-loan-modal #add-loan-modal-body .card{ margin: 0; }

    .lots-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .lots-table-wrap{
      margin-top:10px;
      border:1px solid rgba(255,255,255,0.08);
      border-radius:14px;
      overflow:auto;
      max-height:52vh;
      background: rgba(15,23,42,0.35);
    }
    .lots-table{ width:100%; border-collapse:collapse; min-width:740px; }
    .lots-table th, .lots-table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px; }
    .lots-table th{ text-align:left; position:sticky; top:0; background: rgba(2,6,23,0.9); z-index:1; }
    .lots-table tr:hover td{ background: rgba(148,163,184,0.08); }
    .lots-del-btn{ border:1px solid rgba(248,113,113,0.45); color:#fca5a5; background: rgba(248,113,113,0.06); border-radius:10px; padding:6px 10px; cursor:pointer; }
    .lots-del-btn:hover{ background: rgba(248,113,113,0.12); }

    /* Edit modal status buttons inside the main grid */
    #edit-modal .edit-status-cell{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
    #edit-modal .edit-status-cell .field-label{ width:100%; text-align:center; }
    #edit-modal .edit-status-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; }

    /* In edit modal, 4-column grids make fields too narrow; use 3 columns for Actions/Crypto */
    #edit-modal .form-grid-4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Edit modal: transaction grid (Quantité + PRU wider, Date narrower on the right) */
    #edit-modal{ --edit-fifo-date-col: 160px; --date-input-w: var(--edit-fifo-date-col); }
    #edit-modal .form-grid-4,
    #edit-modal .form-grid-3,
    #edit-modal .form-grid-2{
      grid-template-columns: repeat(auto-fit, minmax(var(--edit-fifo-date-col), 1fr));
    }
    #edit-modal .grid-span-2,
    #edit-modal .grid-span-3,
    #edit-modal .grid-span-all{
      grid-column: auto;
    }
    #edit-modal [id$="-fields"] > div[style*="display:grid"]{
      grid-template-columns: repeat(auto-fit, minmax(var(--edit-fifo-date-col), 1fr)) !important;
      gap: 12px !important;
    }
    #edit-modal input[type="date"]{
      width: 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 16px 16px;
      padding-right: 34px;
    }
    #edit-modal input[type="date"]::-webkit-calendar-picker-indicator{
      opacity: 0;
      width: 22px;
      height: 22px;
      cursor: pointer;
      pointer-events: auto;
    }
    #edit-modal .edit-tx-box .form-grid-3{ grid-template-columns: minmax(0, 1fr) minmax(var(--edit-fifo-date-col), 0.66fr); align-items:end; }
    #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(1){ grid-column:1; grid-row:1; }
    #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(2){ grid-column:1; grid-row:2; }
    #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(3){ grid-column:2; grid-row:1 / span 2; }
    #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(3) input{ width:100%; }
    @media (max-width: 900px){
      #edit-modal .edit-tx-box .form-grid-3{ grid-template-columns: 1fr; }
      #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(1),
      #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(2),
      #edit-modal .edit-tx-box .form-grid-3 > div:nth-child(3){ grid-column:auto; grid-row:auto; }
    }


    .form-grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .form-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .form-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .grid-span-2{ grid-column: span 2; }
    .grid-span-3{ grid-column: span 3; }
    .grid-span-all{ grid-column: 1 / -1; }

    .edit-tx-wrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    /* In edit modal, transaction inputs are too cramped; stack boxes to widen fields */
    #edit-modal .edit-tx-wrap{ grid-template-columns: 1fr; }
    .edit-tx-box{ padding:10px; border:1px solid rgba(148,163,184,0.18); border-radius: 14px; background: rgba(15,23,42,0.35); }
    .edit-tx-box .field-label{ margin-top:0; }

    @media (max-width: 900px){
      #edit-modal .modal-content{ width: min(760px, calc(100vw - 32px)); }
      .form-grid-4, .form-grid-3, .edit-tx-wrap{ grid-template-columns:1fr; }
    }
    @media (max-width: 900px){
      :root {
      --space-12: 12px;
      --space-16: 16px;
      --space-24: 24px; --sidebar-w: 0px; }
      .sidebar { width: 260px; }
      .modal-overlay{ left: 0; }
      .modal-content{ width: min(760px, calc(100vw - 32px)); }
    }


    .donut-small{
      width: 160px;
      height: 160px;
      margin: 10px auto 0 auto;
    }

    .donut-collectibles{
      width: min(540px, 100%);
      height: 260px;
      margin: 12px auto 0 auto;
      position: relative;
    }

    /* External legend for collectibles donut (legend on the left, donut stays centered) */
    .donut-legend{
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: var(--text);
      pointer-events: none;
      max-width: 170px;
    }
    .donut-legend .legend-item{
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .donut-legend .legend-swatch{
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex: 0 0 10px;
      opacity: 0.9;
    }
    .donut-collectibles canvas{
      width: 100% !important;
      height: 100% !important;
    }

    /* Collectibles synth: donut + evolution chart side by side (wrap on small screens) */
    .collectibles-synth-row{
      display:flex;
      gap:12px;
      align-items: stretch;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .collectibles-synth-row .donut-collectibles{
      flex: 1 1 320px;
      min-width: 280px;
      height: 260px;
      margin: 0;
    }

    /* Type evolution charts (Actions / Crypto / Épargne / Luxe / Collectibles) */
    .type-evo{
      flex: 1 1 320px;
      min-width: 280px;
      border: 1px solid rgba(148,163,184,0.18);
      border-radius: 14px;
      padding: 10px;
      background: rgba(15,23,42,0.25);
    }
    .type-evo-header{
      display:flex;
      justify-content: flex-end;
      margin-bottom: 6px;
    }
    .type-evo canvas{
  width: 100% !important;
  height: 220px !important;
}

/* Dashboard principal (tous portefeuilles standard): cartes d'actifs de hauteur homogene */
#view-dashboard #assets-list .asset-card{
  height: 129.2px;
  min-height: 129.2px;
  max-height: 129.2px;
  overflow: hidden;
}
#view-dashboard #assets-list .asset-card.with-thumb{
  height: 129.2px;
  min-height: 129.2px;
  max-height: 129.2px;
  overflow: hidden;
}
#view-dashboard #assets-list{
  align-content: start;
  align-items: start;
  justify-content: start;
  grid-auto-rows: max-content;
}


/* --- UI tweaks (v11) --- */
.sidebar{ padding: 16px 14px; gap: 12px; }
.sidebar-logo{ padding: 14px 10px 6px; }
.sidebar-logo-img{ height: 70px; }

/* Dashboard: make assets list card match the height of donut+history column */
.dashboard-grid{ align-items: stretch; }
.dash-right-col{ display:flex; flex-direction:column; gap:14px; height:100%; }
.dash-right-col .card{ flex:1; display:flex; flex-direction:column; }
.dash-assets-card{ display:flex; flex-direction:column; height:100%; }
.dash-assets-card .assets-list{
  flex:1;
  overflow:auto;
  min-height: 360px;
  max-height: none;
  align-content: start;
  align-items: start;
  justify-items: stretch;
  grid-auto-rows: max-content;
}

/* Dashboard: left column stack (Assets + Performance) */
.dash-left-col{ display:flex; flex-direction:column; gap:14px; height:100%; }
.dash-left-col .dash-assets-card{ flex: 1 1 auto; }

/* Performance dashboard */
.perf-filters{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top: 10px; }
.perf-filters .field{ display:flex; flex-direction:column; gap:6px; min-width: 160px; }
.perf-filters .label{ font-size: 11px; color: var(--muted); }
.view-actions-row{
  margin-left: auto;
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.select{
  width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.4);
  background: #020617;
  color: var(--text);
  font-size: 13px;
}
.select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}
.select option{
  background: #020617;
  color: var(--text);
}

.perf-types{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.perf-types .chip{ user-select:none; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius: 999px; border:1px solid rgba(148,163,184,0.22); background: rgba(15,23,42,0.35); cursor:pointer; font-size: 12px; color: var(--text); }
.perf-types .chip input{ accent-color: var(--accent); }

.perf-kpis{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.perf-kpi{ border:1px solid rgba(148,163,184,0.18); border-radius: 14px; padding: 10px; background: rgba(15,23,42,0.25); }
.perf-kpi .value{ font-size: 18px; font-weight: 600; margin-top: 6px; }
.perf-kpi .hint{ font-size: 11px; color: var(--muted); margin-top: 4px; }

/* KPI thematic colors (Performance + Fiscalite) */
:root{
  --kpi-growth: 16,185,129;
  --kpi-risk: 245,158,11;
  --kpi-tax-income: 59,130,246;
  --kpi-tax-cash: 14,165,233;
  --kpi-tax-buffer: 234,179,8;
  --kpi-tax-wealth: 168,85,247;
  --kpi-tax-estate: 249,115,22;
  --kpi-rl-realized: 34,197,94;
  --kpi-rl-latent: 45,212,191;
  --kpi-rl-flow: 59,130,246;
  --kpi-rl-cost: 248,113,113;
  --kpi-rl-net: 16,185,129;
  --kpi-rl-income: 234,179,8;
  --kpi-loan-net: 16,185,129;
  --kpi-loan-risk: 245,158,11;
  --kpi-loan-time: 59,130,246;
  --kpi-loan-cost: 248,113,113;
  --kpi-loan-flow: 14,165,233;
}

#view-performance .perf-kpi.perf-theme-growth{
  border-color: rgba(var(--kpi-growth), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-growth), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-growth), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi.perf-theme-risk{
  border-color: rgba(var(--kpi-risk), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-risk), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-risk), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi .muted[title]{ cursor: help; }
#view-performance .pill.perf-theme-risk-pill{
  border-color: rgba(var(--kpi-risk), 0.42);
  background: linear-gradient(180deg, rgba(var(--kpi-risk), 0.16), rgba(15,23,42,0.25));
}

#view-performance .perf-kpi.rl-theme-realized{
  border-color: rgba(var(--kpi-rl-realized), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-rl-realized), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-rl-realized), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi.rl-theme-latent{
  border-color: rgba(var(--kpi-rl-latent), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-rl-latent), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-rl-latent), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi.rl-theme-flow{
  border-color: rgba(var(--kpi-rl-flow), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-rl-flow), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-rl-flow), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi.rl-theme-cost{
  border-color: rgba(var(--kpi-rl-cost), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-rl-cost), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-rl-cost), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi.rl-theme-net{
  border-color: rgba(var(--kpi-rl-net), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-rl-net), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-rl-net), 0.14), rgba(15,23,42,0.20));
}
#view-performance .perf-kpi.rl-theme-income{
  border-color: rgba(var(--kpi-rl-income), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-rl-income), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-rl-income), 0.14), rgba(15,23,42,0.20));
}

#view-tax .perf-kpi.tax-theme-income,
#view-sci-tax .perf-kpi.tax-theme-income{
  border-color: rgba(var(--kpi-tax-income), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-income), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-income), 0.14), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-cash,
#view-sci-tax .perf-kpi.tax-theme-cash{
  border-color: rgba(var(--kpi-tax-cash), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-cash), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-cash), 0.14), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-buffer,
#view-sci-tax .perf-kpi.tax-theme-buffer{
  border-color: rgba(var(--kpi-tax-buffer), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-buffer), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-buffer), 0.14), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-loss,
#view-sci-tax .perf-kpi.tax-theme-loss{
  border-color: rgba(248,113,113,0.58);
  box-shadow: inset 3px 0 0 rgba(248,113,113,0.95);
  background: linear-gradient(180deg, rgba(248,113,113,0.18), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-wealth,
#view-sci-tax .perf-kpi.tax-theme-wealth{
  border-color: rgba(var(--kpi-tax-wealth), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-wealth), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-wealth), 0.14), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-estate,
#view-sci-tax .perf-kpi.tax-theme-estate{
  border-color: rgba(var(--kpi-tax-estate), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-estate), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-estate), 0.14), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-metals,
#view-sci-tax .perf-kpi.tax-theme-metals{
  border-color: rgba(245,158,11,0.50);
  box-shadow: inset 3px 0 0 rgba(245,158,11,0.95);
  background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-estate-alert,
#view-sci-tax .perf-kpi.tax-theme-estate-alert{
  border-color: rgba(248,113,113,0.55);
  box-shadow: inset 3px 0 0 rgba(248,113,113,0.95);
  background: linear-gradient(180deg, rgba(248,113,113,0.16), rgba(15,23,42,0.22));
}
#view-tax .perf-kpi.tax-theme-immo-pv,
#view-sci-tax .perf-kpi.tax-theme-immo-pv{
  border-color: rgba(234,179,8,0.60);
  box-shadow: inset 3px 0 0 rgba(234,179,8,0.95);
  background: linear-gradient(180deg, rgba(234,179,8,0.18), rgba(15,23,42,0.22));
}

.tax-mode-toggle{
  min-height: 34px;
  padding: 6px 9px;
  border-color: rgba(148,163,184,0.45);
}
#view-tax .tax-mode-toggle,
#view-tax #tax-open-details{
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#view-tax #tax-open-details{
  padding: 6px 9px;
  font-size: 11px;
}
#view-tax #tax-heirs-children{
  background: var(--bg);
  color: #ffffff;
  border-color: rgba(148,163,184,0.42);
}
.tax-mode-toggle input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.tax-mode-toggle .tax-mode-toggle-text{
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
.tax-mode-toggle.is-active{
  border-color: rgba(34,197,94,0.75);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.35);
  color: #dcfce7;
}

#view-sci-tax .table-wrap{ display:flex; justify-content:center; }
#view-sci-tax .table{ width:100%; max-width:980px; min-width:720px; border-radius:14px; overflow:hidden; }
#view-sci-tax .table th,
#view-sci-tax .table td{ text-align:center; padding:10px 12px; }
#view-sci-tax .table tbody tr:nth-child(even){ background: rgba(148,163,184,0.06); }

/* SCI views: KPI cards aligned with SCI tax style */
#view-sci-dashboard .perf-kpi,
#view-sci-performance .perf-kpi,
#view-sci-assets .perf-kpi{
  border-color: rgba(var(--kpi-tax-cash), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-cash), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-cash), 0.14), rgba(15,23,42,0.22));
}
#view-sci-dashboard .perf-kpi.perf-theme-risk,
#view-sci-performance .perf-kpi.perf-theme-risk{
  border-color: rgba(var(--kpi-tax-buffer), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-buffer), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-buffer), 0.14), rgba(15,23,42,0.22));
}
#view-sci-dashboard .perf-kpi.perf-theme-growth,
#view-sci-performance .perf-kpi.perf-theme-growth{
  border-color: rgba(var(--kpi-tax-income), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-tax-income), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-tax-income), 0.14), rgba(15,23,42,0.22));
}
#view-sci-dashboard .perf-kpi,
#view-sci-performance .perf-kpi{
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#view-sci-dashboard .perf-kpi .value,
#view-sci-performance .perf-kpi .value{
  font-size: 20px;
}

.sci-charts-grid{
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sci-chart-card{
  min-height: 272px;
  border-color: rgba(var(--kpi-tax-cash), 0.24);
  padding: 14px 14px 12px;
}
.sci-chart-card canvas{
  width: 100%;
  height: 200px !important;
  max-height: 200px;
}
.sci-locatif-grid{
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  align-items: start;
}
.sci-kpi-grid{
  gap: 12px;
}
#view-sci-dashboard .card-header,
#view-sci-performance .card-header,
#view-sci-tax .card-header,
#view-sci-assets .card-header{
  margin-bottom: 10px;
}
#view-sci-assets .assets-list{
  gap: 12px;
}

@media (max-width: 1100px){
  .sci-charts-grid,
  .sci-locatif-grid{
    grid-template-columns: 1fr;
  }
  .sci-chart-card{
    min-height: 250px;
  }
  .sci-chart-card canvas{
    height: 188px !important;
    max-height: 188px;
  }
}
@media (max-width: 760px){
  #view-sci-dashboard .perf-kpi,
  #view-sci-performance .perf-kpi{
    min-height: 104px;
  }
  #view-sci-dashboard .perf-kpi .value,
  #view-sci-performance .perf-kpi .value{
    font-size: 18px;
  }
}

/* SCI selects: same dark theme as app */
#view-sci-dashboard select,
#view-sci-performance select,
#view-sci-tax select,
#view-sci-assets select,
#view-sci-loans select{
  background: #020617;
  color: var(--text);
  border: 1px solid rgba(148,163,184,0.4);
}
#view-sci-dashboard select option,
#view-sci-performance select option,
#view-sci-tax select option,
#view-sci-assets select option,
#view-sci-loans select option{
  background: #020617;
  color: var(--text);
}

/* Analyze view: KPI colors + class filter + table readability */
#view-analyze .perf-kpi.perf-theme-growth{
  border-color: rgba(var(--kpi-growth), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-growth), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-growth), 0.14), rgba(15,23,42,0.20));
}
#view-analyze .perf-kpi.perf-theme-risk{
  border-color: rgba(var(--kpi-risk), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-risk), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-risk), 0.14), rgba(15,23,42,0.20));
}
#view-analyze .analyze-class-filter-wrap{
  position: relative;
  margin-left: auto;
}
#view-analyze .analyze-class-filter-menu{
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  z-index: 40;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(2,6,23,0.97);
  box-shadow: 0 14px 30px rgba(0,0,0,0.32);
}
#view-analyze .analyze-class-filter-wrap.open .analyze-class-filter-menu{
  display: grid;
  gap: 7px;
}
#view-analyze .analyze-class-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
#view-analyze .analyze-class-item input{
  accent-color: var(--accent);
}
#view-analyze .perf-charts{
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 12px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
#view-analyze #analyze-allocation-card,
#view-analyze #analyze-rebalance-card{
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: flex;
  flex-direction: column;
}
#view-analyze .table-wrap{
  flex: 1;
  overflow: hidden;
}
#view-analyze #analyze-allocation-table{
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  table-layout: fixed;
}
#view-analyze #analyze-allocation-table th,
#view-analyze #analyze-allocation-table td{
  text-align: center;
  vertical-align: middle;
  padding: 8px 8px;
  font-size: 11.5px;
}
#view-analyze #analyze-allocation-table th:not(:last-child),
#view-analyze #analyze-allocation-table td:not(:last-child){
  border-right: 1px solid rgba(148,163,184,0.14);
}
#view-analyze #analyze-allocation-table td{
  border-bottom: 1px solid rgba(148,163,184,0.18);
}
#view-analyze #analyze-allocation-table tbody tr:nth-child(even){
  background: rgba(148,163,184,0.05);
}
#view-analyze #analyze-allocation-table .analyze-row-disabled{
  opacity: 0.6;
}
#view-analyze #analyze-allocation-table .analyze-target-input{
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#view-analyze #analyze-allocation-table th:first-child,
#view-analyze #analyze-allocation-table td:first-child{
  text-align: left;
  white-space: normal;
  width: 26%;
}
#view-analyze #analyze-rebalance-card #analyze-reco-list{
  grid-template-columns: 1fr;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  flex: 1;
  align-content: start;
}
#view-analyze input,
#view-analyze select,
#view-analyze textarea{
  background: rgba(2,6,23,0.45);
  color: var(--text);
  border: 1px solid rgba(148,163,184,0.26);
}
#view-analyze input::placeholder,
#view-analyze textarea::placeholder{
  color: var(--muted);
}
@media (max-width: 1180px){
  #view-analyze .perf-charts{
    grid-template-columns: 1fr;
  }
  #view-analyze #analyze-allocation-card,
  #view-analyze #analyze-rebalance-card{
    min-height: 0;
  }
}
@media (max-width: 780px){
  #view-analyze #analyze-allocation-table{
    width: 100%;
    min-width: 0;
  }
}

.perf-vol{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }

/* Dedicated Performance view layout */
.perf-page{ grid-template-columns: 1fr; gap: 12px; }
.perf-kpis-grid{ display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tax-kpis-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tax-assumptions{ display:grid; gap:8px; margin-top: 6px; }
.tax-disclaimer{
  border: 1px solid rgba(245,158,11,0.65);
  box-shadow: inset 3px 0 0 rgba(245,158,11,0.95);
  background: rgba(245,158,11,0.08);
}
#tax-base-table th,
#tax-base-table td{
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}
#tax-base-table th:not(:last-child),
#tax-base-table td:not(:last-child){
  border-right: 1px solid rgba(148,163,184,0.16);
}
#tax-base-table thead th{
  letter-spacing: 0.2px;
  background: rgba(15,23,42,0.55);
}
#tax-metals-table th,
#tax-metals-table td{
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}
#tax-metals-table th:not(:last-child),
#tax-metals-table td:not(:last-child){
  border-right: 1px solid rgba(148,163,184,0.16);
}
#tax-metals-table thead th{
  letter-spacing: 0.2px;
  background: rgba(15,23,42,0.55);
}
#tax-metals-table tbody tr:nth-child(even){
  background: rgba(148,163,184,0.06);
}
#tax-base-table tbody tr:nth-child(even){
  background: rgba(148,163,184,0.06);
}
.perf-charts{ grid-template-columns: 2fr 1fr; gap: 12px; }
.table-wrap{ overflow:auto; }
.perf-comp-content{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); gap:12px; margin-top:12px; align-items:stretch; }
.perf-comp-metrics{ display:flex; flex-direction:column; gap:8px; }
.perf-comp-chart{ min-height:180px; }
.perf-comp-asset{ padding:8px 10px; border-radius:10px; background:rgba(15,23,42,0.5); border:1px solid rgba(148,163,184,0.25); font-size:12px; }
.perf-comp-asset .title{ font-weight:600; margin-bottom:4px; }
.perf-comp-asset .kpis{ display:flex; flex-wrap:wrap; gap:4px 10px; }
.perf-comp-asset .kpis span{ white-space:nowrap; }
.scope-pill{
  display:inline-flex;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  color:#cbd5e1;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(15,23,42,0.45);
}

/* Performance table readability + centering */
#view-performance .table-wrap{ display:flex; justify-content:center; }
#view-performance .table{ width: 100%; max-width: 980px; min-width: 720px; }
#view-performance .table th,
#view-performance .table td{ padding: 10px 12px; }
#view-performance .table th,
#view-performance .table td{ text-align: center; }
#view-performance .table thead th{ font-size: 12px; letter-spacing: 0.2px; }
#view-performance .table tbody td{ font-size: 12.5px; }
#view-performance .table tbody tr:nth-child(even){ background: rgba(148,163,184,0.06); }
#view-performance .table{ border-radius: 14px; overflow:hidden; }

/* Performance subtabs + Réalisé/Latent */
.perf-subtabs-top{ display:flex; justify-content:flex-end; margin-bottom: 10px; }
.perf-tab{ display:block; }
.perf-tab:not(.active){ display:none; }

.rl-page{ grid-template-columns: 1fr; gap: 12px; }
.rl-kpis-grid{ display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rl-charts{ grid-template-columns: 2fr 1fr; gap: 12px; }
.rl-latent-cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rl-latent-card{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(17,24,39,0.85);
  border:1px solid rgba(55,65,81,0.9);
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
}
#view-performance #perf-tab-realized .rl-realized-scroll{
  overflow: auto;
  max-height: 252px; /* header + ~4 lignes visibles */
}
#view-performance #perf-tab-realized .rl-latent-scroll{
  overflow: auto;
  max-height: 520px; /* ~4 rangees de cartes */
  align-content: start;
  padding-right: 4px;
}

#view-performance .pos{ color: rgba(34,197,94,0.95); }
#view-performance .neg{ color: rgba(248,113,113,0.95); }

@media (max-width: 980px){
  .rl-kpis-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-charts{ grid-template-columns: 1fr; }
  .rl-latent-cards{ grid-template-columns: 1fr; }
}



@media (max-width: 980px){
  .perf-kpis-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tax-kpis-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-charts{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .perf-kpis{ grid-template-columns: 1fr; }
  .tax-kpis-grid{ grid-template-columns: 1fr; }
}

/* Segmented control (Jour / Semaine) */
.segmented{
  display:flex;
  gap:4px;
  padding:3px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.35);
}
.seg-btn{
  border:0;
  background: transparent;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 999px;
  cursor: pointer;
}
.seg-btn:hover{ color: var(--text); }
.seg-btn.active{
  background: rgba(34,197,94,0.18);
  color: var(--accent);
}

/* --- Spacing scale (12 / 16 / 24) --- */
:root{
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
}

.app-loading-overlay{
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(1px);
}
.app-loading-overlay.hidden{
  display: none;
}
.app-loading-box{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.95);
  color: #e5e7eb;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.app-loading-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(148,163,184,0.45);
  border-top-color: #22c55e;
  animation: app-spin 0.8s linear infinite;
}
.app-loading-text{
  font-size: 12px;
  color: #e5e7eb;
  letter-spacing: 0.1px;
}
@keyframes app-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* --- Card hover (modern / subtle) --- */
.card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(148,163,184,0.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Performance charts: give the donut enough room + keep it perfectly round */
.perf-charts{
  grid-template-columns: 2fr 1fr;
}
.perf-donut-wrap{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:center;
  padding: 4px 6px 10px;
}
.perf-charts #perf2-line{
  width: 100% !important;
  height: 170px !important;
  display:block;
 }

/* Réalisé/Latent: Chart.js sets canvas size based on its parent.
   If the parent has auto height, it can create a resize loop and the canvas grows endlessly.
   Fix: constrain a dedicated wrapper with a fixed height, and make the canvas fill it. */
#view-performance .rl-chart-box{
  position: relative;
  height: 170px;
  max-height: 170px;
  width: 100%;
}
#view-performance .rl-chart-box > canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
#view-performance #perf-tab-realized .rl-chart-box{
  /* Les histogrammes restent collés dans l'encart, sans scroll horizontal forcé */
  overflow-x: hidden;
}
#view-performance #perf-tab-realized .rl-chart-box > canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
#view-performance #perf-tab-realized .card{ overflow:hidden; }
.rl-stacked-box{
  overflow-x: auto !important;
  overflow-y: hidden;
  text-align: left;
}
#view-performance #perf-tab-realized .rl-stacked-box > #rl-stacked{
  position: static !important;
  inset: auto !important;
  display: block;
  height: 170px !important;
  max-height: 170px;
  width: auto !important;
}
.perf-donut-wrap > canvas{
  width: 170px !important;
  height: 170px !important;
  flex: 0 0 170px;
}
.perf-donut-legend{
  flex: 1 1 auto;
  min-width: 140px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.perf-donut-legend .legend-row{
  display:flex;
  align-items:center;
  gap: 8px;
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
.perf-donut-legend .swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 10px;
}

/* Charts layout helpers (Immo / Loans) */
.immo-charts{
  /* Flex prevents the values chart from slipping "under" the donut on narrower widths
     (which can visually look like overlap / superposition). */
  display:flex;
  gap:12px;
  margin-top:10px;
  align-items:center;
  flex-wrap: nowrap;
}
.immo-values-chart{
  flex: 1 1 0;
  min-width: 0; /* allows the chart to shrink instead of overflowing */
}
.immo-values-chart > canvas{
  width: 100%;
  height: 200px;
  display:block;
}

/* Immobilier cashflow donut (right column) */
.immo-cf-donut{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 6px;
}
.immo-cf-donut > canvas{
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
  display:block;
}
.immo-cf-legend{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
  max-width: 220px;
}
.immo-cf-legend .legend-row{
  display:flex;
  align-items:center;
  gap: 8px;
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.immo-cf-legend .swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 10px;
}
.immo-xirr-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  height: 168px;
  box-sizing: border-box;
  border:1px solid rgba(27,19,0,0.18);
  border-radius:10px;
  background:#71B4E3;
  color:#1b1300;
}
.immo-xirr-row + .immo-xirr-row{ margin-top:8px; }
.immo-xirr-main{ display:flex; flex-direction:column; gap:4px; min-width:0; width:100%; }
.immo-xirr-name{
  font-weight:600;
  color:#1b1300;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.2;
  min-height: 2.4em;
}
.immo-xirr-main .muted{ color: rgba(27,19,0,0.78) !important; font-size: 12px; }
.immo-xirr-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px 10px;
  font-size:12px;
  color:rgba(27,19,0,0.86);
  align-items:stretch;
}
#view-immo .immo-xirr-metrics .immo-xirr-metric{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  white-space:normal;
}
#view-immo .immo-xirr-metrics .immo-xirr-metric small{
  font-size:11px;
  color: rgba(27,19,0,0.72);
  line-height:1.1;
}
#view-immo .immo-xirr-metrics .immo-xirr-metric b{
  font-size:12px;
  line-height:1.15;
  color:#1b1300;
  font-weight:700;
  word-break:break-word;
}
#view-immo .immo-xirr-row b{ color:#1b1300; }
#view-immo #immo-dashboard{
  border-color: rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.35);
}
#view-immo .loan-kpi.loan-theme-flow{
  border-color: rgba(var(--kpi-loan-flow), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-flow), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-flow), 0.14), rgba(15,23,42,0.20));
}
#view-immo .loan-kpi.loan-theme-risk{
  border-color: rgba(var(--kpi-loan-risk), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-risk), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-risk), 0.14), rgba(15,23,42,0.20));
}
#view-immo .loan-kpi.loan-theme-cost{
  border-color: rgba(var(--kpi-loan-cost), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-cost), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-cost), 0.14), rgba(15,23,42,0.20));
}
#view-immo #immo-tab-patrimoine .card,
#view-immo #immo-tab-locatif .card{
  border-color: rgba(148,163,184,0.24);
}
#view-immo .table thead th{
  background: rgba(15,23,42,0.52);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15px;
}
#view-immo .table td{
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid rgba(148,163,184,0.20);
}
#view-immo .table th:not(:last-child),
#view-immo .table td:not(:last-child){
  border-right: 1px solid rgba(148,163,184,0.18);
}
#view-immo #immo-tab-patrimoine .table-wrap{
  display:flex;
  justify-content:center;
}
#view-immo #immo-tab-patrimoine .table-wrap .table{
  width:min(980px, 100%);
}
#view-immo #immo-tab-patrimoine #immo-chart-values{
  height: 148px !important;
}
#view-immo #immo-tab-locatif .immo-charts{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items:center;
}
#view-immo #immo-tab-locatif .immo-values-chart{
  width:100%;
}
#view-immo #immo-tab-locatif .immo-values-chart .table{
  width:100%;
}
@media (max-width: 980px){
  #view-immo #immo-tab-locatif .immo-charts{
    grid-template-columns: 1fr;
  }
}

.loans-charts{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

@media (max-width: 980px){
  .immo-charts{ flex-direction: column; }
  .loans-charts{ grid-template-columns: 1fr; }
}

/* Search / Settings layout */
.search-form{
  display:grid;
  grid-template-columns: 2fr 1.1fr 1fr 1fr 1.1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 980px){
  .search-form{ grid-template-columns: 1fr; }
}

.settings-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 980px){
  .settings-grid{ grid-template-columns: 1fr; }
}

.settings-block{
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15,23,42,0.35);
}
.settings-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 8px; }

.backup-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.16);
  margin-top: 8px;
}
.backup-meta{ font-size: 12px; color: var(--muted); }
.backup-actions{ display:flex; gap:8px; }

/* Attachments helper */
.attachments-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.attachment-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.18);
  font-size: 12px;
}


/* Override: FX badge readability on dark cards */
.fx-badge{
  background: rgba(148,163,184,0.12);
  color: var(--text);
  border: 1px solid rgba(148,163,184,0.18);
}

/* Luxe: pièces jointes (modal) */
.att-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 0;
}
.att-row a{ color: var(--text); text-decoration: underline; }
.att-del{ width:26px; height:26px; border-radius: 999px; }


.card-sub-value{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(226,232,240,0.85);
}

/* Dashboard: stacked primary metrics (Valeur totale + Patrimoine net) */
.metric-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card-main-value.secondary{
  font-size: 28px;
  line-height: 1.1;
}


.loans-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
#view-loans .loan-kpi{
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
}
#view-loans .loan-kpi.loan-theme-net{
  border-color: rgba(var(--kpi-loan-net), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-net), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-net), 0.14), rgba(15,23,42,0.20));
}
#view-loans .loan-kpi.loan-theme-risk{
  border-color: rgba(var(--kpi-loan-risk), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-risk), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-risk), 0.14), rgba(15,23,42,0.20));
}
#view-loans .loan-kpi.loan-theme-time{
  border-color: rgba(var(--kpi-loan-time), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-time), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-time), 0.14), rgba(15,23,42,0.20));
}
#view-loans .loan-kpi.loan-theme-cost{
  border-color: rgba(var(--kpi-loan-cost), 0.45);
  box-shadow: inset 3px 0 0 rgba(var(--kpi-loan-cost), 0.95);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-cost), 0.14), rgba(15,23,42,0.20));
}
#view-loans .pill.loan-theme-flow-pill{
  border-color: rgba(var(--kpi-loan-flow), 0.42);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-flow), 0.16), rgba(15,23,42,0.25));
}
#view-loans .pill.loan-theme-risk-pill{
  border-color: rgba(var(--kpi-loan-risk), 0.42);
  background: linear-gradient(180deg, rgba(var(--kpi-loan-risk), 0.16), rgba(15,23,42,0.25));
}
@media (max-width: 980px){
  .loans-kpis{ grid-template-columns: 1fr; }
}

/* Gold history chart fixed height (300px) */
.gold-history-wrap{
  height: 300px;
  margin-top: 10px;
}
.gold-history-wrap canvas{
  width: 100% !important;
  height: 100% !important;
}


/* Stocks: market quote hint */
.market-hint{font-size:12px; line-height:1.3; opacity:.9}
.market-hint strong{font-weight:600}



/* Réalisé/Latent inline sale editing */
#view-performance .rl-input{
  width: 100%;
  min-width: 110px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.35);
  color: var(--text);
  font-size: 12px;
}
#view-performance .rl-actions{ white-space: nowrap; }
#view-performance .rl-actions .btn-soft{ padding: 6px 10px; }


/* === Performance Comparator – Cosmetic improvements === */
.perf-comp-controls{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* Dark select look, inverted colors, consistent with app background */
.perf-comp-controls select,
.perf-comp-controls option{
  background-color: var(--card);
  color: var(--text);
}

.perf-comp-controls select{
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  min-height: 44px;
}

.perf-comp-controls select:focus{
  outline:none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Multi-select height */
#perf-comp-assets{
  min-height: 120px;
}

/* Comparison type selector as pill-style */
#perf-comp-base{
  cursor: pointer;
}

/* Button alignment */
#perf-comp-refresh{
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
}

/* Metrics cards polish */
.perf-comp-asset{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(15,23,42,0.4));
  border: 1px solid rgba(148,163,184,0.32);
}

.perf-comp-asset .title{
  color: var(--text);
}

.perf-comp-asset .kpis span{
  color: rgba(229,231,235,0.9);
}

/* Hint text softer */
#perf-comp-hint{
  color: rgba(156,163,175,0.85);
  font-size: 0.85rem;
}

/* --- Custom sliders / scrollbars (Réalisé/Latent & global) --- */
.app::-webkit-scrollbar,
.card::-webkit-scrollbar,
.rl-chart-box::-webkit-scrollbar{
  height: 6px;
  width: 6px;
}

.app::-webkit-scrollbar-track,
.card::-webkit-scrollbar-track,
.rl-chart-box::-webkit-scrollbar-track{
  background: var(--bg);
  border-radius: 999px;
}

.app::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb,
.rl-chart-box::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.45);
  border-radius: 999px;
}

/* Firefox */
.rl-chart-box{
  scrollbar-color: rgba(148,163,184,0.45) var(--bg);
  scrollbar-width: thin;
}



/* Auth overlay (login / setup) */
.auth-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
}
.auth-modal-inner{
  max-width:420px;
  width:100%;
}
.auth-hidden{
  display:none;
}

/* Blur background when auth modal visible (handled via auth.js by toggling .app-auth-locked on body/app if needed) */
body.auth-lock-active .container,
body.auth-lock-active .sidebar,
body.auth-lock-active header{
  filter: blur(5px);
  pointer-events:none;
}

/* Backups list scrollable */
.backup-list{
  max-height:260px;
  overflow-y:auto;
  padding-right:4px;
}

.settings-row-column{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Settings: password panel */
.settings-password-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.settings-password-section .field-label{
  text-align:center;
}
.settings-password-fields{
  align-items:center !important;
  width:100%;
}
.settings-password-fields input{
  width: min(100%, 320px);
  background: var(--bg);
  color: #fff;
  border: 1px solid rgba(148,163,184,0.45);
}
.settings-auth-input{
  background: var(--bg);
  color: #fff;
  border: 1px solid rgba(148,163,184,0.45);
}
.settings-auth-input::placeholder{
  color: rgba(229,231,235,0.8);
}
.settings-password-fields input::placeholder{
  color: rgba(229,231,235,0.8);
}
.settings-password-section #settings-password-rules{
  max-width: 420px;
  text-align:center;
  color: #fff;
}


/* Search focus highlight (one-shot) */
.asset-card.search-focus{
  box-shadow: inset 0 0 0 3px #d4a500, 0 0 0 1px rgba(212,165,0,0.25);
  border-radius: 14px;
}