/* ===== RESET & BASE ===== */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f0f2f5;color:#1a1a1a;font-size:14px;}

/* ===== LOGIN ===== */
#login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 50%,#2563eb 100%);display:flex;align-items:center;justify-content:center;z-index:9999;}
.login-box{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.login-logo{text-align:center;margin-bottom:24px;}
.login-logo .logo-icon{width:64px;height:64px;background:#dbeafe;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px;}
.login-logo h2{font-size:20px;font-weight:700;color:#1e293b;}
.login-logo p{font-size:13px;color:#6b7280;margin-top:4px;}
.login-err{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px;display:none;}

/* ===== APP SHELL ===== */
#app-shell{display:none;}
.header{background:#fff;border-bottom:1px solid #e5e7eb;padding:12px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;}
.header-icon{width:32px;height:32px;background:#dbeafe;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.header h1{font-size:16px;font-weight:600;color:#1e293b;flex:1;}
.header h1 span{font-weight:400;font-size:12px;color:#64748b;margin-left:6px;}
.user-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;font-size:12px;}
.user-badge .role-pill{padding:2px 8px;border-radius:20px;font-weight:700;font-size:10px;}
.role-admin{background:#dbeafe;color:#1d4ed8;}
.role-secretaire{background:#dcfce7;color:#15803d;}
.role-comptable{background:#fef3c7;color:#b45309;}
.nav{background:#fff;border-bottom:1px solid #e5e7eb;display:flex;padding:0 24px;gap:2px;flex-wrap:wrap;}
.nav-btn{padding:10px 15px;font-size:13px;font-weight:500;color:#64748b;background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;}
.nav-btn:hover{color:#1e293b;background:#f8fafc;}
.nav-btn.active{color:#2563eb;border-bottom-color:#2563eb;}
.content{padding:22px;max-width:1400px;margin:0 auto;}
.section{display:none;}
.section.active{display:block;}
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.top-bar h2{font-size:15px;font-weight:600;color:#1e293b;}

/* BUTTONS */
.btn{padding:8px 14px;font-size:13px;border-radius:7px;border:1px solid #d1d5db;background:#fff;color:#374151;cursor:pointer;transition:all .15s;font-weight:500;}
.btn:hover{background:#f9fafb;border-color:#9ca3af;}
.btn.primary{background:#2563eb;color:#fff;border-color:#2563eb;}
.btn.primary:hover{background:#1d4ed8;}
.btn.danger{background:#fef2f2;color:#dc2626;border-color:#fecaca;}
.btn.danger:hover{background:#fee2e2;}
.btn.success{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}
.btn.success:hover{background:#dcfce7;}
.btn.warning{background:#fffbeb;color:#b45309;border-color:#fde68a;}
.btn.sm{padding:5px 10px;font-size:12px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:22px;}
.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px;}
.stat-label{font-size:10px;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;font-weight:700;}
.stat-val{font-size:20px;font-weight:700;color:#1e293b;line-height:1.2;}
.stat-sub{font-size:11px;color:#9ca3af;margin-top:3px;}

/* CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.card-title{font-size:14px;font-weight:600;color:#1e293b;}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;display:inline-block;}
.badge-blue{background:#dbeafe;color:#1d4ed8;}
.badge-green{background:#dcfce7;color:#15803d;}
.badge-red{background:#fef2f2;color:#dc2626;}
.badge-amber{background:#fef3c7;color:#b45309;}
.badge-gray{background:#f3f4f6;color:#4b5563;}
.badge-purple{background:#f3e8ff;color:#7c3aed;}
.badge-teal{background:#ccfbf1;color:#0f766e;}
.card-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid #f3f4f6;font-size:12px;}
.card-row:last-of-type{border-bottom:none;}
.card-row .label{color:#6b7280;}
.card-row .val{font-weight:600;color:#1e293b;}
.card-actions{display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid #f3f4f6;flex-wrap:wrap;}

/* TABLE */
.table-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:auto;}
table{width:100%;border-collapse:collapse;min-width:700px;}
table th{background:#f8fafc;padding:9px 11px;text-align:left;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;border-bottom:1px solid #e5e7eb;white-space:nowrap;}
table td{padding:9px 11px;border-bottom:1px solid #f3f4f6;color:#374151;font-size:12px;}
table tr:last-child td{border-bottom:none;}
table tbody tr:hover td{background:#f9fafb;}
tr.eleve-desactive td{background:#f8fafc;color:#64748b;}
tr.eleve-desactive:hover td{background:#f1f5f9;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;z-index:1000;overflow-y:auto;}
.modal{background:#fff;border-radius:12px;border:1px solid #e5e7eb;width:100%;max-width:540px;box-shadow:0 20px 60px rgba(0,0,0,.15);}
.modal.wide{max-width:740px;}
.modal-header{padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{font-size:14px;font-weight:700;color:#1e293b;}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#9ca3af;line-height:1;}
.modal-close:hover{color:#374151;}
.modal-body{padding:20px;max-height:76vh;overflow-y:auto;}
.modal-footer{padding:14px 20px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:8px;background:#f8fafc;border-radius:0 0 12px 12px;flex-wrap:wrap;}
.modal-tabs{display:flex;border-bottom:1px solid #e5e7eb;margin:-20px -20px 18px;padding:0 20px;}
.modal-tab{padding:11px 14px;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;transition:all .15s;}
.modal-tab.active{color:#2563eb;border-bottom-color:#2563eb;}
.modal-tab-content{display:none;}
.modal-tab-content.active{display:block;}

/* FORM */
.form-group{margin-bottom:13px;}
.form-label{font-size:10px;font-weight:700;color:#374151;margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.04em;}
.form-control{width:100%;padding:8px 10px;font-size:13px;border:1px solid #d1d5db;border-radius:7px;background:#fff;color:#1e293b;font-family:inherit;transition:border .15s,box-shadow .15s;}
.form-control:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.form-check{display:flex;align-items:center;gap:7px;font-size:13px;color:#374151;cursor:pointer;}
.form-check input{cursor:pointer;width:15px;height:15px;}
.hint{font-size:11px;color:#9ca3af;margin-top:4px;}
.form-divider{border:none;border-top:1px solid #f3f4f6;margin:14px 0;}
.section-subtitle{font-size:11px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.06em;padding:6px 0 9px;}
.info-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:7px;padding:10px 12px;font-size:12px;color:#0369a1;margin-bottom:12px;}
.warn-box{background:#fffbeb;border:1px solid #fde68a;border-radius:7px;padding:10px 12px;font-size:12px;color:#92400e;}

/* PROGRESS */
.progress-bar{height:5px;background:#f3f4f6;border-radius:3px;overflow:hidden;margin-top:5px;}
.progress-fill{height:100%;border-radius:3px;transition:width .4s;}

/* SEARCH */
.search-bar{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap;}
.search-bar .form-control{flex:1;min-width:150px;}

/* PAYMENTS */
.paiement-list{display:flex;flex-direction:column;gap:7px;}
.paiement-item{background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:11px 14px;display:flex;align-items:center;gap:11px;}
.paiement-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.paiement-info{flex:1;min-width:0;}
.paiement-name{font-size:13px;font-weight:600;color:#1e293b;}
.paiement-meta{font-size:11px;color:#9ca3af;margin-top:1px;}
.paiement-amount{font-size:14px;font-weight:700;color:#16a34a;white-space:nowrap;}

/* AVATAR */
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.eleve-header{display:flex;align-items:center;gap:8px;}

/* DASHBOARD */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dash-panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;}
.dash-panel h3{font-size:11px;font-weight:700;color:#374151;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em;}

/* MOIS GRID */
.mois-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:7px;margin-top:9px;}
.mois-card{border-radius:8px;padding:9px;border:1px solid;cursor:pointer;transition:all .15s;}
.mois-card:hover{transform:translateY(-1px);}
.mois-card.solde{background:#f0fdf4;border-color:#bbf7d0;}
.mois-card.partiel{background:#fffbeb;border-color:#fde68a;}
.mois-card.impaye{background:#fef2f2;border-color:#fecaca;}
.mois-card .mc-label{font-size:11px;font-weight:700;margin-bottom:3px;}
.mois-card.solde .mc-label{color:#15803d;}
.mois-card.partiel .mc-label{color:#b45309;}
.mois-card.impaye .mc-label{color:#dc2626;}
.mois-card .mc-paye{font-size:11px;font-weight:600;}
.mois-card.solde .mc-paye{color:#16a34a;}
.mois-card.partiel .mc-paye{color:#d97706;}
.mois-card.impaye .mc-paye{color:#dc2626;}
.mois-card .mc-reste{font-size:10px;margin-top:2px;color:#dc2626;font-weight:600;}

/* IMPAYÉS PAR MOIS */
.impaye-mois-header{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;padding:10px 14px;border-radius:8px;margin-bottom:8px;cursor:pointer;border:1px solid #e5e7eb;}
.impaye-mois-header:hover{background:#f1f5f9;}
.impaye-mois-title{font-weight:700;font-size:13px;color:#1e293b;}
.impaye-mois-badge{display:flex;gap:8px;align-items:center;}

/* NOTIF */
.notif{position:fixed;bottom:22px;right:22px;background:#1e293b;color:#fff;padding:11px 18px;border-radius:9px;font-size:13px;font-weight:500;z-index:9999;opacity:0;transform:translateY(8px);transition:all .25s;box-shadow:0 4px 20px rgba(0,0,0,.25);max-width:320px;}
.notif.show{opacity:1;transform:translateY(0);}
.notif.success{background:#16a34a;}
.notif.error{background:#dc2626;}

/* ACCESS DENIED */
.access-denied{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 14px;font-size:12px;color:#dc2626;display:flex;align-items:center;gap:8px;}

@media(max-width:700px){
  .dash-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .form-row3{grid-template-columns:1fr 1fr;}
  .content{padding:12px;}
}