/* ═══════════════════════════════════════════════════════════
   STYLES GLOBAUX — Menuiseries d'Artois
   ═══════════════════════════════════════════════════════════ */

:root{
  --green:#1A6E3C;--green2:#145C30;--green3:#22A355;--green-light:rgba(237,250,243,.85);
  --white:#FFFFFF;--bg:#EFF4EF;--bg2:rgba(220,232,220,.7);
  --card:#FFFFFF;--border:rgba(200,220,200,.6);--border2:rgba(160,192,160,.5);
  --text:#0D1B0F;--text2:#3A4D3C;--muted:#7A9480;--muted2:#B8CEB8;
  --red:#E02020;--red-bg:#FEF1F1;--yellow:#C97800;--yellow-bg:#FFF8EB;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.06);
  --shadow2:0 8px 28px rgba(0,0,0,.10);
  --sidebar:260px;
  --glass-bg:rgba(255,255,255,.68);
  --glass-bg2:rgba(255,255,255,.82);
  --glass-blur:blur(28px) saturate(200%) brightness(1.04);
  --glass-blur-sm:blur(18px) saturate(180%) brightness(1.03);
  --glass-border:rgba(255,255,255,.75);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(0,0,0,.04);
  --glass-shadow:0 2px 0 rgba(255,255,255,.6),0 4px 24px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
html,body{height:100%;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;color:var(--text);font-size:15px;line-height:1.5;}
body{background:#EEF3EE;position:relative;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 10%,rgba(26,110,60,.13) 0%,transparent 65%),
    radial-gradient(ellipse 55% 55% at 85% 85%,rgba(34,163,85,.10) 0%,transparent 65%),
    radial-gradient(ellipse 45% 50% at 70% 20%,rgba(26,110,60,.07) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 80%,rgba(34,163,85,.06) 0%,transparent 60%);
}
#app,#login-screen,#loader{position:relative;z-index:1;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:rgba(238,243,238,.96);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;gap:16px;}
.spin{width:24px;height:24px;border:2.5px solid var(--border2);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;}
.loader-text{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:20px;font-weight:700;color:var(--text);}
.loader-text span{color:var(--green);}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;background:transparent;display:flex;align-items:center;justify-content:center;z-index:100;}
.login-box{width:420px;padding:52px 48px;background:var(--glass-bg2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:32px;box-shadow:var(--glass-inner),0 24px 60px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05);border:1px solid var(--glass-border);}
.login-logo{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:34px;font-weight:700;color:var(--text);margin-bottom:4px;text-align:center;letter-spacing:-.3px;}
.login-logo span{color:var(--green);}
.login-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:40px;letter-spacing:-.1px;}
.login-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:7px;display:block;letter-spacing:.2px;}
.login-input{width:100%;padding:14px 16px;border:1px solid rgba(200,220,200,.5);border-radius:14px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:15px;color:var(--text);background:rgba(255,255,255,.55);backdrop-filter:blur(8px);outline:none;transition:box-shadow .2s,background .2s;margin-bottom:12px;}
.login-input:focus{background:rgba(255,255,255,.82);box-shadow:0 0 0 3px rgba(26,110,60,.18),0 2px 8px rgba(0,0,0,.06);}
.login-btn{width:100%;padding:15px;background:var(--green);color:#fff;border:none;border-radius:14px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px;letter-spacing:-.1px;}
.login-btn:hover{background:var(--green2);box-shadow:0 4px 16px rgba(26,110,60,.35);}
.login-btn:active{transform:scale(.98);}
.login-err{color:var(--red);font-size:13px;text-align:center;min-height:18px;margin-top:12px;}

/* ── APP ── */
#app{height:100vh;display:flex;flex-direction:row;overflow:hidden;}

/* ── SIDEBAR ── */
#sidebar{width:var(--sidebar);flex-shrink:0;background:rgba(255,255,255,.75);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;overflow:hidden;box-shadow:1px 0 0 rgba(255,255,255,.6),4px 0 24px rgba(0,0,0,.05);transition:width .4s cubic-bezier(.25,.46,.45,.94);}
#app.sidebar-hidden #sidebar{width:60px;}
#app.sidebar-hidden #sidebar .sb-brand,#app.sidebar-hidden #sidebar .sb-nav,#app.sidebar-hidden #sidebar .sb-footer{opacity:0;pointer-events:none;}
.sidebar-toggle{position:fixed;top:28px;left:220px;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.4);border:1px solid rgba(200,220,200,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .4s cubic-bezier(.25,.46,.45,.94);opacity:.6;z-index:100;}
.sidebar-toggle:hover{background:rgba(255,255,255,.75);opacity:1;transform:scale(1.05);}
#app.sidebar-hidden .sidebar-toggle{left:14px;top:50%;transform:translateY(-50%);opacity:1;background:transparent;border:none;box-shadow:none;}
#app.sidebar-hidden .sidebar-toggle:hover{transform:translateY(-50%) scale(1.1);}
.sidebar-toggle-icon{font-size:18px;color:var(--green);font-weight:300;line-height:1;transition:transform .3s cubic-bezier(.25,.46,.45,.94);}
#app.sidebar-hidden .sidebar-toggle-icon{transform:scaleX(-1);}
.sb-brand{padding:28px 20px 22px;border-bottom:1px solid rgba(200,220,200,.4);position:relative;}
.sb-brand-name{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:22px;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-.2px;}
.sb-brand-name span{color:var(--green);}
.sb-user{font-size:11.5px;color:var(--muted);margin-top:5px;font-weight:500;letter-spacing:.1px;}
.sb-nav{flex:1;overflow-y:auto;padding:14px 10px;}
.sb-nav-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text2);transition:all .18s cubic-bezier(.25,.46,.45,.94);margin-bottom:2px;border:none;background:none;width:100%;text-align:left;letter-spacing:-.1px;}
.sb-nav-item:hover{background:rgba(255,255,255,.55);color:var(--text);}
.sb-nav-item.active{background:rgba(26,110,60,.12);color:var(--green);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.sb-nav-item svg{width:17px;height:17px;stroke-width:1.8;flex-shrink:0;opacity:.8;}
.sb-nav-item.active svg{opacity:1;}
.sb-section{font-size:10.5px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:1.2px;padding:18px 14px 7px;}
.sb-footer{padding:14px;border-top:1px solid rgba(200,220,200,.4);}
.sb-logout{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--muted);background:none;border:none;width:100%;transition:all .18s;letter-spacing:-.1px;}
.sb-logout:hover{background:var(--red-bg);color:var(--red);}

/* ── MAIN ── */
#main{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
#content{flex:1;padding:40px 44px;}

/* ── COMMON ELEMENTS ── */
.view-title{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:38px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-.5px;line-height:1.1;}
.view-sub{font-size:14px;color:var(--muted);margin-bottom:32px;letter-spacing:-.1px;}

.card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border-radius:22px;padding:28px 32px;border:1px solid var(--glass-border);box-shadow:var(--glass-inner),var(--glass-shadow);margin-bottom:20px;}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:100px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;border:none;letter-spacing:-.1px;}
.btn-green{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(26,110,60,.28);}
.btn-green:hover{background:var(--green2);box-shadow:0 4px 14px rgba(26,110,60,.38);}
.btn-green:active{transform:scale(.97);}
.btn-outline{background:rgba(255,255,255,.75);backdrop-filter:blur(12px);color:var(--text2);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.06);}
.btn-outline:hover{border-color:rgba(26,110,60,.4);color:var(--green);background:rgba(237,250,243,.8);}

.badge{display:inline-flex;align-items:center;padding:3px 11px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.1px;}
.badge.green{background:var(--green-light);color:var(--green);}
.badge.red{background:var(--red-bg);color:var(--red);}
.badge.yellow{background:var(--yellow-bg);color:var(--yellow);}
.badge.gray{background:var(--bg2);color:var(--muted);}

/* ── STATS GRID ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;}
.stat-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border-radius:22px;padding:22px 24px;border:1px solid var(--glass-border);box-shadow:var(--glass-inner),var(--glass-shadow);transition:box-shadow .2s,transform .18s;}
.stat-card:hover{box-shadow:var(--glass-inner),0 6px 28px rgba(0,0,0,.10);transform:translateY(-1px);}
.stat-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;}
.stat-val{font-size:36px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-1px;}
.stat-desc{font-size:12px;color:var(--muted);margin-top:7px;}
.stat-card.green .stat-val{color:var(--green);}
.stat-card.red .stat-val{color:var(--red);}
.stat-card.yellow .stat-val{color:var(--yellow);}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:999;}
.modal-overlay.open{display:flex;animation:fadeIn .2s;}
.modal-box{background:var(--glass-bg2);backdrop-filter:var(--glass-blur);border-radius:24px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),0 24px 60px rgba(0,0,0,.2);max-width:800px;width:90%;max-height:90vh;overflow-y:auto;position:relative;padding:32px;}
.modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.05);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.modal-close:hover{background:rgba(0,0,0,.1);}
.modal-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:24px;padding-right:40px;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);}

/* ── FORMS ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.form-input,.form-textarea,.form-select{width:100%;padding:11px 15px;border:1px solid var(--border);border-radius:12px;font-family:-apple-system,sans-serif;font-size:14px;outline:none;transition:box-shadow .2s;background:var(--white);}
.form-input:focus,.form-textarea:focus,.form-select:focus{box-shadow:0 0 0 3px rgba(26,110,60,.15);}
.form-textarea{resize:vertical;min-height:80px;}

/* ── BUTTONS (extended) ── */
.btn-primary{background:var(--green);color:white;}
.btn-primary:hover{background:var(--green2);box-shadow:0 4px 12px rgba(26,110,60,.3);}
.btn-secondary{background:var(--bg2);color:var(--text2);}
.btn-secondary:hover{background:var(--border);}
.btn-danger{background:var(--red);color:white;}
.btn-danger:hover{background:#c41c1c;box-shadow:0 4px 12px rgba(224,32,32,.3);}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-state svg{width:64px;height:64px;margin-bottom:16px;opacity:.5;}
.empty-state-title{font-size:18px;font-weight:600;margin-bottom:8px;}
.empty-state-text{font-size:14px;}

/* ── TABLES ── */
.table-wrap{background:var(--glass-bg);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);border-radius:22px;border:1px solid var(--glass-border);box-shadow:var(--glass-inner),var(--glass-shadow);overflow:hidden;margin-bottom:24px;}
.table-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.table-head-title{font-size:16px;font-weight:700;color:var(--text);}
.table-head-count{font-size:13px;color:var(--muted);}

/* ── SEARCH BAR ── */
.search-bar{width:100%;max-width:400px;padding:10px 16px;border:1px solid var(--border);border-radius:12px;font-size:14px;background:var(--glass-bg);outline:none;transition:box-shadow .2s;}
.search-bar:focus{box-shadow:0 0 0 3px rgba(26,110,60,.15);}