/* ============================================================
   SOCOTRA PRESENCE - Theme visuel professionnel / corporate
   Palette sobre : bleu marine, gris ardoise, blanc
   ============================================================ */
:root{
    --marine: #1c3a5e;
    --marine-dark: #12283f;
    --accent: #2f6690;
    --slate: #4a5568;
    --bg: #f4f6f8;
    --carte: #ffffff;
    --texte: #1f2933;
    --gris: #6b7280;
    --bordure: #e2e5e9;
    --danger: #b3261e;
    --danger-bg: #fbeceb;
    --succes: #1b6e4a;
    --succes-bg: #e7f3ec;
    --warn: #8a6416;
    --warn-bg: #fbf3e2;
    --info-bg: #eaf1f6;
    --radius: 8px;
    --ombre: 0 1px 3px rgba(20,30,45,0.08), 0 1px 2px rgba(20,30,45,0.06);
}

*{box-sizing:border-box;}
body{
    margin:0; font-family:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--texte);
    font-size:14px;
    line-height:1.5;
}

/* --- Connexion --- */
.page-login{
    display:flex; align-items:center; justify-content:center; min-height:100vh;
    background: var(--marine-dark);
}
.login-card{
    background:var(--carte); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    padding:40px; width:100%; max-width:380px; border-top:3px solid var(--marine);
}
.login-brand{text-align:center; margin-bottom:28px;}
.login-logo{
    width:44px;height:44px;border-radius:6px;
    background: var(--marine);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px; margin:0 auto 14px; letter-spacing:.5px;
}
.login-brand h1{font-size:18px;margin:0;color:var(--texte);font-weight:600;}
.login-brand p{font-size:12.5px;color:var(--gris);margin:4px 0 0;}

/* --- Formulaires --- */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--slate);}
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], select, textarea{
    width:100%; padding:9px 11px; border:1px solid var(--bordure); border-radius:6px;
    font-size:13.5px; background:#fff; color:var(--texte); font-family:inherit;
}
input:focus, select:focus, textarea:focus{outline:none; border-color: var(--accent); box-shadow:0 0 0 3px rgba(47,102,144,0.12);}

.btn{
    display:inline-block; padding:9px 16px; border-radius:6px; border:1px solid transparent;
    font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; text-align:center;
    transition:background-color .15s ease;
}
.btn-primary{background:var(--marine); color:#fff;}
.btn-primary:hover{background:var(--marine-dark);}
.btn-gold{background:var(--slate); color:#fff;}
.btn-gold:hover{background:#374151;}
.btn-forest{background:var(--succes); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-outline{background:#fff; border:1px solid var(--bordure); color:var(--slate);}
.btn-outline:hover{border-color:var(--marine); color:var(--marine);}
.btn-block{width:100%;}
.btn-sm{padding:5px 10px; font-size:12px;}

.alert{padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; border:1px solid transparent;}
.alert-danger{background:var(--danger-bg); color:var(--danger); border-color:#f3d3d1;}
.alert-succes{background:var(--succes-bg); color:var(--succes); border-color:#cfe9dc;}
.alert-warn{background:var(--warn-bg); color:var(--warn); border-color:#f2e3c0;}

.note-discrete{font-size:12px;color:var(--gris);margin-top:10px;}

/* --- Layout applicatif --- */
.app-header{
    background: var(--marine); color:#fff; padding:12px 24px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.app-header .brand{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:10px; letter-spacing:.2px;}
.app-header .brand .pastille{width:28px;height:28px;border-radius:5px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.app-header nav a{color:rgba(255,255,255,0.82); text-decoration:none; margin-left:18px; font-size:13px;}
.app-header nav a:hover{color:#fff;}
.app-header .user-box{display:flex;align-items:center;gap:14px;font-size:12.5px;color:rgba(255,255,255,0.85);}
.bell{position:relative; cursor:pointer; font-size:16px; opacity:0.85;}
.bell .badge{
    position:absolute; top:-6px; right:-8px; background:var(--danger); color:#fff;
    border-radius:10px; font-size:10px; padding:1px 5px; min-width:16px; text-align:center;
}

.container{max-width:1180px; margin:0 auto; padding:24px;}

.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px;}
.stat-card{background:var(--carte); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--ombre); border:1px solid var(--bordure); border-left:3px solid var(--marine);}
.stat-card.gold{border-left-color:var(--slate);}
.stat-card.forest{border-left-color:var(--succes);}
.stat-card.danger{border-left-color:var(--danger);}
.stat-card .valeur{font-size:24px;font-weight:700;color:var(--texte);}
.stat-card .label{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

.panel{background:var(--carte); border-radius:var(--radius); box-shadow:var(--ombre); border:1px solid var(--bordure); padding:20px; margin-bottom:22px;}
.panel h2{margin-top:0; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--bordure); padding-bottom:10px; color:var(--texte);}

table{width:100%; border-collapse:collapse; font-size:12.5px;}
th, td{padding:9px 8px; text-align:left; border-bottom:1px solid var(--bordure);}
th{color:var(--gris); text-transform:uppercase; font-size:10.5px; letter-spacing:.3px; font-weight:600;}
tbody tr:hover{background:#fafbfc;}

.tag{padding:2px 9px; border-radius:4px; font-size:11px; font-weight:600; display:inline-block;}
.tag-present{background:var(--succes-bg); color:var(--succes);}
.tag-retard{background:var(--warn-bg); color:var(--warn);}
.tag-absent{background:var(--danger-bg); color:var(--danger);}
.tag-conge{background:var(--info-bg); color:var(--accent);}
.tag-actif{background:var(--succes-bg); color:var(--succes);}
.tag-bloque{background:var(--danger-bg); color:var(--danger);}

/* --- Carte professionnelle / QR --- */
.pro-card{
    max-width:320px; margin:0 auto 22px; background:var(--carte); border-radius:var(--radius); overflow:hidden;
    box-shadow: var(--ombre); border:1px solid var(--bordure);
}
.pro-card-top{background:var(--marine); color:#fff; padding:14px 20px; text-align:center; font-size:13px; letter-spacing:.3px;}
.pro-card-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #fff; margin:-38px auto 8px; display:block; background:#ddd; box-shadow:var(--ombre);}
.pro-card-body{padding:6px 20px 20px; text-align:center;}
.pro-card-body h3{margin:4px 0 0; font-size:15px;}
.pro-card-body .poste{color:var(--gris); font-size:12.5px; margin-bottom:12px;}
.pro-card-matricule{font-family:'SFMono-Regular',Consolas,monospace; background:var(--bg); border:1px solid var(--bordure); padding:3px 10px; border-radius:4px; display:inline-block; font-size:12.5px; margin-bottom:14px;}
.qr-zone{cursor:zoom-in; padding:12px; background:#fff; border:1px solid var(--bordure); border-radius:6px; display:inline-block;}
.qr-zone canvas, .qr-zone img{display:block;}

.qr-modal-overlay{
    position:fixed; inset:0; background:rgba(15,23,32,.72); display:none;
    align-items:center; justify-content:center; z-index:999;
}
.qr-modal-overlay.actif{display:flex;}
.qr-modal-box{background:#fff; padding:28px; border-radius:var(--radius); text-align:center;}

.scan-zone{background:var(--marine-dark); border-radius:var(--radius); padding:16px; text-align:center;}
#lecteur-qr{width:100%; max-width:340px; margin:0 auto 12px; border-radius:6px; overflow:hidden;}
.select-camera{margin-bottom:10px;max-width:340px;}

.badge-notif{
    position:fixed; top:20px; right:20px; background:#fff; border-left:3px solid var(--marine);
    box-shadow: 0 6px 20px rgba(20,30,45,0.15); padding:13px 16px; border-radius:6px; max-width:320px;
    z-index:1000; animation: glisser .25s ease; font-size:13px;
}
@keyframes glisser{from{transform:translateX(20px);opacity:0;} to{transform:translateX(0);opacity:1;}}

.print-fiche{max-width:400px; margin:30px auto; border:1px solid var(--bordure); border-radius:var(--radius); padding:24px; text-align:center;}
.print-fiche h2{color:var(--marine);}
@media print{
    .no-print{display:none !important;}
    body{background:#fff;}
}

.otp-modal{position:fixed; inset:0; background:rgba(15,23,32,.72); display:none; align-items:center; justify-content:center; z-index:999;}
.otp-modal.actif{display:flex;}
.otp-box{background:#fff; padding:28px; border-radius:var(--radius); width:100%; max-width:300px; text-align:center;}
.otp-inputs{display:flex; gap:10px; justify-content:center; margin:16px 0;}
.otp-inputs input{width:42px; height:48px; text-align:center; font-size:20px;}