:root {
  --bg:#eef4fb;--sidebar:#e4eef8;--sidebar-border:#d0e1f3;
  --surface:#ffffff;--border:#ccdded;
  --primary:#3575cc;--primary-hover:#2861b2;--primary-pale:#e8f1fd;--primary-light:#c6daf7;
  --text:#172840;--text-2:#4a6a8a;--text-3:#8aaac6;
  --line-color:#b8cfea;--past-opacity:0.42;
  --urgent:#c93030;--urgent-bg:#fef2f2;--urgent-border:#fad4d4;
  --warn:#c97020;--warn-bg:#fff7ed;--warn-border:#f9d8a8;
  --done:#98b8d0;--radius:10px;--radius-sm:7px;
  --shadow:0 1px 4px rgba(30,70,130,.07),0 4px 14px rgba(30,70,130,.06);
  --shadow-hover:0 3px 10px rgba(30,70,130,.12),0 8px 24px rgba(30,70,130,.08);
  --trans:all .18s cubic-bezier(.4,0,.2,1);
}
:root[data-theme="orange"]{--bg:#fdf4ec;--sidebar:#f8ede0;--sidebar-border:#f0d8c0;--surface:#ffffff;--border:#e8c9a8;--primary:#cc6820;--primary-hover:#b05515;--primary-pale:#fdf0e0;--primary-light:#f5d0a0;--text:#2e1a08;--text-2:#7a4820;--text-3:#c09060;--line-color:#e8c090;--done:#c8a878;--shadow:0 1px 4px rgba(130,70,30,.07),0 4px 14px rgba(130,70,30,.06);--shadow-hover:0 3px 10px rgba(130,70,30,.12),0 8px 24px rgba(130,70,30,.08)}
:root[data-theme="green"]{--bg:#eef6f0;--sidebar:#e0f0e4;--sidebar-border:#c4e2ca;--surface:#ffffff;--border:#b4d8bc;--primary:#2e7d4f;--primary-hover:#1e6038;--primary-pale:#e2f4e7;--primary-light:#a8d8b8;--text:#0e2818;--text-2:#3a6a45;--text-3:#74a882;--line-color:#8cc8a0;--done:#7cb890;--shadow:0 1px 4px rgba(20,80,40,.07),0 4px 14px rgba(20,80,40,.06);--shadow-hover:0 3px 10px rgba(20,80,40,.12),0 8px 24px rgba(20,80,40,.08)}
:root[data-theme="rose"]{--bg:#fdf0f4;--sidebar:#f8e2ec;--sidebar-border:#f0c8da;--surface:#ffffff;--border:#e8b4cc;--primary:#c0306a;--primary-hover:#a01f58;--primary-pale:#fce6f0;--primary-light:#efacc8;--text:#2e0818;--text-2:#823060;--text-3:#c07898;--line-color:#e898bc;--done:#d880a8;--shadow:0 1px 4px rgba(130,20,70,.07),0 4px 14px rgba(130,20,70,.06);--shadow-hover:0 3px 10px rgba(130,20,70,.12),0 8px 24px rgba(130,20,70,.08)}
.theme-picker{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.theme-swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:var(--trans);position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.theme-swatch:hover{transform:scale(1.12)}
.theme-swatch.active{border-color:var(--text)}
.theme-swatch.active::after{content:'✓';font-size:14px;font-weight:800;color:white;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.ts-blue{background:linear-gradient(135deg,#4a8de0,#2f67c0)}.ts-orange{background:linear-gradient(135deg,#e8842a,#c05010)}.ts-green{background:linear-gradient(135deg,#40a060,#1e7040)}.ts-rose{background:linear-gradient(135deg,#e04888,#b02060)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Instrument Sans',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:flex}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}

/* ── LOGIN SCREEN ── */
#loginScreen{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
.login-card{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:36px 40px 40px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(10,30,70,.13),0 4px 16px rgba(10,30,70,.07);animation:modalIn .25s cubic-bezier(.34,1.3,.64,1)}
.login-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.03em;margin-bottom:4px;display:flex;align-items:center;gap:7px}
.login-brand-dot{color:var(--primary);font-size:26px;line-height:1}
.login-sub{font-size:13px;color:var(--text-3);margin-bottom:28px}
.login-pin-row{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.pin-digit{width:52px;height:56px;border:2px solid var(--border);border-radius:10px;background:var(--bg);font-size:22px;font-weight:700;text-align:center;color:var(--text);outline:none;transition:var(--trans);letter-spacing:2px;-webkit-text-security:disc}
.pin-digit:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-pale)}
.login-error{font-size:12px;color:var(--urgent);text-align:center;min-height:18px;margin-bottom:10px}
.login-hint{font-size:11px;color:var(--text-3);text-align:center;margin-top:8px}
/* loading overlay */
#loadingOverlay{position:fixed;inset:0;z-index:400;background:rgba(238,244,251,.75);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center}
.loader{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.role-badge{font-size:9.5px;padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.04em;background:var(--primary-pale);color:var(--primary);border:1px solid var(--primary-light)}
.role-badge.ec{background:#e6f4ea;color:#2d7a3a}.role-badge.as{background:#fff0e0;color:#c06020}

/* ═══ SIDEBAR ═══ */
.sidebar{width:280px;flex-shrink:0;height:100vh;overflow-y:auto;background:var(--sidebar);border-right:1.5px solid var(--sidebar-border);display:flex;flex-direction:column}
.sidebar-header{padding:16px 16px 13px;border-bottom:1px solid var(--sidebar-border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sidebar);position:sticky;top:0;z-index:20}
.app-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.03em;display:flex;align-items:center;gap:5px}
.app-brand-dot{color:var(--primary);font-size:20px;line-height:1}
.user-btn{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;cursor:pointer;transition:var(--trans);font-family:inherit;font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap;min-width:0;max-width:130px}
.user-btn:hover{background:var(--primary-pale);border-color:var(--primary-light);color:var(--primary)}
.user-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;flex-shrink:0;transition:var(--trans)}
.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-section{padding:13px 15px;border-bottom:1px solid var(--sidebar-border)}
.sb-section:last-of-type{border-bottom:none;flex:1}
.sb-title{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.upcoming-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:var(--surface);border-radius:var(--radius-sm);margin-bottom:6px;border-left:3px solid var(--primary-light);box-shadow:var(--shadow);transition:var(--trans)}
.upcoming-item:last-child{margin-bottom:0}
.upcoming-item.urgent{border-left-color:var(--urgent);background:var(--urgent-bg)}
.upcoming-item.warning{border-left-color:var(--warn);background:var(--warn-bg)}
.upco-date{font-size:10px;font-weight:700;color:var(--primary);background:var(--primary-pale);padding:2px 6px;border-radius:10px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.upcoming-item.urgent .upco-date{color:var(--urgent);background:var(--urgent-border)}
.upcoming-item.warning .upco-date{color:var(--warn);background:var(--warn-border)}
.upco-info{flex:1;min-width:0}
.upco-dossier{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upco-sub{font-size:10px;color:var(--text-3);margin-top:1px}
.no-item{font-size:12px;color:var(--text-3);font-style:italic;padding:4px 0 2px}
.toggle-row{display:flex;align-items:center;gap:9px;padding:7px 2px;cursor:pointer;transition:var(--trans);border-radius:var(--radius-sm);position:relative}
.toggle-row:hover{background:rgba(53,117,204,.06)}
.toggle-box{width:15px;height:15px;border:2px solid var(--border);border-radius:4px;flex-shrink:0;background:var(--surface);display:flex;align-items:center;justify-content:center;transition:var(--trans)}
.toggle-box.on{background:var(--primary);border-color:var(--primary)}
.toggle-box.on::after{content:'';display:block;width:7px;height:4.5px;border-left:1.8px solid white;border-bottom:1.8px solid white;transform:translateY(-1px) rotate(-45deg)}
.toggle-info{flex:1;min-width:0}
.toggle-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toggle-sub{font-size:10px;color:var(--text-3)}
.toggle-del{opacity:0;background:none;border:none;color:var(--text-3);cursor:pointer;font-size:15px;padding:2px 5px;border-radius:4px;transition:var(--trans);line-height:1}
.toggle-row:hover .toggle-del{opacity:1}
.d-card:hover .toggle-del{opacity:1}
.toggle-del:hover{background:var(--urgent-bg);color:var(--urgent)}

/* ═══ MAIN ═══ */
.main{flex:1;height:100vh;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.main-nav{flex-shrink:0;height:52px;background:var(--surface);border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 24px;gap:16px;z-index:10}
.nav-left{display:flex;align-items:center;gap:14px;min-width:0}
.nav-tabs{display:flex;gap:4px;background:var(--bg);padding:3px;border-radius:8px;border:1.5px solid var(--border)}
.nav-tab{padding:5px 14px;border:none;border-radius:6px;font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:var(--trans);background:transparent;color:var(--text-2);white-space:nowrap}
.nav-tab.active{background:var(--surface);color:var(--primary);font-weight:700;box-shadow:0 1px 5px rgba(30,70,130,.1)}
.nav-tab:hover:not(.active){color:var(--primary);background:rgba(53,117,204,.06)}
.back-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);transition:var(--trans);white-space:nowrap}
.back-btn:hover{background:var(--primary-pale);color:var(--primary);border-color:var(--primary-light)}
.nav-crumb{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.nav-crumb-sep{color:var(--text-3);font-size:16px;margin:0 2px}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* MAIN BODY */
.main-body{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}
.main-body.split{overflow:hidden;display:flex}
#clientDetailView,#contactView{flex:1;min-width:0;position:relative}

/* TIMELINE */
#timeline{padding:0 56px 100px 48px}
#timeline .view-header{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:32px;padding-bottom:16px;margin-bottom:0;box-shadow:0 1px 0 var(--border)}
.month-section{display:flex;position:relative}
.month-label{width:140px;flex-shrink:0;text-align:right;padding-right:24px;padding-top:9px}
.month-spine{width:2px;flex-shrink:0;background:var(--line-color);position:relative}
.month-section:first-child .month-spine{background:linear-gradient(to bottom,transparent 0,var(--line-color) 52px,var(--line-color) 100%)}
.month-section:last-child .month-spine{background:linear-gradient(to bottom,var(--line-color) 0,var(--line-color) calc(100% - 52px),transparent 100%)}
.month-dot{position:absolute;top:10px;left:-6px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2.5px solid var(--line-color);transition:var(--trans);z-index:2}
.month-section.is-current .month-dot{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-pale)}
.month-section.is-past .month-dot{background:var(--line-color)}
.month-section.is-past{opacity:var(--past-opacity)}
.m-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.2}
.m-year{font-size:11px;color:var(--text-3);font-weight:500;margin-top:1px}
.m-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);background:var(--primary-pale);padding:2px 7px;border-radius:10px;margin-top:5px;border:1px solid var(--primary-light)}
.month-section.is-current .m-name{color:var(--primary)}
.month-cards{flex:1;padding:7px 36px 28px 24px;min-height:64px}
.empty-month{display:flex;align-items:center;padding:14px 0 4px}
.empty-dash{width:22px;height:1.5px;background:var(--border);margin-right:8px;border-radius:1px}
.empty-txt{font-size:11px;color:var(--text-3);font-style:italic}

/* CARDS */
.d-card{background:var(--surface);border:1.5px solid var(--border);border-left:3.5px solid var(--primary-light);border-radius:var(--radius);padding:11px 14px;margin-bottom:9px;display:flex;align-items:flex-start;gap:11px;max-width:560px;box-shadow:var(--shadow);transition:var(--trans);animation:cardIn .22s ease-out;cursor:default}
@keyframes cardIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.d-card:hover{box-shadow:var(--shadow-hover);border-color:#b8cce4;transform:translateX(2px)}
.d-card.done{opacity:.45;border-left-color:var(--done)}
.d-card.urgent{border-left-color:var(--urgent);background:var(--urgent-bg);border-color:var(--urgent-border)}
.d-card.urgent:hover{border-color:#f5c0c0}
.d-card.warning{border-left-color:var(--warn);background:var(--warn-bg);border-color:var(--warn-border)}
.d-card.clickable{cursor:pointer}
.d-card.clickable:hover .card-title{color:var(--primary)}
.check-wrap{padding-top:1px}
.check-circle{width:20px;height:20px;border:2px solid var(--border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--trans);background:transparent;flex-shrink:0}
.check-circle:hover{border-color:var(--primary);background:var(--primary-pale)}
.d-card.done .check-circle{background:var(--done);border-color:var(--done)}
.d-card.done .check-circle::after{content:'';display:block;width:9px;height:6px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-1px) rotate(-45deg)}
.card-body{flex:1;min-width:0}
.card-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.card-date-chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--primary-pale);color:var(--primary);flex-shrink:0}
.d-card.urgent .card-date-chip{background:var(--urgent-border);color:var(--urgent)}
.d-card.warning .card-date-chip{background:var(--warn-border);color:var(--warn)}
.card-title{font-size:13.5px;font-weight:600;color:var(--text);flex:1;line-height:1.3}
.d-card.done .card-title{text-decoration:line-through;color:var(--text-3)}
.badge{font-size:9.5px;padding:2px 7px;border-radius:10px;font-weight:700;letter-spacing:.04em;flex-shrink:0}
.badge-tva{background:#e6f4ea;color:#2d7a3a}
.badge-ponc{background:#fff0e0;color:#c06020}
.urgency-icon,.comment-dot{font-size:13px;flex-shrink:0}
.comment-dot{opacity:.7}
.card-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:3px}
.meta-item{font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:3px}
.meta-icon{opacity:.6;font-size:10px}

/* TVA GROUP */
.tva-group-wrap{margin-bottom:0}
.tva-parent-card{cursor:pointer;user-select:none;border-left-color:#5e9be8;background:linear-gradient(135deg,#f5f9ff 0%,#eef4fb 100%)}
.tva-parent-card:hover{border-left-color:var(--primary)}
.tva-parent-card.done{border-left-color:var(--done)}
.tva-header-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tva-chevron{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--primary-pale);border-radius:50%;font-size:10px;color:var(--primary);transition:transform .22s cubic-bezier(.4,0,.2,1),background .18s;flex-shrink:0;margin-left:auto}
.tva-chevron.open{transform:rotate(180deg);background:var(--primary);color:white}
.tva-progress{display:flex;align-items:center;gap:9px}
.tva-prog-bar{flex:1;height:5px;background:var(--border);border-radius:10px;overflow:hidden;max-width:200px}
.tva-prog-fill{height:100%;background:var(--primary);border-radius:10px;transition:width .35s ease}
.tva-prog-fill.full{background:#3aaa5c}
.tva-prog-text{font-size:10.5px;font-weight:700;color:var(--text-2);white-space:nowrap}
.tva-children{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .22s ease;margin-left:18px}
.tva-children.open{max-height:3000px;opacity:1}
.tva-children .d-card{animation:childIn .18s ease-out;max-width:542px;margin-top:5px}
@keyframes childIn{from{opacity:0;transform:translateX(-6px) translateY(-4px)}to{opacity:1;transform:translateX(0) translateY(0)}}
.tva-children .d-card:first-child{margin-top:7px}
.tva-children .d-card:last-child{margin-bottom:9px}

/* CLIENTS VIEW */
#clientsView{padding:0 40px 80px}
.clients-sticky-header{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:32px;padding-bottom:16px;padding-left:40px;padding-right:40px;margin-left:-40px;margin-right:-40px;box-shadow:0 1px 0 var(--border);margin-bottom:20px}
.clients-sticky-header .view-header{margin-bottom:16px}
.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.view-title{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.03em}
.view-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.clients-list{display:flex;flex-direction:column;gap:8px;max-width:840px}
.client-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:var(--trans);box-shadow:var(--shadow);animation:cardIn .2s ease-out}
.client-card:hover{box-shadow:var(--shadow-hover);border-color:#b8cce4;transform:translateX(3px)}
.cc-code-badge{width:44px;height:44px;border-radius:9px;background:var(--primary-pale);border:1.5px solid var(--primary-light);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:10px;font-weight:800;color:var(--primary);letter-spacing:.04em;flex-shrink:0;text-align:center;overflow:hidden;word-break:break-all;padding:4px}
.cc-code-badge.has-emoji{background:var(--bg);border-color:var(--border);font-size:24px;padding:0}
.cc-body{flex:1;min-width:0}
.cc-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cc-form{font-size:11.5px;color:var(--text-2);font-weight:600}
.cc-address{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.cc-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.regime-badge{font-size:10px;padding:3px 9px;border-radius:10px;font-weight:700;letter-spacing:.03em;flex-shrink:0}
.rb-mensuelle{background:#e8f1fd;color:#2861b2}.rb-trimestrielle{background:#f0ecfd;color:#5830a0}.rb-annuelle{background:#fff0e0;color:#b05010}.rb-non_assujetti{background:var(--bg);color:var(--text-3);border:1px solid var(--border)}
.cc-deadlines-count{font-size:11px;color:var(--text-3);background:var(--bg);border:1px solid var(--border);padding:3px 9px;border-radius:10px;white-space:nowrap}
.cc-arrow{color:var(--text-3);font-size:20px;font-weight:300;transition:var(--trans)}
.client-card:hover .cc-arrow{color:var(--primary);transform:translateX(3px)}
.clients-empty{text-align:center;padding:60px 20px;color:var(--text-3)}
.clients-empty-icon{font-size:48px;margin-bottom:14px}
.clients-empty-text{font-size:14px;margin-bottom:20px;line-height:1.6}
.cd-right-body > .client-card {margin-bottom: 18px;}

/* EMOJI PICKER */
.emoji-field{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.emoji-trigger{width:52px;height:52px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:26px;transition:var(--trans);flex-shrink:0;position:relative}
.emoji-trigger:hover{border-color:var(--primary);background:var(--primary-pale);box-shadow:0 0 0 3px var(--primary-pale)}
.emoji-trigger.has-emoji{background:var(--surface)}
.emoji-trigger-placeholder{font-size:20px;opacity:.45}
.emoji-label-wrap{flex:1}
.emoji-lbl{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:3px}
.emoji-hint{font-size:11px;color:var(--text-3);line-height:1.4}
.emoji-panel{position:absolute;z-index:200;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(10,30,70,.14),0 2px 8px rgba(10,30,70,.08);padding:10px;width:280px;animation:modalIn .15s ease;max-height:260px;overflow-y:auto}
.emoji-panel-inner{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.ep-btn{width:30px;height:30px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .12s,transform .1s;line-height:1}
.ep-btn:hover{background:var(--primary-pale);transform:scale(1.18)}
.ep-btn.selected{background:var(--primary-pale);outline:2px solid var(--primary)}
.ep-clear{width:100%;margin-top:6px;padding:5px;border:none;background:var(--bg);border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;color:var(--text-3);font-family:inherit;transition:var(--trans)}
.ep-clear:hover{background:var(--border);color:var(--text)}

/* CLIENT DETAIL */
.cd-wrap{position:absolute;inset:0;display:flex}
.cd-left{width:50%;flex-shrink:0;overflow-y:auto;border-right:1.5px solid var(--border);background:var(--surface)}
.cd-right{flex:1;overflow-y:auto;min-width:0;background:var(--bg)}
.cd-left-header{padding:24px 24px 16px;border-bottom:1.5px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cd-nav-arrows{display:flex;gap:4px;flex-shrink:0;margin-top:2px}
.cd-nav-btn{width:28px;height:28px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--trans)}
.cd-nav-btn:hover:not(:disabled){background:var(--primary-pale);border-color:var(--primary-light);color:var(--primary)}
.cd-nav-btn:disabled{opacity:.3;cursor:default}
.cd-client-name{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-client-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd-code-chip{font-size:10px;font-weight:700;background:var(--primary-pale);color:var(--primary);padding:2px 8px;border-radius:10px;border:1px solid var(--primary-light)}
.cd-form-chip{font-size:10px;font-weight:600;color:var(--text-2);background:var(--bg);padding:2px 8px;border-radius:10px;border:1px solid var(--border)}
.cd-form-body{padding:18px 24px 40px}
.cd-section{margin-bottom:18px}
.cd-section-title{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cd-section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.cd-field{margin-bottom:10px}
.cd-flbl{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.cd-fval{font-size:13px;color:var(--text);line-height:1.4;word-break:break-word}
.cd-fval.empty{color:var(--text-3);font-style:italic}
.cd-link{color:var(--primary);text-decoration:none;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:5px;line-height:1.4;word-break:break-all;transition:var(--trans)}
.cd-link:hover{color:var(--primary-hover);text-decoration:underline}
.cd-link-icon{font-size:12px;flex-shrink:0;opacity:.75}
.cd-frow{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.cd-actions{display:flex;gap:8px;padding:0 24px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.cd-mode-banner{margin:14px 24px 0px 24px;border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px}
.cd-mode-banner.read{background:var(--bg);border:1px solid var(--border);color:var(--text-3)}
.cd-mode-banner.edit{background:var(--primary-pale);border:1px solid var(--primary-light);color:var(--primary);animation:fadeIn .15s ease}
.cd-right-header{padding:20px 28px 14px;border-bottom:1.5px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cd-right-title{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.cd-right-body{padding:18px 28px 60px}
.cp-month{margin-bottom:24px}
.cp-month-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cp-month-dot{width:8px;height:8px;border-radius:50%;background:var(--line-color);flex-shrink:0}
.cp-month-dot.current{background:var(--primary);box-shadow:0 0 0 3px var(--primary-pale)}
.cp-month-name{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.cp-month-badge{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);background:var(--primary-pale);padding:2px 7px;border-radius:10px;border:1px solid var(--primary-light)}
.cp-month-past .cp-month-name{color:var(--text-3)}
.cp-month-past .cp-month-dot{background:var(--border)}
.cp-month-past .cp-cards{opacity:.42}
.cd-right-empty{text-align:center;padding:48px 20px;color:var(--text-3)}
.cd-right-empty-icon{font-size:36px;margin-bottom:10px}

/* MODALS */
.overlay{position:fixed;inset:0;background:rgba(10,30,60,.32);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.overlay.z110{z-index:110}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:16px;padding:26px 28px 28px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(10,30,70,.2),0 4px 16px rgba(10,30,70,.1);animation:modalIn .2s cubic-bezier(.34,1.3,.64,1);border:1.5px solid var(--border);position:relative;max-height:92vh;overflow-y:auto}
.modal.modal-sm{max-width:360px}
.modal.modal-lg{max-width:580px}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.modal-close{background:var(--bg);border:1.5px solid var(--border);width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-3);transition:var(--trans);line-height:1;padding-bottom:1px;flex-shrink:0}
.modal-close:hover{background:var(--urgent-bg);color:var(--urgent);border-color:var(--urgent-border)}
.type-tabs{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:var(--radius-sm);margin-bottom:20px;border:1.5px solid var(--border)}
.type-tab{flex:1;padding:8px 10px;border:none;border-radius:5px;font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:var(--trans);background:transparent;color:var(--text-2)}
.type-tab.active{background:var(--surface);color:var(--primary);font-weight:700;box-shadow:0 1px 6px rgba(30,70,130,.12)}
.fgrp{margin-bottom:14px}
.fgrp:last-of-type{margin-bottom:0}
.flbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.fopt{font-style:italic;font-weight:400;text-transform:none;margin-left:3px}
.finput,.finselect{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:13.5px;color:var(--text);background:var(--bg);transition:var(--trans);outline:none;appearance:none;-webkit-appearance:none}
.finselect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238aaac6' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer}
.finput:focus,.finselect:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-pale)}
.finput[readonly]{background:var(--bg);color:var(--text-2);cursor:default;border-color:transparent;padding-left:4px}
.finput[readonly]:focus{box-shadow:none;border-color:transparent}
textarea.finput{resize:vertical;min-height:72px;line-height:1.5}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fhint{font-size:11px;color:var(--text-3);margin-top:5px;line-height:1.45}
.fsep{height:1.5px;background:var(--border);margin:16px 0}
.fsection{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:16px 0 10px}
.modal-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end}
.modal-actions.spread{justify-content:space-between;align-items:center}
.client-option-create{color:var(--primary);font-style:italic}
.no-clients-hint{font-size:11.5px;color:var(--text-3);margin-top:6px;padding:8px 10px;background:var(--primary-pale);border-radius:var(--radius-sm);border:1px solid var(--primary-light);line-height:1.4}
.mode-banner{display:flex;align-items:center;gap:8px;border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:16px;font-size:12px;font-weight:600}
.mode-banner.read{background:var(--bg);border:1px solid var(--border);color:var(--text-3)}
.mode-banner.edit{background:var(--primary-pale);border:1px solid var(--primary-light);color:var(--primary);animation:fadeIn .15s ease}
.hsep{height:1.5px;background:var(--border);margin:16px 0}
.btn{padding:9px 18px;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:var(--trans);display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--primary);color:white;box-shadow:0 2px 8px rgba(53,117,204,.28)}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 14px rgba(53,117,204,.36)}
.btn-secondary{background:var(--bg);color:var(--text-2);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-danger{background:var(--urgent-bg);color:var(--urgent);border:1.5px solid var(--urgent-border)}
.btn-danger:hover{background:var(--urgent);color:white;border-color:var(--urgent)}
.btn-danger-solid{background:var(--urgent);color:white}
.btn-danger-solid:hover{background:#a82020;transform:translateY(-1px)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.del-confirm-body{text-align:center;padding:8px 0 4px}
.del-confirm-icon{font-size:36px;margin-bottom:10px}
.del-confirm-text{font-size:14px;color:var(--text-2);line-height:1.6}
.del-confirm-name{font-weight:700;color:var(--text)}
.io-section{border-top:1.5px solid var(--border);padding-top:18px;margin-top:18px}
.io-title{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.io-btns{display:flex;gap:8px;flex-wrap:wrap}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--text);color:white;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:500;z-index:300;animation:toastIn .22s ease-out,toastOut .22s ease-in 2.2s forwards;box-shadow:0 6px 24px rgba(0,0,0,.25);white-space:nowrap;pointer-events:none}
.toast.error{background:var(--urgent)}
:root[data-theme="blue-dark"] .toast,:root[data-theme="orange-dark"] .toast,:root[data-theme="green-dark"] .toast,:root[data-theme="rose-dark"] .toast{background:var(--surface);color:var(--text);box-shadow:0 6px 24px rgba(0,0,0,.5)}
:root[data-theme="blue-dark"] .toast.error,:root[data-theme="orange-dark"] .toast.error,:root[data-theme="green-dark"] .toast.error,:root[data-theme="rose-dark"] .toast.error{background:var(--urgent);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(8px)}}

/* ═══ TEAM VIEW ═══ */
#teamView{padding:32px 40px 80px}
.user-list{display:flex;flex-direction:column;gap:10px;max-width:800px}
.user-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:var(--trans);box-shadow:var(--shadow);animation:cardIn .2s ease-out}
.user-card:hover{box-shadow:var(--shadow-hover);border-color:#b8cce4;transform:translateX(3px)}
.user-avatar-lg{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:white;flex-shrink:0}
.user-avatar-lg.has-emoji{background:var(--primary-pale);border:1.5px solid var(--primary-light);font-size:22px}
.user-card-body{flex:1;min-width:0}
.user-card-name{font-size:14px;font-weight:700;color:var(--text)}
.user-card-initials{font-size:11px;color:var(--text-3);margin-top:2px}
.user-card-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.user-count{font-size:11px;color:var(--text-3);background:var(--bg);border:1px solid var(--border);padding:3px 9px;border-radius:10px;white-space:nowrap}

/* ═══ ASSIGNMENTS SECTION ═══ */
.assign-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.assign-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--border)}
.assign-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0}
.assign-avatar.has-emoji{background:var(--primary-pale);border:1px solid var(--primary-light);font-size:15px}
.assign-info{flex:1;min-width:0}
.assign-name{font-size:12px;font-weight:600;color:var(--text)}
.assign-role-lbl{font-size:10px;color:var(--text-3)}
.assign-del{opacity:0;background:none;border:none;color:var(--text-3);cursor:pointer;font-size:15px;padding:2px 5px;border-radius:4px;transition:var(--trans);line-height:1;flex-shrink:0}
.assign-row:hover .assign-del{opacity:1}
.assign-del:hover{background:var(--urgent-bg);color:var(--urgent)}
.assign-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:transparent;border:1.5px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-3);font-size:12px;font-weight:600;cursor:pointer;transition:var(--trans);width:100%;font-family:inherit;margin-top:6px}
.assign-add-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-pale)}

/* ═══ ADMIN ═══ */
.user-inactive{opacity:.55}
.user-inactive .user-card-name::after{content:'Inactif';display:inline-block;margin-left:8px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;vertical-align:middle}
.admin-search-bar{display:flex;gap:8px;margin-bottom:16px}
.admin-search-bar input{flex:1}
.admin-sidebar-msg{padding:20px 12px;color:var(--text-3);font-size:12px;text-align:center;line-height:1.6}
.admin-sidebar-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--primary-pale);border:1.5px solid var(--primary-light);color:var(--primary);font-weight:800;font-size:11px;letter-spacing:.05em;margin-bottom:8px}

/* ═══ VALIDATED BY ═══ */
.validated-by{font-size:10px;font-weight:700;color:var(--done);white-space:nowrap;flex-shrink:0}

/* ═══ TOGGLE PARTIAL ═══ */
.toggle-box.partial{background:var(--primary);border-color:var(--primary);opacity:.5}
.toggle-box.partial::after{content:'';display:block;width:6px;height:6px;background:white;border-radius:1px}

/* ═══ STAT CHIPS (timeline header) ═══ */
.stat-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;white-space:nowrap}
.stat-chip.stat-done{color:var(--primary)}
.stat-chip.stat-pending{color:var(--warn)}
.stat-chip.stat-total{color:var(--text-3)}
.stat-sep{color:var(--border);margin:0 4px;font-size:13px}

/* ═══ DARK THEMES ═══ */
/* NOTE DB : ALTER TABLE users MODIFY COLUMN theme ENUM('blue','orange','green','rose','blue-dark','orange-dark','green-dark','rose-dark') DEFAULT 'blue'; */
:root[data-theme="blue-dark"]{--bg:#18253c;--sidebar:#1e2d44;--sidebar-border:#263858;--surface:#20304a;--border:#2c415a;--primary:#4a8de0;--primary-hover:#6aaaf0;--primary-pale:#1f3654;--primary-light:#243e60;--text:#d8e8f8;--text-2:#8aaac6;--text-3:#4a6a8a;--line-color:#2c415a;--done:#426680;--urgent:#e06060;--urgent-bg:#2e1414;--urgent-border:#4e2424;--warn:#e0a040;--warn-bg:#2e2010;--warn-border:#4e3418;--shadow:0 1px 4px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.2);--shadow-hover:0 3px 10px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3)}
:root[data-theme="orange-dark"]{--bg:#261a0c;--sidebar:#2e1e0c;--sidebar-border:#462c18;--surface:#341e0e;--border:#4c3018;--primary:#e8842a;--primary-hover:#f09a48;--primary-pale:#3a2410;--primary-light:#4c3018;--text:#f5e0c8;--text-2:#c09060;--text-3:#7a5030;--line-color:#4c3018;--done:#7a4a28;--urgent:#e06060;--urgent-bg:#2e1414;--urgent-border:#4e2424;--warn:#e0a040;--warn-bg:#2e2010;--warn-border:#4e3418;--shadow:0 1px 4px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.2);--shadow-hover:0 3px 10px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3)}
:root[data-theme="green-dark"]{--bg:#101c16;--sidebar:#14221a;--sidebar-border:#1c3225;--surface:#182c20;--border:#203a2c;--primary:#40a060;--primary-hover:#58c078;--primary-pale:#143020;--primary-light:#1e4228;--text:#c8f0d8;--text-2:#74a882;--text-3:#3a6848;--line-color:#203a2c;--done:#306445;--urgent:#e06060;--urgent-bg:#2e1414;--urgent-border:#4e2424;--warn:#e0a040;--warn-bg:#2e2010;--warn-border:#4e3418;--shadow:0 1px 4px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.2);--shadow-hover:0 3px 10px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3)}
:root[data-theme="rose-dark"]{--bg:#241018;--sidebar:#2e1018;--sidebar-border:#481820;--surface:#34141e;--border:#501c28;--primary:#e04888;--primary-hover:#f068a8;--primary-pale:#3a1020;--primary-light:#50182e;--text:#f5c8d8;--text-2:#c07898;--text-3:#7a3858;--line-color:#501c28;--done:#7a2040;--urgent:#e06060;--urgent-bg:#2e1414;--urgent-border:#4e2424;--warn:#e0a040;--warn-bg:#2e2010;--warn-border:#4e3418;--shadow:0 1px 4px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.2);--shadow-hover:0 3px 10px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3)}
/* Overrides dark : tva-parent-card + hover avec couleurs hardcodées */
:root[data-theme="blue-dark"] .tva-parent-card,:root[data-theme="orange-dark"] .tva-parent-card,:root[data-theme="green-dark"] .tva-parent-card,:root[data-theme="rose-dark"] .tva-parent-card{background:linear-gradient(135deg,var(--surface) 0%,var(--primary-pale) 100%);border-left-color:var(--primary)}
:root[data-theme="blue-dark"] .d-card:hover,:root[data-theme="orange-dark"] .d-card:hover,:root[data-theme="green-dark"] .d-card:hover,:root[data-theme="rose-dark"] .d-card:hover{border-color:var(--primary-light)}
:root[data-theme="blue-dark"] .d-card.urgent:hover,:root[data-theme="orange-dark"] .d-card.urgent:hover,:root[data-theme="green-dark"] .d-card.urgent:hover,:root[data-theme="rose-dark"] .d-card.urgent:hover{border-color:var(--urgent-border)}
.ts-blue-dark{background:linear-gradient(135deg,#20304a,#4a8de0)}.ts-orange-dark{background:linear-gradient(135deg,#341e0e,#e8842a)}.ts-green-dark{background:linear-gradient(135deg,#182c20,#40a060)}.ts-rose-dark{background:linear-gradient(135deg,#34141e,#e04888)}

/* ═══════════════════════════════════════════
   CONTACT CHIPS (mode lecture)
═══════════════════════════════════════════ */
.contact-chip{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:7px;transition:var(--trans)}
.contact-chip:last-child{margin-bottom:0}
.contact-chip-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.contact-chip-primary{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--primary);background:var(--primary-pale);border:1px solid var(--primary-light);padding:1px 6px;border-radius:8px}
.contact-chip-role{font-size:11px;color:var(--text-3);font-style:italic}
.contact-chip-meta{display:flex;gap:12px;flex-wrap:wrap}
/* Mode édition */
.contact-edit-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.contact-edit-row:last-of-type{border-bottom:none}
.contact-edit-info{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.contact-chip-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-edit-controls{display:flex;align-items:center;gap:5px;flex-shrink:0}

/* ═══════════════════════════════════════════
   CONTACT DROPDOWN
═══════════════════════════════════════════ */
.contact-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-hover);z-index:50;max-height:220px;overflow-y:auto}
.contact-dropdown-item{padding:9px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:var(--trans);border-bottom:1px solid var(--border);font-size:13px}
.contact-dropdown-item:last-child{border-bottom:none}
.contact-dropdown-item:hover{background:var(--primary-pale)}
.contact-dd-name{font-weight:600;color:var(--text)}
.contact-dd-meta{font-size:11px;color:var(--text-3);white-space:nowrap}
.contact-dropdown-create{color:var(--primary);font-weight:600;font-style:italic}

/* ═══════════════════════════════════════════
   CLOSING VIEW
═══════════════════════════════════════════ */
#closingView{height:100%;overflow-y:auto}
.closing-header{padding:32px 40px 0;margin-bottom:24px}
.closing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 40px 80px}
.closing-month-block{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);animation:cardIn .2s ease-out}
.closing-month-current{border-color:var(--primary-light);border-left:3.5px solid var(--primary)}
.closing-month-title{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1.5px solid var(--border);background:var(--bg)}
.closing-month-current .closing-month-title{background:var(--primary-pale)}
.closing-month-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.closing-month-current .closing-month-name{color:var(--primary)}
.closing-month-count{font-size:10.5px;font-weight:700;color:var(--text-3);background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:10px}
.closing-client-list{padding:8px;display:flex;flex-direction:column;gap:4px}
.closing-client-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--trans)}
.closing-client-card:hover{background:var(--bg)}
.closing-client-card:hover .closing-client-name{color:var(--primary)}
.closing-client-badge{width:32px;height:32px;border-radius:7px;background:var(--primary-pale);border:1.5px solid var(--primary-light);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:9.5px;font-weight:800;color:var(--primary);flex-shrink:0;overflow:hidden;word-break:break-all;padding:2px;text-align:center}
.closing-client-badge.has-emoji{background:var(--bg);border-color:var(--border);font-size:18px;padding:0}
.closing-client-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.closing-client-code{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase}
.closing-client-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--trans)}
.closing-empty{text-align:center;padding:80px 20px;color:var(--text-3)}

/* ═══════════════════════════════════════════
   NOTES VIEW
═══════════════════════════════════════════ */
#notesView{height:100%}
.notes-split{display:flex;flex-direction:row;height:100%;overflow:hidden}
.notes-fullwidth{height:100%;overflow-y:auto;padding:32px 40px 80px}
.notes-grid-panel{width:50%;flex-shrink:0;overflow-y:auto;border-right:1.5px solid var(--border);padding:20px 24px}
.notes-preview-panel{flex:1;overflow-y:auto;padding:24px 32px 60px;background:var(--surface)}
.note-panel-editing{overflow:hidden;display:flex;flex-direction:column;padding-bottom:16px}
.note-panel-editing .note-body-editor{flex:1;min-height:0;resize:none;overflow-y:auto}

.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.notes-grid-panel .notes-grid{grid-template-columns:1fr}

.note-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:var(--trans);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.note-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-light);transform:translateY(-2px)}
.note-card.active{border-left:3.5px solid var(--primary);background:var(--primary-pale);border-color:var(--primary-light)}
.note-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.note-card-client{font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:4px;font-weight:600}
.note-card-excerpt{font-size:11.5px;color:var(--text-3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:italic;flex:1}
.note-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:10.5px;color:var(--text-3);padding-top:8px;border-top:1px solid var(--border)}

.note-preview-header{border-bottom:1.5px solid var(--border);padding-bottom:16px;margin-bottom:24px;position:relative}
.note-preview-close{position:absolute;top:0;right:0;background:var(--bg);border:1.5px solid var(--border);width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-3);transition:var(--trans);line-height:1}
.note-preview-close:hover{background:var(--urgent-bg);color:var(--urgent);border-color:var(--urgent-border)}
.note-preview-title{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:10px;padding-right:36px;line-height:1.3}
.note-preview-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3);margin-bottom:12px}
.note-preview-actions{display:flex;gap:8px}
.note-body-rendered{font-size:14px;line-height:1.75;color:var(--text)}
.note-body-empty{font-size:13px;color:var(--text-3);font-style:italic;padding:24px 0;text-align:center}
.note-body-editor{width:100%;min-height:320px;resize:vertical;font-family:'Courier New',monospace;font-size:13px;line-height:1.65}
.note-edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* Markdown styles */
.note-body-rendered h1,.note-body-rendered h2,.note-body-rendered h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--text);letter-spacing:-.01em;margin:22px 0 8px;line-height:1.25}
.note-body-rendered h1{font-size:20px}
.note-body-rendered h2{font-size:17px;border-bottom:1px solid var(--border);padding-bottom:6px}
.note-body-rendered h3{font-size:15px}
.note-body-rendered p{margin-bottom:12px}
.note-body-rendered ul,.note-body-rendered ol{padding-left:22px;margin-bottom:12px}
.note-body-rendered li{margin-bottom:4px;line-height:1.6}
.note-body-rendered strong{font-weight:700;color:var(--text)}
.note-body-rendered em{font-style:italic}
.note-body-rendered code{font-family:'Courier New',monospace;font-size:12.5px;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 6px}
.note-body-rendered pre{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;overflow-x:auto;margin-bottom:14px}
.note-body-rendered pre code{border:none;background:transparent;padding:0}
.note-body-rendered blockquote{border-left:3px solid var(--primary-light);padding-left:16px;color:var(--text-2);font-style:italic;margin:14px 0}
.note-body-rendered hr{border:none;border-top:1.5px solid var(--border);margin:22px 0}
.note-body-rendered a{color:var(--primary);text-decoration:underline}
.note-body-rendered a:hover{color:var(--primary-hover)}
.note-body-rendered table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:13px}
.note-body-rendered th,.note-body-rendered td{border:1px solid var(--border);padding:7px 12px;text-align:left}
.note-body-rendered th{background:var(--bg);font-weight:700;color:var(--text-2)}