/* ============================================================
   PORTFOLIO TRACKER — CSS GLOBAL COMPLET
   Tout le CSS est ici. Aucun <style> dans les pages HTML.
   Mobile-first — optimise smartphone
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x:hidden casse position:fixed sur iOS (le header fixe se remet a
   defiler). clip clippe sans creer de conteneur de defilement. hidden reste
   en repli pour les navigateurs sans support de clip. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior: none;
    touch-action: manipulation;
}

:root {
    --bg:#0f1117; --bg2:#1a1d27; --bg3:#242836; --border:#2d3348;
    --text:#e8ecf4; --text2:#8892aa; --text3:#4a5470;
    --accent:#4f7aff; --green:#22d17a; --red:#ff4d6d; --orange:#ffaa3b; --purple:#a78bfa;
    --radius:8px; --radius2:12px; --nav-h:75px; --header-h:48px; --content-pad:10px;
}
[data-theme="light"] {
    --bg:#f0f4ff; --bg2:#ffffff; --bg3:#e4eaf8; --border:#d1daf0;
    --text:#0d1526; --text2:#4a5878; --text3:#8b9cc8;
    --accent:#3b63e8; --green:#0fa05a; --red:#e02050;
}

html { font-size:15px; }
body {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg); color:var(--text); min-height:100vh;
    -webkit-font-smoothing:antialiased; touch-action:manipulation;
}

/* ============================================================ LAYOUT */

/* PAS de display:flex sur #app — cause du debordement horizontal */
#app { min-height:100vh; }

.sidebar {
    width:240px; background:var(--bg2); border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; z-index:300; overflow-y:auto; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateX(-100%); transition:transform 0.25s ease;
}
.sidebar.open { transform:translateX(0); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:299; }
.sidebar-overlay.open { display:block; }
.sidebar-logo { padding:16px 14px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px; }
.sidebar-logo span { font-size:20px; }
.nav-group { padding:6px; }
.nav-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text3); padding:10px 8px 4px; }
.nav-link {
    display:flex; align-items:center; gap:9px; padding:10px; border-radius:var(--radius);
    color:var(--text2); font-size:14px; font-weight:500;
    cursor:pointer; border:none; background:none; width:100%; text-align:left;
    transition:background 0.15s,color 0.15s; min-height:44px;
}
.nav-link:hover  { background:var(--bg3); color:var(--text); }
.nav-link.active { background:rgba(79,122,255,0.15); color:var(--accent); font-weight:600; }
.nav-link .icon  { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.sidebar-footer { margin-top:auto; padding:10px; border-top:1px solid var(--border); }
.user-block { display:flex; align-items:center; gap:9px; padding:8px; border-radius:var(--radius); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.user-name { font-size:13px; font-weight:600; }
.user-role { font-size:11px; color:var(--text3); }

.main { display:flex; flex-direction:column; min-height:100vh; }
.topbar { display:none; }
/* Le header est fixe : sans padding-top de safe-area il passe sous l'horloge
   de l'iPhone en mode plein ecran, et devient incliquable. */
.mobile-header { height:calc(var(--header-h) + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); display:flex; align-items:center; justify-content:space-between; padding-left:12px; padding-right:12px; background:var(--bg2); border-bottom:1px solid var(--border); position:fixed; top:0; left:0; right:0; z-index:200; flex-shrink:0; }
.mobile-title { font-size:15px; font-weight:700; }
.topbar-btn { width:36px; height:36px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg3); color:var(--text2); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:background 0.15s; flex-shrink:0; min-width:36px; }
.topbar-btn:hover { background:var(--border); color:var(--text); }
.content { padding:var(--content-pad); padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + var(--content-pad)); padding-bottom:calc(var(--nav-h) + var(--content-pad) + env(safe-area-inset-bottom,0px)); flex:1; }
.mobile-nav { position:fixed; bottom:0; left:0; right:0; height:var(--nav-h); background:var(--bg2); border-top:1px solid var(--border); display:flex; z-index:200; padding-bottom:env(safe-area-inset-bottom,0); }
.mnav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:none; color:var(--text3); cursor:pointer; font-family:inherit; padding:5px 3px; transition:color 0.15s; min-height:44px; }
.mnav-btn.active { color:var(--accent); }
.mnav-btn:active { opacity:0.7; }
.mnav-icon  { font-size:21px; line-height:1; }
.mnav-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; line-height:1; }
/* Menu secondaire */
.smenu-sheet { position:fixed; bottom:0; left:0; right:0; background:var(--bg2); border-top:1px solid var(--border); border-radius:var(--radius2) var(--radius2) 0 0; z-index:260; padding:8px 12px calc(12px + env(safe-area-inset-bottom,0)); transform:translateY(100%); transition:transform 0.25s ease; }
.smenu-sheet.open { transform:translateY(0); }
.smenu-handle { width:36px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 12px; }
.smenu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.smenu-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-family:inherit; color:var(--text2); transition:all 0.15s; }
.smenu-btn:active { opacity:0.7; }
.smenu-btn.smenu-active { border-color:var(--accent); color:var(--accent); background:rgba(79,122,255,0.1); }
.smenu-icon  { font-size:20px; line-height:1; }
.smenu-label { font-size:10px; font-weight:600; text-align:center; line-height:1.2; }
.smenu-user  { display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--border); }

/* ============================================================ COMPOSANTS */

.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:12px; margin-bottom:10px; }
.card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text2); margin-bottom:10px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:6px; }

.kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.kpi  { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:10px 12px; }
.kpi-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text3); margin-bottom:4px; }
.kpi-value { font-size:16px; font-weight:700; letter-spacing:-0.3px; line-height:1.2; }
.kpi-sub   { font-size:10px; color:var(--text2); margin-top:2px; line-height:1.3; }

.grid-desktop-2 { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
.grid-desktop-3 { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
.grid-2 { display:grid; grid-template-columns:1fr; gap:10px; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%; }
table { width:100%; min-width:0; border-collapse:collapse; font-size:12px; }
thead th { padding:8px 10px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text3); border-bottom:1px solid var(--border); white-space:normal; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:active { background:var(--bg3); }
tbody td { padding:9px 10px; vertical-align:middle; }
.hide-mobile { display:none !important; }

.green { color:var(--green); } .red { color:var(--red); } .accent { color:var(--accent); }
.muted { color:var(--text2); } .bold { font-weight:700; }
.mono  { font-family:'SF Mono','Monaco',monospace; font-size:11px; }

.pill { display:inline-flex; align-items:center; padding:2px 7px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; }
.pill-blue   { background:rgba(79,122,255,0.15);  color:var(--accent); }
.pill-green  { background:rgba(34,209,122,0.13);  color:var(--green); }
.pill-red    { background:rgba(255,77,109,0.13);  color:var(--red); }
.pill-orange { background:rgba(255,170,59,0.13);  color:var(--orange); }
.pill-gray   { background:var(--bg3); color:var(--text2); }
.pill-purple { background:rgba(167,139,250,0.13); color:var(--purple); }

.btn { display:inline-flex; align-items:center; gap:5px; padding:9px 14px; border-radius:var(--radius); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:opacity 0.15s,transform 0.1s; font-family:inherit; white-space:nowrap; min-height:38px; }
.btn:hover   { opacity:0.85; }
.btn:active  { transform:scale(0.97); }
.btn-primary   { background:var(--accent); color:#fff; }
.btn-secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
.btn-danger    { background:rgba(255,77,109,0.15); color:var(--red); }
.btn-sm   { padding:6px 10px; font-size:12px; min-height:32px; }
.btn-icon { width:34px; height:34px; padding:0; justify-content:center; min-height:34px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

.form-group { margin-bottom:12px; }
.form-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text2); margin-bottom:4px; }
.form-input,.form-select,.form-textarea { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:10px 11px; border-radius:var(--radius); font-size:14px; font-family:inherit; outline:none; transition:border-color 0.15s; -webkit-appearance:none; min-height:42px; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--accent); }
.form-input::placeholder { color:var(--text3); }
.form-textarea { resize:vertical; min-height:70px; }
.form-select { cursor:pointer; }
.form-error { font-size:12px; color:var(--red); margin-top:4px; }

.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:500; display:flex; align-items:flex-end; justify-content:center; padding:0; }
.modal-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2) var(--radius2) 0 0; width:100%; max-height:92vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom,0); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 14px; border-bottom:1px solid var(--border); font-size:15px; font-weight:700; position:relative; }
.modal-head::before { content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:36px; height:4px; background:var(--border); border-radius:2px; }
.modal-body { padding:14px 16px; }
.modal-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.modal-close { background:none; border:none; color:var(--text2); font-size:20px; cursor:pointer; padding:4px; }
.modal-close:hover { color:var(--red); }

.alert { padding:10px 12px; border-radius:var(--radius); margin-bottom:10px; font-size:12px; line-height:1.4; }
.alert-error   { background:rgba(255,77,109,0.13); color:var(--red); border:1px solid rgba(255,77,109,0.3); }
.alert-success { background:rgba(34,209,122,0.13); color:var(--green); border:1px solid rgba(34,209,122,0.3); }
.alert-info    { background:rgba(79,122,255,0.13); color:var(--accent); border:1px solid rgba(79,122,255,0.3); }
.alert-warning { background:rgba(255,170,59,0.13); color:var(--orange); border:1px solid rgba(255,170,59,0.3); }

.toast-wrap { position:fixed; bottom:calc(var(--nav-h) + 8px); right:10px; z-index:9999; display:flex; flex-direction:column; gap:6px; max-width:calc(100vw - 20px); }
.toast { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:9px 12px; font-size:12px; box-shadow:0 4px 20px rgba(0,0,0,0.4); display:flex; align-items:center; gap:8px; max-width:280px; animation:slideIn 0.2s ease; }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
.toast.info    { border-left:3px solid var(--accent); }

.loader  { display:flex; align-items:center; justify-content:center; padding:30px; }
.spinner { width:24px; height:24px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }

.empty { text-align:center; padding:28px 16px; color:var(--text2); }
.empty-icon { font-size:30px; margin-bottom:8px; opacity:0.4; }
.empty p { font-size:13px; }

.pagination { display:flex; align-items:center; gap:4px; padding:10px 0; justify-content:center; flex-wrap:wrap; }
.page-btn { width:32px; height:32px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg3); color:var(--text2); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
.page-btn:hover,.page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.filters { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:8px 10px; margin-bottom:10px; display:flex; flex-wrap:nowrap; gap:6px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.filter-input { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:7px 10px; border-radius:var(--radius); font-size:13px; font-family:inherit; outline:none; -webkit-appearance:none; white-space:nowrap; flex-shrink:0; min-height:36px; min-width:0; }
.filter-input:focus { border-color:var(--accent); }

.tab-bar { display:flex; margin-bottom:12px; border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn { padding:8px 14px; background:none; border:none; cursor:pointer; font-size:12px; font-weight:600; color:var(--text2); border-bottom:2px solid transparent; white-space:nowrap; font-family:inherit; flex-shrink:0; min-height:38px; }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

.ticker-dropdown { position:absolute; top:100%; left:0; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); z-index:400; max-height:220px; overflow-y:auto; }
.ticker-item { padding:10px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); }
.ticker-item:active { background:var(--bg3); }
.ticker-item:last-child { border-bottom:none; }

/* ============================================================ DASHBOARD */

.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.hero-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:14px 14px 12px; position:relative; overflow:hidden; }
.hero-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius2) var(--radius2) 0 0; }
.hero-card.accent::before { background:var(--accent); }
.hero-card.green::before  { background:var(--green); }
.hero-card.orange::before { background:var(--orange); }
.hero-card-label   { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text3); margin-bottom:6px; }
.hero-card-value   { font-size:18px; font-weight:800; letter-spacing:-0.5px; line-height:1.1; }
.hero-card-sub     { font-size:11px; margin-top:4px; color:var(--text2); line-height:1.3; }
.hero-card-sub .tag { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; }
.hero-invested     { font-size:10px; color:var(--text3); margin-top:3px; }
.tag-green { background:rgba(34,209,122,0.15); color:var(--green); }
.tag-red   { background:rgba(255,77,109,0.15);  color:var(--red); }
.tag-gray  { background:var(--bg3); color:var(--text2); }

.alloc-card   { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:14px; margin-bottom:10px; }
.alloc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.alloc-title  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text2); }
.alloc-rows   { display:flex; flex-direction:column; gap:8px; }
.alloc-row    { display:flex; align-items:center; gap:10px; }
.alloc-dot    { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.alloc-name   { flex:1; font-size:12px; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alloc-bar-wrap { flex:1; background:var(--bg3); border-radius:3px; height:5px; min-width:40px; }
.alloc-bar    { height:5px; border-radius:3px; transition:width 0.4s ease; }
.alloc-pct    { font-size:11px; font-weight:700; color:var(--text2); min-width:36px; text-align:right; }
.alloc-val    { font-size:11px; color:var(--text3); text-align:right; }

.accounts-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.account-card  { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:12px; cursor:pointer; transition:border-color 0.15s,transform 0.1s; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.account-card:active { transform:scale(0.97); }
.account-card:hover  { border-color:var(--accent); }
.account-card-accent { position:absolute; top:0; left:0; right:0; height:2px; }
.account-card-name   { font-size:11px; font-weight:700; color:var(--text); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-card-value  { font-size:16px; font-weight:800; letter-spacing:-0.3px; }
.account-card-perf   { font-size:11px; margin-top:3px; font-weight:600; }
.account-card-arrow  { position:absolute; bottom:10px; right:10px; color:var(--text3); font-size:14px; }

.back-btn { display:flex; align-items:center; gap:6px; color:var(--accent); font-size:13px; font-weight:600; background:none; border:none; cursor:pointer; padding:0; margin-bottom:14px; font-family:inherit; }
.account-detail-hero  { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:16px; margin-bottom:10px; }
.account-detail-name  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text3); margin-bottom:6px; }
.account-detail-value { font-size:26px; font-weight:800; letter-spacing:-0.5px; margin-bottom:10px; }
.period-row { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.period-row::-webkit-scrollbar { display:none; }
.period-btn { padding:4px 10px; font-size:11px; font-weight:600; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--text2); cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0; transition:all 0.15s; }
.period-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.period-pnl { font-size:14px; font-weight:700; white-space:nowrap; }

.asset-list { display:flex; flex-direction:column; }
.asset-item { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.asset-item:last-child { border-bottom:none; }
.asset-item:active { background:var(--bg3); }
.asset-icon  { width:36px; height:36px; border-radius:10px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--accent); flex-shrink:0; }
.asset-info  { flex:1; min-width:0; }
.asset-name  { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset-isin  { font-size:10px; color:var(--text3); margin-top:1px; }
.asset-right { text-align:right; flex-shrink:0; }
.asset-value { font-size:13px; font-weight:700; }
.asset-perf  { font-size:11px; font-weight:600; margin-top:2px; }

.asset-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:600; display:flex; align-items:flex-end; }
.asset-modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2) var(--radius2) 0 0; width:100%; padding:20px 20px 32px; animation:slideUp 0.25s ease; position:relative; }
.asset-modal-handle { width:36px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.asset-modal-ticker { font-size:18px; font-weight:800; letter-spacing:-0.5px; }
.asset-modal-isin   { font-size:11px; color:var(--text3); margin-top:2px; margin-bottom:12px; }
.asset-modal-value  { font-size:26px; font-weight:800; letter-spacing:-1px; margin-bottom:4px; }
.asset-modal-pnl    { font-size:14px; font-weight:700; margin-bottom:20px; }
.asset-modal-grid   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.asset-modal-item   { background:var(--bg3); border-radius:var(--radius); padding:10px 12px; }
.asset-modal-item-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text3); margin-bottom:4px; }
.asset-modal-item-value { font-size:14px; font-weight:700; }
.asset-modal-close  { position:absolute; top:16px; right:16px; background:var(--bg3); border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:16px; color:var(--text2); display:flex; align-items:center; justify-content:center; }

/* ============================================================ PORTFOLIO */

.selection-bar { position:fixed; bottom:var(--nav-h); left:0; right:0; background:var(--accent); color:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; z-index:190; box-shadow:0 -4px 20px rgba(0,0,0,0.3); transform:translateY(100%); transition:transform 0.2s ease; font-size:12px; }
.selection-bar.visible { transform:translateY(0); }
.sel-kpis  { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.sel-kpi   { font-size:12px; }
.sel-kpi span { font-weight:700; font-size:13px; margin-left:4px; }
.sel-actions { display:flex; gap:8px; align-items:center; }
.sel-count   { font-weight:700; font-size:13px; white-space:nowrap; }
.sel-clear   { background:rgba(255,255,255,0.2); border:none; color:#fff; padding:6px 12px; border-radius:var(--radius); cursor:pointer; font-size:12px; font-family:inherit; }
.sel-clear:hover { background:rgba(255,255,255,0.35); }
.row-check   { width:16px; height:16px; cursor:pointer; accent-color:var(--accent); }
tr.selected-row { background:rgba(79,122,255,0.08) !important; }
tr.deleted-row  { opacity:0.5; }

/* ============================================================ TRANSACTIONS */

.sort-btn { cursor:pointer; user-select:none; }
.sort-btn:hover   { color:var(--accent); }
.sort-asc::after  { content:' ▲'; font-size:10px; color:var(--accent); }
.sort-desc::after { content:' ▼'; font-size:10px; color:var(--accent); }

/* ============================================================ ANALYSE */

.account-legend { display:flex; flex-direction:column; gap:6px; padding:8px 0; width:100%; min-width:0; }
.account-legend-item { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:var(--radius); cursor:pointer; transition:background 0.15s; font-size:12px; user-select:none; }
.account-legend-item:hover  { background:var(--bg3); }
.account-legend-item.active { background:var(--bg3); font-weight:700; }
.account-legend-item.dimmed { opacity:0.35; }
.account-legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.account-legend-name { flex:1; }
.account-legend-val  { font-weight:600; color:var(--text2); }
.chart-account-wrap  { display:flex; flex-direction:column; gap:8px; }
.chart-account-wrap #chart-account { width:100%; min-width:0; }

/* ============================================================ AJUSTEMENTS */

.split-card    { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:14px; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
.split-icon    { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.split-icon.split-type   { background:rgba(79,122,255,0.15); }
.split-icon.reverse-type { background:rgba(255,77,109,0.15); }
.split-info    { flex:1; min-width:0; }
.split-ticker  { font-size:14px; font-weight:700; }
.split-date    { font-size:11px; color:var(--text3); margin-top:1px; }
.split-ratio   { font-size:12px; color:var(--text2); margin-top:3px; }
.split-actions { display:flex; gap:6px; flex-shrink:0; }

/* ============================================================ ANIMATIONS */

@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes slideIn { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* ============================================================ DESKTOP >= 769px */

@media (min-width:769px) {
    /* La barre du bas n'existe pas ici (.mobile-nav est masquee), mais --nav-h sert
       encore de marge basse aux toasts et a la barre de selection. On la fige a son
       ancienne valeur : l'agrandissement de 30% ne concerne que le smartphone, et
       sans ca les toasts remonteraient de 17px sur desktop sans raison visible. */
    :root { --nav-h:58px; }

    .sidebar { transform:translateX(0); width:220px; }
    .sidebar-overlay { display:none !important; }
    .mobile-header { display:none; }
    .mobile-nav    { display:none; }
    .topbar { display:flex; height:50px; background:var(--bg2); border-bottom:1px solid var(--border); align-items:center; padding:0 20px; gap:12px; position:sticky; top:0; z-index:90; }
    .topbar-title { font-size:16px; font-weight:700; flex:1; }
    .main    { margin-left:220px; }
    .content { padding:18px 20px; padding-bottom:18px; }

    .kpis   { grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
    .kpi    { padding:14px 16px; }
    .kpi-label { font-size:10px; } .kpi-value { font-size:20px; } .kpi-sub { font-size:12px; }

    .grid-desktop-2 { grid-template-columns:1fr 1fr; gap:14px; }
    .grid-desktop-3 { grid-template-columns:1fr 1fr 1fr; gap:14px; }
    .grid-2 { grid-template-columns:1fr 1fr; gap:12px; }

    table { font-size:13px; }
    thead th { padding:9px 12px; font-size:11px; white-space:nowrap; }
    tbody td { padding:10px 12px; }
    tbody tr:hover { background:var(--bg3); }
    .hide-mobile { display:table-cell !important; }

    .card { padding:16px; margin-bottom:14px; }
    .card-title { font-size:12px; margin-bottom:12px; }

    .modal-bg  { align-items:center; padding:16px; }
    .modal-box { border-radius:var(--radius2); max-width:520px; padding-bottom:0; }
    .modal-head::before { display:none; }
    .modal-head { padding:16px 20px; } .modal-body { padding:16px 20px; } .modal-foot { padding:12px 20px; }

    .filters { flex-wrap:wrap; overflow-x:visible; padding:10px 14px; }
    .toast-wrap { bottom:16px; right:16px; }
    .btn { padding:7px 14px; min-height:34px; }
    .btn-sm { padding:5px 10px; min-height:28px; }
    .btn-icon { width:30px; height:30px; min-height:30px; }

    .hero-grid { grid-template-columns:1fr 1fr 1fr; }
    .hero-card-value { font-size:22px; }
    .accounts-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }

    .chart-account-wrap { flex-direction:row; align-items:center; gap:16px; }
    .chart-account-wrap #chart-account { flex:1; }
    .account-legend { width:auto; }

    .selection-bar { bottom:0; }
}

@media (max-width:380px) {
    .hero-card-value    { font-size:15px; }
    .account-card-value { font-size:14px; }
}

/* ============================================================ SCROLLBAR */

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

/* ============================================================ LOGIN */

.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:16px; }
.login-box  { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:24px 20px; width:100%; max-width:380px; }
.login-logo { text-align:center; margin-bottom:20px; }
.login-logo h1 { font-size:18px; font-weight:700; margin-top:8px; }
.login-logo p  { font-size:13px; color:var(--text2); margin-top:4px; }

/* ApexCharts responsive */
.apexcharts-canvas,.apexcharts-canvas svg,.apexcharts-canvas > div { max-width:100% !important; }
[id^="chart-"] { overflow:hidden; width:100%; max-width:100%; }
/* ============================================================ ZOOM DESACTIVE
   Voir skill composants-ui-reutilisables : 3 verrous obligatoires
   (meta viewport + touch-action:manipulation + gesture* dans app.js).
   Sous 640px les champs passent a 16px, sinon iOS zoome tout seul a la mise au point. */
@media (max-width:640px) {
    .form-input, .form-select, .form-textarea, .filter-input, input, select, textarea { font-size:16px; }
}

/* ============================================================ BANDEAU HORS LIGNE
   Distinct du bandeau serveur : ici c'est l'appareil qui n'a pas de reseau.
   Les pages restent consultables grace au cache du service worker. */
.offline-bar {
    position:fixed; top:0; left:0; right:0; z-index:2000;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:8px 14px; padding-top:calc(8px + env(safe-area-inset-top));
    background:var(--text3); color:#fff;
    font-size:12.5px; font-weight:600; line-height:1.35; text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
}