/* =========================================================
   Espace pharmacie — El Houda Pharma
   (auth + espace avec sidebar, style clair « pro_1 »)
   ========================================================= */
:root{
    --p:#1e93ae; --p2:#0e3a53; --p100:#e3f2f6; --acc:#f5901f; --acc2:#d97b0d;
    --ink:#1a2b34; --muted:#6b7c85; --line:#e8eef1; --bg:#f4f8fa; --card:#fff;
    --ok:#12b3a6; --err:#e5484d; --wa:#25D366;
    --sh-sm:0 4px 14px rgba(46,92,110,.08); --sh-md:0 14px 34px rgba(46,92,110,.14);
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
body[dir="rtl"]{ font-family:'Cairo','Inter',sans-serif; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }

/* =============== AUTH (inscription / connexion) =============== */
.cl-auth{
    min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px;
    background:radial-gradient(900px 500px at 80% -10%,rgba(245,144,31,.16),transparent 60%),
               linear-gradient(160deg,#0e3a53 0%,#1e93ae 100%);
}
.cl-auth__inner{ width:100%; max-width:600px; }
.cl-back{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.9); font-weight:600; font-size:.9rem; margin-bottom:14px; }
.cl-back:hover{ color:#fff; }
.cl-back i{ transition:transform .18s ease; }
.cl-back:hover i{ transform:translateX(-3px); }
body[dir="rtl"] .cl-back i{ transform:scaleX(-1); }
body[dir="rtl"] .cl-back:hover i{ transform:scaleX(-1) translateX(-3px); }
.cl-card{ width:100%; max-width:600px; background:#fff; border-radius:22px; padding:32px 40px; box-shadow:0 30px 70px rgba(0,0,0,.28); }
.cl-card__head{ text-align:center; margin-bottom:18px; }
.cl-card__head img{ width:52px; height:52px; border-radius:14px; object-fit:cover; margin-bottom:9px; }
.cl-card__head h1{ font-family:'Poppins',sans-serif; font-size:1.3rem; margin:0 0 3px; color:var(--p2); }
.cl-card__head p{ margin:0; color:var(--muted); font-size:.88rem; }

/* 2 colonnes pour raccourcir le formulaire */
.cl-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }

.cl-field{ margin-bottom:12px; }
.cl-field label{ display:block; font-weight:600; font-size:.82rem; margin-bottom:5px; }
.cl-field input{
    width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 14px;
    font-size:.98rem; font-family:inherit; color:var(--ink); background:#f8fafb;
}
.cl-field input:focus{ outline:none; border-color:var(--p); box-shadow:0 0 0 4px rgba(30,147,174,.14); background:#fff; }
.cl-field--phone input{ direction:ltr; text-align:start; letter-spacing:1px; font-weight:600; }

.cl-btn{
    width:100%; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:1.02rem;
    padding:14px; border-radius:13px; color:#fff; display:flex; align-items:center; justify-content:center; gap:9px;
    background:linear-gradient(135deg,var(--p),var(--p2)); box-shadow:0 12px 26px rgba(14,58,83,.28);
    transition:transform .15s ease, opacity .15s ease;
}
.cl-btn:hover{ transform:translateY(-2px); }
.cl-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.cl-alt{ text-align:center; margin-top:16px; font-size:.9rem; color:var(--muted); }
.cl-alt a{ color:var(--p); font-weight:700; }
.cl-err{ background:rgba(229,72,77,.1); color:var(--err); border-radius:10px; padding:11px 14px; font-size:.88rem; margin-bottom:14px; }
.cl-err ul{ margin:0; padding-inline-start:18px; }
.cl-err__cta{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; background:var(--p); color:#fff; font-weight:700; font-size:.85rem; padding:8px 16px; border-radius:9px; }
.cl-err__cta:hover{ background:var(--p2); color:#fff; }

/* --- bloc géolocalisation --- */
.cl-geo{ border-radius:14px; padding:14px; margin-bottom:16px; font-size:.87rem; }
.cl-geo--wait{ background:#fff5e8; color:#b26a08; }
.cl-geo--ok{ background:rgba(18,179,166,.12); color:#0e938a; }
.cl-geo--err{ background:rgba(229,72,77,.1); color:var(--err); }
.cl-geo__top{ display:flex; align-items:center; gap:9px; font-weight:700; }
.cl-geo__top .dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex-shrink:0; }
.cl-geo--wait .dot{ animation:clPulse 1s infinite; }
.cl-geo__msg{ margin-top:7px; line-height:1.5; opacity:.95; }
.cl-geo__acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.cl-geo__btn{
    border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.82rem;
    padding:8px 14px; border-radius:9px; background:rgba(0,0,0,.08); color:inherit;
    display:inline-flex; align-items:center; gap:6px;
}
.cl-geo__btn:hover{ background:rgba(0,0,0,.14); }
.cl-geo__btn--wa{ background:var(--wa); color:#fff; }
@keyframes clPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* =============== ESPACE (sidebar + contenu) =============== */
.cl-shell{ display:flex; min-height:100vh; overflow-x:hidden; }

.cl-side{
    position:fixed; inset-block:0; inset-inline-start:0; width:250px; z-index:1040;
    background:#fff; border-inline-end:1px solid var(--line); display:flex; flex-direction:column;
}
.cl-side__brand{ display:flex; align-items:center; gap:11px; padding:18px 18px; border-bottom:1px solid var(--line); }
.cl-side__brand img{ width:42px; height:42px; border-radius:11px; object-fit:cover; }
.cl-side__brand b{ display:block; font-family:'Poppins',sans-serif; color:var(--p2); font-size:.95rem; line-height:1.2; }
.cl-side__brand span{ font-size:.7rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.cl-side__close{ display:none; margin-inline-start:auto; background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; }
.cl-nav{ flex:1; padding:12px; overflow-y:auto; }
.cl-nav__link{
    display:flex; align-items:center; gap:12px; padding:11px 13px; margin-bottom:3px; border-radius:11px;
    color:#4a5c65; font-weight:600; font-size:.93rem; transition:.15s;
}
.cl-nav__link i{ width:20px; text-align:center; color:#93a5ac; }
.cl-nav__link:hover{ background:#f1f6f8; color:var(--p); }
.cl-nav__link:hover i{ color:var(--p); }
.cl-nav__link.on{ background:var(--p); color:#fff; box-shadow:0 8px 18px rgba(30,147,174,.3); }
.cl-nav__link.on i{ color:#fff; }
.cl-side__foot{ padding:12px; }
.cl-logout{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; color:var(--err); font-weight:600; background:rgba(229,72,77,.08); }
.cl-logout:hover{ background:rgba(229,72,77,.16); }
.cl-side__overlay{ position:fixed; inset:0; background:rgba(14,58,83,.4); z-index:1035; display:none; }

.cl-main{ flex:1; min-width:0; max-width:100%; overflow-x:hidden; margin-inline-start:250px; display:flex; flex-direction:column; }
.cl-top{
    position:sticky; top:0; z-index:1030; height:64px; display:flex; align-items:center; gap:12px; padding:0 20px;
    background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.cl-top__burger{ display:none; flex-shrink:0; background:var(--p100); color:var(--p); border:none; width:40px; height:40px; border-radius:10px; cursor:pointer; }
.cl-top__title{ font-family:'Poppins',sans-serif; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-top__acts{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cl-lang{ display:inline-flex; gap:2px; background:#eef3f5; border-radius:9px; padding:3px; }
.cl-lang a{ min-width:30px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; color:var(--muted); border-radius:7px; }
.cl-lang a.on{ background:#fff; color:var(--p); box-shadow:var(--sh-sm); }

.cl-content{ padding:24px 20px 60px; }

/* --- badge de statut --- */
.cl-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; padding:5px 11px; border-radius:100px; }
.cl-badge--pending{ background:rgba(245,144,31,.15); color:var(--acc2); }
.cl-badge--approved{ background:rgba(18,179,166,.14); color:#0e938a; }

/* --- bandeau accueil --- */
.cl-hero{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.cl-hero h1{ font-family:'Poppins',sans-serif; font-size:1.4rem; margin:0 0 5px; }
.cl-hero p{ margin:0; color:var(--muted); }

/* --- panneau --- */
.cl-panel{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--sh-sm); margin-bottom:20px; scroll-margin-top:80px; }
.cl-panel__head{ display:flex; align-items:center; gap:11px; margin-bottom:16px; flex-wrap:wrap; }
.cl-panel__ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--p100); color:var(--p); }
.cl-panel__head h2{ font-family:'Poppins',sans-serif; font-size:1.08rem; margin:0; }

/* --- listing PDF --- */
.cl-pdf{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:linear-gradient(135deg,#fff7ed,#fff); border:1px solid #fde4c4; border-radius:14px; padding:16px; }
.cl-pdf__ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; font-size:1.4rem; flex-shrink:0; }
.cl-pdf__txt b{ display:block; font-size:.98rem; }
.cl-pdf__txt span{ font-size:.83rem; color:var(--muted); }
.cl-pdf__btn{ margin-inline-start:auto; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; font-weight:700; padding:11px 20px; border-radius:11px; display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(245,144,31,.3); }
.cl-pdf__btn:hover{ transform:translateY(-2px); color:#fff; }

/* --- formulaire de commande --- */
.cl-cat{ font-size:.72rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; }
.cl-prod{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin-bottom:7px; transition:border-color .15s ease, background .15s ease; }
.cl-prod:hover{ border-color:var(--p); background:#fbfeff; }
.cl-prod.has-qty{ border-color:var(--p); background:var(--p100); }
.cl-prod__img{ width:44px; height:44px; border-radius:9px; object-fit:cover; background:#f1f5f7; flex-shrink:0; }
.cl-prod__name{ flex:1; min-width:0; font-weight:600; font-size:.93rem; }
.cl-qty{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.cl-qty button{ width:32px; height:32px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; font-weight:800; color:var(--p); font-size:1rem; line-height:1; }
.cl-qty button:hover{ background:var(--p100); }
.cl-qty input{ width:56px; height:32px; text-align:center; border:1px solid var(--line); border-radius:8px; font-weight:700; font-family:inherit; color:var(--ink); }
.cl-qty input:focus{ outline:none; border-color:var(--p); }
.cl-note{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-family:inherit; font-size:.95rem; margin-top:14px; resize:vertical; }
.cl-note:focus{ outline:none; border-color:var(--p); }
.cl-submit{ margin-top:16px; }

/* --- mes commandes --- */
.cl-order{ border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:10px; }
.cl-order__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.cl-order__ref{ font-weight:800; font-family:'Poppins',sans-serif; }
.cl-order__date{ font-size:.8rem; color:var(--muted); }
.cl-order__items{ font-size:.88rem; color:var(--muted); line-height:1.7; }
.cl-st{ font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:100px; margin-inline-start:auto; }
.cl-st--new{ background:rgba(30,147,174,.14); color:var(--p); }
.cl-st--processing{ background:rgba(245,144,31,.15); color:var(--acc2); }
.cl-st--delivered{ background:rgba(18,179,166,.14); color:#0e938a; }
.cl-st--cancelled{ background:rgba(229,72,77,.1); color:var(--err); }

.cl-ok{ background:rgba(18,179,166,.12); color:#0e938a; border-radius:12px; padding:13px 16px; font-weight:600; margin-bottom:18px; }
.cl-empty{ text-align:center; color:var(--muted); padding:30px 14px; border:2px dashed var(--line); border-radius:14px; }
.cl-lock{ background:#fff5e8; color:#b26a08; border-radius:14px; padding:18px; text-align:center; }
.cl-lock i{ font-size:2rem; display:block; margin-bottom:10px; opacity:.7; }

/* =============== RESPONSIVE =============== */
@media (max-width:991px){
    .cl-side{ inset-inline-start:auto; left:0; right:auto; transform:translateX(-100%); transition:transform .28s ease; }
    .cl-main{ margin-inline-start:0; }
    .cl-top__burger{ display:inline-grid; place-items:center; }
    .cl-side__close{ display:block; }
    .cl-side-open .cl-side{ transform:translateX(0); }
    .cl-side-open .cl-side__overlay{ display:block; }
}
@media (max-width:575px){
    .cl-card{ padding:26px 20px; }
    .cl-grid2{ grid-template-columns:1fr; }
    .cl-content{ padding:16px 12px 50px; }
    .cl-panel{ padding:16px; border-radius:14px; }
    .cl-pdf__btn{ width:100%; justify-content:center; margin-inline-start:0; }
    .cl-prod__img{ display:none; }
    .cl-hero h1{ font-size:1.2rem; }
}