/* STARFLEX — Espace Citoyen (Phase 2).
   Extends assets/starflex.css; reuses the same tokens so the portal and the
   public site stay visually one platform. */

/* ── Auth screens ─────────────────────────────────────────── */
.auth-wrap{
  min-height:calc(100vh - 66px);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(28,111,176,.16), transparent 60%),
    radial-gradient(700px 380px at 95% 8%, rgba(232,150,58,.16), transparent 62%),
    var(--bg);
  display:flex;align-items:flex-start;justify-content:center;
  padding:48px 20px 70px;
}
.auth-card{
  width:100%;max-width:480px;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:34px 30px 30px;
}
.auth-card.wide{max-width:620px}
.auth-head{text-align:center;margin-bottom:26px}
.auth-head img{height:52px;margin:0 auto 16px}
.auth-head h1{font-family:var(--font-head);font-size:26px;color:var(--blue-ink);margin-bottom:8px}
.auth-head p{color:var(--muted);font-size:15px}

.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,111,176,.14);
}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

.btn-full{width:100%;justify-content:center;display:flex}
.btn[disabled]{opacity:.62;cursor:not-allowed}

.form-msg{display:none;margin:4px 0 14px;font-size:14px;font-weight:600;border-radius:10px;padding:11px 13px;line-height:1.45}
.form-msg.show{display:block}
.form-msg.err{background:#fdecec;color:#b3261e;border:1px solid #f7c9c6}
.form-msg.ok{background:#e8f6ee;color:#0f7a43;border:1px solid #bfe6d1}
.form-msg.info{background:#eaf3fb;color:var(--blue-dark);border:1px solid #cfe0f0}

.auth-alt{text-align:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.auth-alt a{color:var(--blue);font-weight:700;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

/* OTP boxes */
.otp-row{display:flex;gap:10px;justify-content:center;margin:6px 0 18px}
.otp-row input{
  width:52px;height:60px;text-align:center;font-size:26px;font-weight:800;font-family:var(--font-head);
  border:1.5px solid var(--line);border-radius:12px;color:var(--blue-ink);
}
.otp-row input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,111,176,.14)}
@media(max-width:420px){.otp-row input{width:44px;height:54px;font-size:22px}}
.demo-code{
  background:#fff7ec;border:1px dashed var(--orange);border-radius:12px;padding:12px 14px;
  text-align:center;font-size:14px;color:#8a5a13;margin-bottom:16px;
}
.demo-code b{font-family:var(--font-head);font-size:22px;letter-spacing:3px;color:var(--orange-dark);display:block;margin-top:4px}

/* ── Dashboard ────────────────────────────────────────────── */
.dash{background:var(--bg);min-height:calc(100vh - 66px);padding:30px 0 64px}
.dash-top{
  background:linear-gradient(135deg,var(--blue-ink),var(--blue));color:#fff;
  border-radius:20px;padding:28px 30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  box-shadow:0 14px 34px -22px rgba(13,58,92,.9);
}
.dash-hi{flex:1 1 280px}
.dash-hi .eyebrow{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:12px}
.dash-hi h1{font-family:var(--font-head);font-size:clamp(23px,3.2vw,31px);font-weight:800;line-height:1.15;margin-bottom:8px}
.dash-hi p{font-size:15px;opacity:.92;max-width:52ch}

.ring{position:relative;width:132px;height:132px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg)}
.ring .val{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.ring .val b{font-family:var(--font-head);font-size:32px;font-weight:800;line-height:1}
.ring .val span{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;opacity:.86;margin-top:3px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px 18px 16px}
.stat .ico{font-size:21px;margin-bottom:9px}
.stat b{display:block;font-family:var(--font-head);font-size:27px;font-weight:800;color:var(--blue-ink);line-height:1}
.stat span{display:block;font-size:13.4px;color:var(--muted);margin-top:5px}

.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.panel-head h2{font-family:var(--font-head);font-size:19px;color:var(--blue-ink)}
.panel-head p{color:var(--muted);font-size:13.8px;margin-top:3px}

.tabs{display:flex;gap:6px;overflow-x:auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:6px;margin-top:20px}
.tabs button{
  flex:1 1 auto;white-space:nowrap;border:0;background:none;font-family:var(--font-body);
  font-size:14.3px;font-weight:700;color:var(--muted);padding:11px 14px;border-radius:10px;cursor:pointer;transition:.15s;
}
.tabs button:hover{background:#eef4fa;color:var(--blue)}
.tabs button.on{background:var(--blue);color:#fff}

.list{display:grid;gap:14px}
.item{
  border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;gap:16px;align-items:flex-start;
  transition:border-color .15s,box-shadow .15s;
}
.item:hover{border-color:#cfe0f0;box-shadow:var(--shadow)}
.item.done{background:#f7fbf8;border-color:#cfe8da}
.item .body{flex:1 1 auto;min-width:0}
.item h3{font-family:var(--font-head);font-size:16px;color:var(--blue-ink);margin-bottom:5px}
.item p{color:var(--muted);font-size:14.2px;margin-bottom:9px}
.item .meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.item .side{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
@media(max-width:640px){
  .item{flex-direction:column}
  .item .side{align-items:stretch;width:100%}
  .item .side .btn{width:100%;justify-content:center}
}

.chip{display:inline-flex;align-items:center;gap:5px;background:#eef4fa;color:var(--blue-dark);
  border-radius:999px;padding:5px 11px;font-size:12.4px;font-weight:700}
.chip.pts{background:#fdf1e3;color:#a1620d}
.chip.ok{background:#e8f6ee;color:#0f7a43}
.chip.grey{background:#f1f3f7;color:var(--muted)}

.btn-sm{padding:9px 16px;font-size:13.6px;border-radius:10px}
.btn-outline{background:#fff;color:var(--blue);border:1.6px solid var(--blue)}
.btn-outline:hover{background:#eef4fa}

/* Certificate */
.cert{
  border:2px solid var(--orange);border-radius:18px;padding:26px;text-align:center;
  background:linear-gradient(160deg,#fffdf9,#fff6ea);
}
.cert .seal{font-size:40px;margin-bottom:10px}
.cert h3{font-family:var(--font-head);font-size:20px;color:var(--blue-ink);margin-bottom:6px}
.cert .lvl{display:block;width:fit-content;background:var(--orange);color:#fff;border-radius:999px;
  padding:6px 18px;font-weight:800;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin:10px auto 14px}
.cert .code{font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:3px;color:var(--blue-ink);
  background:#fff;border:1px dashed var(--orange);border-radius:12px;padding:12px;display:inline-block;margin-bottom:12px}
.cert p{color:var(--muted);font-size:14px}
.cert-locked{text-align:center;padding:30px 20px}
.cert-locked .seal{font-size:38px;opacity:.4;margin-bottom:12px}
.progress{height:10px;background:#eef1f6;border-radius:999px;overflow:hidden;margin:14px auto 10px;max-width:420px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--orange));border-radius:999px;transition:width .5s}

/* Notifications / activity */
.note{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.note:last-child{border-bottom:0}
.note .dot{width:9px;height:9px;border-radius:50%;background:var(--line);margin-top:7px;flex:0 0 auto}
.note.unread .dot{background:var(--orange)}
.note h4{font-family:var(--font-head);font-size:14.8px;color:var(--blue-ink);margin-bottom:3px}
.note p{color:var(--muted);font-size:13.8px}
.note time{display:block;color:var(--muted);font-size:12.3px;margin-top:4px}

.empty{text-align:center;color:var(--muted);padding:34px 16px;font-size:14.6px}
.empty .ico{font-size:34px;opacity:.45;margin-bottom:10px}
.skeleton{background:linear-gradient(90deg,#eef1f6,#f7f9fc,#eef1f6);background-size:200% 100%;
  animation:sfshim 1.2s infinite;border-radius:12px;height:76px}
@keyframes sfshim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(13,58,92,.55);display:none;align-items:center;justify-content:center;
  padding:20px;z-index:100}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:18px;max-width:600px;width:100%;max-height:88vh;overflow:auto;padding:28px}
.modal-box h2{font-family:var(--font-head);font-size:21px;color:var(--blue-ink);margin-bottom:6px}
.modal-box .sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.modal-body{font-size:15px;line-height:1.7;color:var(--ink);margin-bottom:22px;white-space:pre-line}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions .btn{flex:1 1 auto;justify-content:center;display:flex}

.opt{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:.15s;font-size:15px}
.opt:hover{border-color:var(--blue);background:#f7fbff}
.opt input{accent-color:var(--blue);width:18px;height:18px}
.opt.sel{border-color:var(--blue);background:#eef4fa}

/* Portal user chip in the header */
.user-chip{display:flex;align-items:center;gap:9px;margin-left:auto}
.user-chip .av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-head);font-size:14px}
.user-chip .nm{font-size:14px;font-weight:700;color:var(--blue-ink)}
@media(max-width:640px){.user-chip .nm{display:none}}