:root{
  --navy:#1B4374;
  --navy-dark:#123252;
  --orange:#E26313;
  --orange-light:#FBE2CE;
  --muted:#4E6B8A;
  --white:#FFFFFF;
  --grey-bg:#F7F8FA;
  --border:#E4E8EE;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:Arial, Helvetica, sans-serif;
  color:#222;
  background:var(--grey-bg);
  line-height:1.5;
}
h1,h2,h3,.brand-word{font-family:'Poppins', Arial, sans-serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

/* ---------- TOPBAR ---------- */
.topbar{
  background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; box-shadow:0 2px 10px rgba(0,0,0,0.08);
}
.topbar .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px;}
.topbar .brand .logo-mark{
  width:34px; height:34px; border-radius:9px; background:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.topbar .user-info{display:flex; align-items:center; gap:14px; font-size:14px;}
.topbar .user-info .role-pill{
  background:rgba(255,255,255,0.15); padding:4px 12px; border-radius:14px; font-size:12px; font-weight:600;
}
.btn-logout{
  background:rgba(255,255,255,0.12); color:var(--white); border:1px solid rgba(255,255,255,0.25);
  padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600;
}
.btn-logout:hover{background:rgba(255,255,255,0.22);}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:32px 24px 60px 24px;}
.page-title{font-size:22px; color:var(--navy); font-weight:700; margin-bottom:4px;}
.page-sub{color:var(--muted); font-size:14px; margin-bottom:28px;}

/* ---------- CARD ---------- */
.card{
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:24px; margin-bottom:24px;
}
.card h2{font-size:16px; color:var(--navy); margin-bottom:16px;}

/* ---------- FORM ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=tel],
.field textarea, .field select{
  width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:9px; font-size:14px;
  background:var(--white);
}
.field textarea{resize:vertical; min-height:70px;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--orange);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:640px){.field-row{grid-template-columns:1fr;}}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:24px;
  font-weight:700; font-size:14px; border:2px solid transparent; background:var(--orange); color:var(--white);
}
.btn:hover{background:#c9550f;}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--border);}
.btn-outline:hover{background:var(--grey-bg);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn:disabled{opacity:.6; cursor:not-allowed;}

/* ---------- COLIS ROWS (formulaire multi-ajout) ---------- */
.colis-row{
  border:1.5px dashed var(--border); border-radius:12px; padding:16px; margin-bottom:14px; position:relative;
}
.colis-row .remove-row{
  position:absolute; top:10px; right:10px; background:none; border:none; color:#c0392b;
  font-size:13px; font-weight:700;
}

/* ---------- COLIS LIST ---------- */
.colis-list{display:flex; flex-direction:column; gap:12px;}
.colis-item{
  display:flex; gap:14px; align-items:flex-start; border:1px solid var(--border); border-radius:12px; padding:14px;
}
.colis-item .thumb{
  width:64px; height:64px; border-radius:9px; object-fit:cover; background:var(--grey-bg); flex-shrink:0;
}
.colis-item .thumb-placeholder{
  width:64px; height:64px; border-radius:9px; background:var(--grey-bg); display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:11px; flex-shrink:0; text-align:center;
}
.colis-item .info{flex:1; min-width:0;}
.colis-item .info .desc{font-size:14px; font-weight:700; color:#222; margin-bottom:3px;}
.colis-item .info .meta{font-size:12.5px; color:var(--muted);}
.colis-item .status-col{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;}

.badge{
  display:inline-block; padding:5px 12px; border-radius:14px; font-size:12px; font-weight:700;
}

.empty-state{text-align:center; color:var(--muted); padding:36px 20px; font-size:14px;}

.msg{padding:12px 16px; border-radius:9px; font-size:13.5px; margin-bottom:16px;}
.msg-error{background:#fce4e2; color:#c0392b;}
.msg-success{background:#e3f6ea; color:#1a7d3c;}

/* ---------- LOGIN ---------- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); padding:24px;
}
.login-box{background:var(--white); border-radius:16px; padding:36px; max-width:420px; width:100%;}
.login-logo{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:6px;}
.login-logo .logo-mark{
  width:42px; height:42px; border-radius:11px; background:var(--orange); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.login-title{text-align:center; font-size:19px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.login-sub{text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:26px;}
.tabs{display:flex; border-bottom:1.5px solid var(--border); margin-bottom:22px;}
.tab{flex:1; text-align:center; padding:10px; font-weight:700; font-size:13.5px; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1.5px;}
.tab.active{color:var(--orange); border-color:var(--orange);}
.hidden{display:none !important;}

/* ---------- TABLE (équipe) ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.filter-chip{
  padding:7px 14px; border-radius:16px; font-size:12.5px; font-weight:600; border:1.5px solid var(--border);
  color:var(--muted); background:var(--white);
}
.filter-chip.active{background:var(--navy); color:var(--white); border-color:var(--navy);}
.status-select{padding:6px 10px; border-radius:8px; border:1.5px solid var(--border); font-size:12.5px; font-weight:600;}