/* ============================================================
   Portfolio — app.css — Charte Sauge & Terre cuite
   ============================================================ */
:root {
  --sage-900:   #1c2a1d;
  --sage-800:   #2d3b2e;
  --sage-700:   #3a4d3b;
  --sage-600:   #4d6550;
  --sage-400:   #6b8a6e;
  --sage-200:   #a8c2aa;
  --sage-100:   #ccdece;
  --sage-50:    #eaf3eb;
  --terracotta: #c8714a;
  --tc-light:   #dca080;
  --tc-dark:    #9e4f2e;
  --tc-bg:      #f5e8e0;
  --cream-900:  #2c1f14;
  --cream-700:  #5a4535;
  --cream-500:  #8a7060;
  --cream-300:  #c4b0a0;
  --cream-200:  #ddd0c5;
  --cream-100:  #ede6dc;
  --cream-50:   #f5f0e8;
  --cream-25:   #faf7f3;
  --positive:   #5a7a3a;
  --positive-bg:#dcecc8;
  --negative:   #b5432a;
  --negative-bg:#f7ddd6;
  --neutral:    #8a7060;
  --sidebar-w:  232px;
  --header-h:   52px;
  --radius:     8px;
  --radius-sm:  5px;
  --radius-lg:  12px;
  --transition: .16s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--cream-50);
  color: var(--cream-900);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* Layout */
.layout { display: flex; min-height: 100vh; isolation: auto; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { padding: 2rem; flex: 1; }

/* Sidebar */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sage-800); display: flex; flex-direction: column; }
.sidebar-logo { padding: 1.1rem .85rem .9rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-close { display: none; background: none; border: none; color: var(--sage-400); margin-bottom: .4rem; }
.logo-row { display: flex; align-items: center; gap: .7rem; }
.logo-sq { width: 34px; height: 34px; background: var(--terracotta); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-text { font-weight: 600; font-size: .92rem; color: #e8e2d6; }
.logo-sub { font-size: .7rem; color: var(--sage-400); }
.nav-section { flex: 1; padding: .85rem .65rem; overflow-y: auto; }
.nav-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sage-600); padding: .4rem .45rem .2rem; }
.nav-item { display: flex; align-items: center; gap: .6rem; padding: .42rem .55rem; border-radius: var(--radius-sm); color: var(--sage-400); font-size: .855rem; transition: background var(--transition), color var(--transition); text-decoration: none; margin-bottom: 1px; }
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #e8e2d6; text-decoration: none; }
.nav-item.active { background: rgba(200,113,74,.18); color: var(--tc-light); }
.sidebar-footer { padding: .7rem .85rem 0; }
.sidebar-sep-single { height: 1px; background: rgba(255,255,255,.12); }
.sidebar-sep-double { border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.08); height: 3px; }
.sidebar-footer-logout { padding: .5rem .85rem .7rem; }
.user-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 0 .35rem; }
.user-avatar { width: 30px; height: 30px; background: var(--terracotta); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; color: white; flex-shrink: 0; }
.user-name { font-size: .82rem; font-weight: 500; color: #e8e2d6; }
.user-role { font-size: .7rem; color: var(--sage-400); }
.logout-link { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--sage-400); text-decoration: none; transition: color var(--transition); padding: .2rem 0; }
.logout-link:hover { color: var(--tc-light); text-decoration: none; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 190; }

/* Topbar */
.topbar { height: var(--header-h); background: var(--cream-25); border-bottom: 1px solid var(--cream-200); display: flex; align-items: center; padding: 0 1.5rem; justify-content: space-between; flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-title { font-size: .95rem; font-weight: 500; color: var(--cream-900); }
.hamburger { display: none; background: none; border: none; cursor: pointer; color: var(--cream-500); padding: 4px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: var(--radius-sm); font-size: .855rem; font-weight: 500; border: none; transition: background var(--transition), opacity var(--transition); cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; opacity: .9; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--terracotta); color: white; }
.btn-primary:hover { background: var(--tc-dark); opacity: 1; }
.btn-secondary { background: var(--cream-100); color: var(--cream-700); border: 1px solid var(--cream-200); }
.btn-secondary:hover { background: var(--cream-200); opacity: 1; }
.btn-danger { background: var(--negative); color: white; }
.btn-danger:hover { background: #8f3320; opacity: 1; }
.btn-ghost { background: transparent; color: var(--cream-500); border: 1px solid var(--cream-200); }
.btn-ghost:hover { background: var(--cream-100); color: var(--cream-700); opacity: 1; }
.btn-sm { padding: .28rem .6rem; font-size: .79rem; }
.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-link { background: none; border: none; color: var(--terracotta); font-size: .82rem; padding: 0; }

/* Formulaires */
.form-group { display: flex; flex-direction: column; gap: .38rem; margin-bottom: .75rem; }
.form-group[hidden] { display: none; }
.form-group label { font-size: .8rem; font-weight: 500; color: var(--cream-700); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-help { font-size: .76rem; color: var(--cream-500); margin-top: .2rem; }
.form-info { background: var(--tc-bg); border: 1px solid #ddb89a; border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .8rem; color: var(--tc-dark); margin-bottom: .75rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=file], input[type=datetime-local], select, textarea { background: var(--cream-25); border: 1px solid var(--cream-200); border-radius: var(--radius-sm); color: var(--cream-900); padding: .48rem .7rem; font-size: .855rem; width: 100%; transition: border-color var(--transition); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--terracotta); }

/* Tableaux */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .855rem; }
.table th { text-align: left; font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cream-500); padding: .6rem 1rem; border-bottom: 2px solid var(--cream-300); background: var(--cream-100); white-space: nowrap; }
.table td { padding: .65rem 1rem; border-bottom: 1px solid var(--cream-200); vertical-align: middle; }
.table tbody tr:hover { background: var(--cream-50); }
.table tbody tr { background: white; }
.table tbody tr:nth-child(even) { background: var(--cream-25); }
.table .text-right { text-align: right; }
.table .text-muted { color: var(--cream-500); }
.table .symbol { font-family: monospace; font-weight: 600; font-size: .88rem; color: var(--sage-800); }
.table .text-mono { font-family: monospace; font-size: .8rem; }
.table-actions { display: flex; gap: .35rem; justify-content: flex-end; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: .18rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.badge-lg { font-size: .78rem; padding: .28rem .75rem; }
.badge-pea { background: var(--positive-bg); color: var(--sage-700); }
.badge-cto { background: #ede0f7; color: #6b2fa0; }
.badge-admin { background: var(--tc-bg); color: var(--tc-dark); }
.badge-user { background: var(--cream-100); color: var(--cream-700); }
.badge-active { background: var(--positive-bg); color: var(--positive); }
.badge-inactive { background: var(--negative-bg); color: var(--negative); }
.badge-database { background: #dce8f5; color: #1a4a80; }
.badge-webroot { background: #ede0f7; color: #6b2fa0; }
.badge-tx { border-radius: var(--radius-sm); }
.badge-buy { background: var(--positive-bg); color: var(--positive); }
.badge-sell { background: var(--negative-bg); color: var(--negative); }
.badge-short { background: #faeeda; color: #854f0b; }
.badge-cover { background: #e8e0f5; color: #5a3a98; }
.badge-split { background: #d8f0ec; color: #1a6b5a; }
.badge-dividend { background: #ede0f7; color: #6b2fa0; }

/* Stat cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; margin-bottom: 1.75rem; }
.stat-card { background: white; border: 1px solid var(--cream-200); border-radius: var(--radius); padding: 1.1rem 1.35rem; border-left: 3px solid var(--terracotta); }
.stat-label { font-size: .74rem; color: var(--cream-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.stat-value { font-size: 1.3rem; font-weight: 700; color: var(--cream-900); }
.stat-pct { font-size: .82rem; font-weight: 500; margin-left: .35rem; }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.neutral  { color: var(--neutral); }

/* Cards */
.card { background: white; border: 1px solid var(--cream-200); border-radius: var(--radius); }
.card-header { padding: .9rem 1.25rem; border-bottom: 1px solid var(--cream-100); }
.card-header h3 { font-size: .92rem; font-weight: 600; color: var(--cream-900); }
.card-body { padding: 1.25rem; }

/* Portfolio */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.portfolio-card { background: white; border: 1px solid var(--cream-200); border-radius: var(--radius); padding: 1.1rem; text-decoration: none; color: var(--cream-900); transition: border-color var(--transition), transform var(--transition); display: block; border-left: 3px solid var(--terracotta); }
.portfolio-card:hover { border-left-color: var(--tc-dark); transform: translateY(-2px); text-decoration: none; color: var(--cream-900); }
.portfolio-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.portfolio-name { font-weight: 600; font-size: .9rem; }
.portfolio-card-body { display: flex; flex-direction: column; gap: .38rem; }
.portfolio-stat { display: flex; justify-content: space-between; font-size: .83rem; }
.portfolio-stat .label { color: var(--cream-500); }
.portfolio-show-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; }
.portfolio-opened { font-size: .8rem; color: var(--cream-500); margin-left: .65rem; }
.tax-label { font-size: .74rem; background: var(--cream-100); color: var(--cream-700); border: 1px solid var(--cream-200); border-radius: 999px; padding: .18rem .6rem; margin-left: .45rem; }
.section-title { font-size: .74rem; font-weight: 600; color: var(--cream-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .85rem; }

/* Alertes */
.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .855rem; margin-bottom: 1.25rem; }
.alert-success { background: var(--positive-bg); border: 1px solid #9fc46e; color: var(--sage-700); }
.alert-error { background: var(--negative-bg); border: 1px solid #d4896e; color: var(--negative); }
.alert-info { background: var(--tc-bg); border: 1px solid #ddb89a; color: var(--tc-dark); }

/* Modals */
.modal { background: var(--cream-25); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(45,59,46,.18); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(45,59,46,.5); }
.modal-box { position: relative; background: var(--cream-25); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(45,59,46,.18); }
.modal-box-lg { max-width: 640px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem .9rem; border-bottom: 1px solid var(--cream-200); }
.modal-header h3 { font-size: .95rem; font-weight: 600; color: var(--cream-900); }
.modal-close { background: none; border: none; color: var(--cream-500); font-size: 1.4rem; line-height: 1; padding: 0 .2rem; transition: color var(--transition); }
.modal-close:hover { color: var(--cream-900); }
.modal form { padding: 1.1rem 1.4rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: .65rem; padding-top: .9rem; border-top: 1px solid var(--cream-200); margin-top: .9rem; }

/* Asset search */
.asset-search-wrap { position: relative; }
.asset-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid var(--cream-200); border-radius: var(--radius-sm); z-index: 400; max-height: 220px; overflow-y: auto; box-shadow: 0 4px 16px rgba(45,59,46,.12); }
.asset-suggestions[hidden] { display: none; }
.asset-suggestion-item { padding: .55rem .8rem; cursor: pointer; font-size: .83rem; display: flex; align-items: center; gap: .6rem; transition: background var(--transition); }
.asset-suggestion-item:hover { background: var(--cream-50); }
.suggestion-symbol { font-family: monospace; font-weight: 700; font-size: .8rem; min-width: 80px; color: var(--sage-800); }
.suggestion-name { color: var(--cream-500); font-size: .78rem; flex: 1; }
.suggestion-exch { font-size: .7rem; background: var(--cream-100); border-radius: 3px; padding: .1rem .35rem; color: var(--cream-700); }
.asset-selected { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; font-size: .83rem; }
.asset-selected[hidden] { display: none; }

/* Page actions */
.page-actions { display: flex; justify-content: flex-end; margin-bottom: 1.1rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.section-header h2 { font-size: .95rem; font-weight: 600; color: var(--cream-900); }
.filter-bar { margin-bottom: 1.1rem; }
.filter-form select { max-width: 320px; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--cream-500); font-size: .88rem; }
.link-primary { color: var(--terracotta); }

/* Maintenance publique */
.maint-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--sage-800); padding: 1.5rem; }
.maint-card { background: var(--cream-25); border-radius: var(--radius-lg); padding: 2.75rem 2.5rem; width: 100%; max-width: 480px; text-align: center; border-top: 4px solid var(--terracotta); }
.maint-icon { width: 72px; height: 72px; background: var(--tc-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.35rem; }
.maint-site { font-size: .8rem; color: var(--cream-500); margin-bottom: .4rem; letter-spacing: .04em; }
.maint-title { font-size: 1.6rem; font-weight: 700; color: var(--cream-900); margin-bottom: .6rem; }
.maint-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--negative-bg); color: var(--negative); border-radius: 20px; padding: 4px 14px; font-size: .8rem; font-weight: 500; margin-bottom: 1.25rem; }
.maint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--negative); flex-shrink: 0; }
.maint-divider { height: 2px; background: var(--terracotta); border-radius: 2px; margin-bottom: 1.25rem; opacity: .4; }
.maint-msg { font-size: .88rem; color: var(--cream-700); line-height: 1.75; }
.maint-footer { font-size: .72rem; color: var(--cream-300); letter-spacing: .04em; margin-top: 1.75rem; }

/* Deploy drop zone */
.drop-zone { border: 2px dashed var(--cream-200); border-radius: var(--radius); padding: 2.25rem 1.5rem; text-align: center; cursor: pointer; background: var(--cream-25); transition: border-color var(--transition), background var(--transition); }
.drop-zone:hover, .drop-zone.over { border-color: var(--terracotta); background: var(--tc-bg); }
.drop-zone-icon { color: var(--terracotta); margin-bottom: .65rem; }
.drop-zone-title { font-size: .9rem; font-weight: 500; color: var(--cream-900); margin-bottom: 3px; }
.drop-zone-sub { font-size: .8rem; color: var(--cream-500); }
.drop-zone-hint { font-size: .73rem; color: var(--cream-300); margin-top: 6px; }

/* Login */
.login-body { background: var(--sage-800); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-page { width: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { background: var(--cream-25); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: 2.25rem 2rem 1.75rem; width: 100%; max-width: 400px; box-shadow: 0 8px 32px rgba(28,42,29,.25); border-top: 4px solid var(--terracotta); }
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo-icon { width: 52px; height: 52px; background: var(--terracotta); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin: 0 auto .7rem; }
.login-logo-title { font-size: 1.15rem; font-weight: 700; color: var(--cream-900); }
.login-logo-sub { font-size: .77rem; color: var(--cream-500); }
.login-divider { height: 1px; background: var(--cream-200); margin-bottom: 1.4rem; }
.login-error { background: var(--negative-bg); border: 1px solid #d4896e; color: var(--negative); padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .83rem; margin-bottom: .9rem; }
.login-field { margin-bottom: .85rem; }
.login-field label { display: block; font-size: .8rem; font-weight: 500; color: var(--cream-700); margin-bottom: .38rem; }
.login-input-wrap { position: relative; }
.login-input-prefix { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--cream-300); pointer-events: none; }
.login-input-wrap input { padding-left: 2.1rem; padding-right: 2.4rem; }
.login-pw-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cream-300); display: flex; align-items: center; }
.login-row { display: flex; align-items: center; margin-bottom: 1.1rem; }
.login-remember { display: flex; align-items: center; gap: .4rem; font-size: .8rem; cursor: pointer; }
.login-remember input { width: auto; }
.login-btn { width: 100%; background: var(--terracotta); color: white; border: none; border-radius: var(--radius-sm); padding: .62rem; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background var(--transition); }
.login-btn:hover { background: var(--tc-dark); }
.login-footer { text-align: center; font-size: .73rem; color: var(--cream-300); margin-top: 1.1rem; }

/* Responsive */
@media (max-width: 768px) {
  .sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .25s ease; z-index: 200; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: block; }
  .hamburger { display: flex; }
  .sidebar-overlay.open { display: block; }
  .content { padding: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

/* stat-dot et stat-sub (dashboard admin) */
.stat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.stat-sub { font-size: .72rem; color: var(--cream-500); margin-top: .2rem; }
.welcome-text { font-size: .9rem; color: var(--cream-700); margin-bottom: 1.5rem; }

/* Styles boutons référence (toggle/delete users) */
.btn-warning  { display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;border:none;cursor:pointer;background:#b07a30;color:white;transition:background var(--transition); }
.btn-warning:hover { background:#8f6020; }
.btn-activate { display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;border:none;cursor:pointer;background:var(--positive);color:white;transition:background var(--transition); }
.btn-activate:hover { background:#3d5a27; }
.btn-danger.btn-action { display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;border:none;cursor:pointer;background:var(--negative);color:white;transition:background var(--transition); }
.btn-danger.btn-action:hover { background:#8f3320; }

/* modal-overlay (style référence) */
.modal-overlay { display:none;visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center;padding:1rem;overflow-y:auto;-webkit-overflow-scrolling:touch; }
.modal-overlay.open { display:flex;visibility:visible; }
.modal-overlay .modal { background:var(--cream-25);border:1px solid var(--cream-200);border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(45,59,46,.18); }
.modal-overlay .modal-header { display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem .9rem;border-bottom:1px solid var(--cream-200); }
.modal-overlay .modal-title { font-size:.95rem;font-weight:600;color:var(--cream-900); }
.modal-overlay .modal-close { background:none;border:none;color:var(--cream-500);cursor:pointer;display:flex;align-items:center;transition:color var(--transition); }
.modal-overlay .modal-close:hover { color:var(--cream-900); }
.modal-overlay .modal-footer { display:flex;justify-content:flex-end;gap:.65rem;padding:1rem 1.4rem 1.4rem; }
.modal-alert { padding:.55rem .85rem;border-radius:var(--radius-sm);font-size:.83rem;margin:.75rem 1.4rem 0; }
.modal-alert-error { background:var(--negative-bg);border:1px solid #d4896e;color:var(--negative); }
.modal-alert-success { background:var(--positive-bg);border:1px solid #9fc46e;color:var(--positive); }
.form-row-2 { display:grid;grid-template-columns:1fr 1fr;gap:.85rem; }
.form-field { display:flex;flex-direction:column;gap:.38rem;margin-bottom:.75rem; }
.form-field label { font-size:.8rem;font-weight:500;color:var(--cream-700); }
.field-hint { font-size:.72rem;color:var(--cream-500);font-weight:400;margin-left:.35rem; }
.pw-input-wrap { position:relative; }
.pw-input-wrap input { padding-right:2.4rem; }
.pw-toggle-sm { position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--cream-300);cursor:pointer;display:flex;align-items:center; }
.user-cell { display:flex;align-items:center;gap:.6rem; }
.user-avatar-sm { width:28px;height:28px;border-radius:50%;background:var(--terracotta);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:white;flex-shrink:0; }
.admin-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem; }

/* section-block (backup) */
.section-block { background:white;border:1px solid var(--cream-200);border-radius:var(--radius-lg);margin-bottom:1.5rem;overflow:hidden; }
.section-head { display:flex;align-items:center;gap:.65rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--cream-100);background:var(--cream-25); }
.section-num { width:26px;height:26px;border-radius:50%;background:var(--terracotta);color:white;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.section-head-title { font-size:.88rem;font-weight:500;color:var(--cream-900);flex:1; }
.section-body { padding:1.25rem; }
.backup-type-card { border:1px solid var(--cream-200);border-radius:var(--radius);padding:.85rem;cursor:pointer;background:var(--cream-25);transition:border-color var(--transition),background var(--transition); }
.backup-type-card:hover { border-color:var(--terracotta);background:var(--tc-bg); }
.backup-type-card.selected { border:2px solid var(--terracotta) !important;background:var(--tc-bg); }

/* Cards sélection portefeuille (page transactions) */
.p-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .85rem; margin-bottom: .85rem; }
.p-card { display: block; background: white; border: 1px solid var(--cream-200); border-radius: var(--radius); padding: .65rem 1rem; border-left: 3px solid var(--cream-200); text-decoration: none; color: var(--cream-900); transition: border-color var(--transition), background var(--transition); max-width: 75%; }
.p-card:hover { border-left-color: var(--tc-light); text-decoration: none; color: var(--cream-900); }
.p-card.on { border-left-color: var(--terracotta); background: var(--tc-bg); }
.p-card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.p-card-name { font-size: .95rem; font-weight: 600; }
.p-card-sub { font-size: .7rem; color: var(--cream-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }

/* ── Cartes portefeuilles (index) ── */
.portfolio-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 1.25rem; }
.portfolio-card-full { background: white; border: 1px solid var(--cream-200); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition); }
.portfolio-card-full:hover { box-shadow: 0 4px 16px rgba(45,59,46,.1); }
.portfolio-card-header-link { display: block; padding: 1.1rem 1.25rem .85rem; text-decoration: none; color: var(--cream-900); background: var(--cream-25); border-bottom: 1px solid var(--cream-100); }
.portfolio-card-header-link:hover { background: var(--tc-bg); }
.portfolio-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.portfolio-card-name { font-size: 1rem; font-weight: 600; color: var(--cream-900); }
.portfolio-card-meta { font-size: .75rem; color: var(--cream-500); }
.portfolio-card-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-bottom: 1px solid var(--cream-100); }
.pcs { padding: .75rem .85rem; border-right: 1px solid var(--cream-100); }
.pcs:last-child { border-right: none; }
.pcs-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cream-500); margin-bottom: .25rem; }
.pcs-value { font-size: .88rem; font-weight: 600; color: var(--cream-900); }
.portfolio-card-actions { display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; background: var(--cream-25); }
.portfolio-card-actions .btn-danger { margin-left: auto; }

/* ── Toggle switch ── */
.toggle-switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.toggle-track { position: absolute; inset: 0; background: var(--cream-200); border-radius: 18px; transition: background var(--transition); cursor: pointer; }
.toggle-track::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
#showClosed:checked + .toggle-track { background: var(--terracotta); }
#showClosed:checked + .toggle-track::before { transform: translateX(16px); }

/* ── Filtres portefeuille show ── */
.filter-btn { background: white; border: 1px solid var(--cream-200); color: var(--cream-700); border-radius: var(--radius-sm); padding: .28rem .7rem; font-size: .78rem; cursor: pointer; transition: all var(--transition); }
.filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filter-btn.active { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.btn-link { background: none; border: none; cursor: pointer; color: var(--terracotta); font-size: .8rem; font-weight: 500; padding: 0; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ── Lien Paramètres sidebar ── */
.settings-link { display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;font-size:.8rem;color:var(--sage-200);text-decoration:none;border-radius:var(--radius-sm);margin:0 .5rem .25rem;transition:background var(--transition),color var(--transition); }
.settings-link:hover, .settings-link.active { background:rgba(255,255,255,.08);color:white; }

/* ── Déconnexion option B ── */
.logout-link-outline { display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;margin:.3rem 0 .7rem;font-size:.8rem;font-weight:500;color:var(--terracotta);text-decoration:none;border:1px solid rgba(200,113,74,.4);border-radius:6px;transition:background var(--transition),border-color var(--transition); }
.logout-link-outline:hover { background:rgba(200,113,74,.12);border-color:var(--terracotta); }
.logout-link-outline svg { stroke:var(--terracotta); }

/* ── Positions ouvertes : bordure gauche terracotta ── */
.row-position td:first-child { border-left:3px solid var(--terracotta); }
.row-closed td:first-child    { border-left:3px solid transparent; }