:root{
  color-scheme: light;
  --bg: #f7f9fb;
  --primary: #1E4C7A;
  --secondary: #8892A6;
  --accent: #F5B400;
  --shadow-soft: 0 12px 30px rgba(30,76,122,0.12);
  --shadow-soft-lg: 0 20px 50px rgba(30,76,122,0.15);
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0;
}

main{min-height:100vh}
section{scroll-margin-top:96px}
html{scroll-behavior:smooth}

/* Typography */
.section-title{font-size:1.875rem; /* 30px */ font-weight:600; color:#0b1724; line-height:1.1}
@media(min-width:768px){.section-title{font-size:2.25rem}}
.section-subtitle{font-size:1.125rem;color:var(--secondary);max-width:40rem}

/* Harmonized section headings used for subsections (Promotions en cours, Gestion des profils) */
.section-heading{font-size:1.25rem; /* 20px */ font-weight:700; color:#0b1724; margin:0}
@media(min-width:768px){.section-heading{font-size:1.5rem /* 24px */}}

/* Buttons and cta */
.cta-button{
  display:inline-flex;align-items:center;gap:0.5rem;border-radius:999px;background:var(--primary);color:#fff;padding:0.75rem 1.5rem;font-weight:600;box-shadow:var(--shadow-soft);transition:transform .12s ease,box-shadow .12s ease;
}
.cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft-lg)}

.card{border-radius:1.25rem;background:#fff;padding:1.5rem;box-shadow:var(--shadow-soft);transition:all .18s linear}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft-lg)}

/* Form inputs */
input[type=text], input[type=date], input[type=file], input, textarea, select{
  border-radius:0.75rem;border:1px solid #e6eef6;background:#fff;padding:.75rem 1rem;font-size:.9375rem;color:#0f172a;outline:none;
}
textarea{min-height:6rem;resize:vertical}
input:focus, textarea:focus{border-color:var(--primary);box-shadow:0 0 0 6px rgba(30,76,122,0.06)}

button:disabled{opacity:.5;cursor:not-allowed}

/* utility */
.text-secondary{color:var(--secondary)}
.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}

/* Admin layout helpers */
.admin-wrapper{max-width:1100px;margin:36px auto;padding:28px}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.admin-title{font-size:28px;font-weight:700;color:#0b1724}

/* A helper row used in the header for subtitle (left) and user block (right)
  index.php uses an inline .admin-header-row; provide a class here so we can
  control responsive behaviour from CSS rather than inline styles. */
.admin-header-row{display:flex;align-items:center;gap:32px;margin-top:6px;width:100%}
.admin-sub{color:var(--secondary);font-size:13px;flex:1;min-width:0;white-space:normal;overflow-wrap:break-word;word-break:break-word;margin:0}
.logout-pill{border:1px solid rgba(11,23,36,.08);padding:10px 16px;border-radius:999px;background:#fff;color:var(--primary);font-weight:600}

/* Header user area: avoid overlap between "connected as" and logout button */
.admin-user{display:flex;flex-direction:row;align-items:center;min-width:0;flex:0 0 auto;gap:12px;white-space:nowrap}
.admin-user .connected-as{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--secondary);font-size:13px;max-width:320px}
.admin-user .username{font-weight:600;color:var(--primary)}
.logout-pill{flex:0 0 auto;position:relative;z-index:2}

/* Mobile adjustments: stack the subtitle and user block to avoid forced narrow columns
  and prevent the subtitle text from being compressed into a vertical line. */
@media(max-width:720px){
  .admin-header-row{flex-direction:column;align-items:flex-start;gap:8px}
  .admin-sub{font-size:13px}
  /* Put the user block on its own row, let its contents use normal wrapping and
    space the connected-as and logout button horizontally if space allows. */
  .admin-user{width:100%;flex-direction:row;justify-content:space-between;align-items:center;white-space:normal;gap:8px}
  .admin-user .connected-as{white-space:normal;max-width:calc(100% - 140px);overflow-wrap:break-word}
  .logout-pill{width:auto;min-width:120px;text-align:center}
}

/* Two-column layout for admin: left form (wide) and right list */
.two-col-layout{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:1024px){.two-col-layout{grid-template-columns:2fr 1fr}}
.left-col{min-width:0}
.right-col{min-width:0}

/* Form helpers */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row{margin-bottom:12px}
.input, .textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e6eef6;background:#fff}
.textarea{min-height:96px}

/* PDF controls toggled by the checkbox in the add-promotion form */
/* Layout: checkbox + label on one line; the .pdf-controls block sits below at full width */
/* PDF controls: flexible layout that wraps and never forces overflow
   Checkbox + label stay compact; .pdf-controls occupy full available width
   and their inputs are limited to container width. */
.pdf-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.pdf-row > input[type=checkbox]{width:18px;height:18px;margin:0;flex:0 0 auto;order:1}
.pdf-row label[for="use_urlpdf"]{margin:0;flex:0 0 auto;order:1}

/* Force pdf-controls to always break to a new row and occupy full width:
  ordering + flex:1 1 100% makes it drop under the checkbox/label and prevents
  horizontal overflow even when the contained native file input has long text. */
.pdf-row > .pdf-controls{display:none;flex-direction:column;gap:8px;margin-top:6px;flex-basis:100%;flex:1 1 100%;min-width:0;order:2;width:100%;box-sizing:border-box}

/* Ensure file and text inputs inside pdf-controls don't exceed container width */
.pdf-row > .pdf-controls input[type=file]{max-width:100%;width:100%;box-sizing:border-box}
.pdf-row > .pdf-controls input[type=text], .pdf-row > .pdf-controls .input{width:100%;max-width:100%;box-sizing:border-box}

/* On medium screens ensure pdf-controls drop below the checkbox/label instead of overflowing */
@media(max-width:920px){
  .pdf-row{align-items:flex-start}
  .pdf-row > .pdf-controls{width:100%}
}

/* When the checkbox is checked, show the controls (placed on their own row) */
#use_urlpdf:checked ~ .pdf-controls, .pdf-row #use_urlpdf:checked ~ .pdf-controls{display:flex}

/* Strong override: always place the pdf-controls below the checkbox/label.
   Using CSS Grid here guarantees the controls occupy a full row and cannot
   be pushed to the right by long native file-input content. This rule is
   intentionally specific so it overrides previous flex-based styles. */
.pdf-row{
  display:grid !important;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  align-items:center;
  gap:8px;
}
.pdf-row > input[type="checkbox"]{grid-column:1;grid-row:1;justify-self:start}
.pdf-row > label[for="use_urlpdf"]{grid-column:2;grid-row:1;align-self:center;margin:0}
.pdf-row > .pdf-controls{grid-column:1 / -1;grid-row:2;width:100%;box-sizing:border-box;margin-top:6px;display:none;flex-direction:column}

/* ensure checked state still reveals controls */
#use_urlpdf:checked ~ .pdf-controls, .pdf-row #use_urlpdf:checked ~ .pdf-controls{display:flex}

/* limit the native file input button + text width to avoid overflow */
.pdf-row .pdf-upload{max-width:220px}
.pdf-row .pdf-upload + .input{margin-top:8px}
/* When the checkbox is checked, show the controls (placed on their own row) */
#use_urlpdf:checked ~ .pdf-controls{display:flex}

/* Profiles list */
.profiles-list{display:flex;flex-direction:column;gap:10px}
.profile-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:8px;background:#fbfdff;border:1px solid rgba(11,23,36,0.03)}
.status-active{color:#16a34a;font-weight:700}

/* Profile utilities used by admin index.php */
.rounded-2xl{border-radius:1rem}
.p-3{padding:.75rem}
.shadow-soft{box-shadow:var(--shadow-soft)}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.font-medium{font-weight:500}
.text-slate-500{color:#6b7280}
.text-slate-400{color:#9aa6b2}
.text-green-600{color:#16a34a}
.profile-meta{font-size:.875rem;color:var(--secondary)}
.role-badge{background:#f8fafc;border:1px solid rgba(11,23,36,0.04);padding:6px 10px;border-radius:999px;font-size:.8rem;color:#64748b}

/* promos list */
.promotions-list{display:flex;flex-direction:column;gap:1rem}
.promo-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:1.25rem 1.5rem;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 18px 30px rgba(11,23,36,0.06);
  border:1px solid rgba(11,23,36,0.03);
  transition:transform .12s ease,box-shadow .12s ease;
}
.promo-card:hover{transform:translateY(-4px);box-shadow:0 30px 40px rgba(11,23,36,0.08)}
.promo-left{display:flex;flex-direction:column;gap:6px;min-width:0}
.promo-code{text-transform:uppercase;color:var(--secondary);font-size:.75rem;letter-spacing:.12em}
.promo-title{font-weight:700;font-size:1rem;color:#0b1724}
.promo-desc{color:var(--secondary);font-size:.95rem}
.promo-valid{color:#8898a6;font-size:.82rem;margin-top:6px}

.promo-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* Make promotion action links look like compact pills and show inline on desktop */
.promo-actions{display:flex;flex-direction:row;gap:8px;align-items:center}
.promo-link{font-size:13px;color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#fff;border:1px solid rgba(11,23,36,0.06);box-shadow:0 6px 18px rgba(2,6,23,0.06);font-weight:600}
.promo-link:hover{background:linear-gradient(180deg,#fff,#fbfdff);transform:translateY(-2px);box-shadow:0 12px 30px rgba(2,6,23,0.06)}
.promo-link svg{width:16px;height:16px;opacity:.9}

/* Thumbnail placeholder when image is present (optional) */
.promo-thumb{width:72px;height:56px;border-radius:10px;object-fit:cover;margin-right:12px;border:1px solid rgba(11,23,36,0.04)}

/* Mobile: stack content and actions */
@media(max-width:720px){
  .promo-card{grid-template-columns:1fr;}
  /* Make the right column align horizontally on narrow screens so action
     links and the delete button sit on the same line. Allow wrapping if space
     is tight and enable horizontal scrolling if necessary. */
  .promo-right{display:flex;flex-direction:row;align-items:center;gap:8px}
  .promo-actions{flex-direction:row;gap:8px;flex-wrap:wrap;align-items:center}
  /* ensure the delete form/button sits inline with the action links */
  .delete-form{display:inline-flex;align-items:center;margin:0;padding:0}
  .delete-form .btn-delete{display:inline-flex;align-items:center}
}

/* Profile cards - harmonized with promo cards */
.profile-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 14px 30px rgba(11,23,36,0.05);
  border:1px solid rgba(11,23,36,0.03);
}
.profile-left{min-width:0}
.profile-name{font-weight:700;color:#0b1724}
.profile-meta{font-size:.9rem;color:var(--secondary)}
.profile-right{display:flex;align-items:center;gap:12px}
.status-badge{padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem}
.status-active{background:rgba(16,185,129,0.06);color:#10b981;border:1px solid rgba(16,185,129,0.12)}
.status-pending{background:rgba(249,115,22,0.04);color:#f97316;border:1px solid rgba(249,115,22,0.08)}
.role-badge{background:#f8fafc;border:1px solid rgba(11,23,36,0.04);padding:6px 10px;border-radius:999px;font-size:.8rem;color:#64748b}
.profile-actions{display:flex;gap:8px;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(11,23,36,0.06);background:#fff;font-weight:600}
.btn-success{background:linear-gradient(180deg,var(--primary),#153e62);color:#fff;border:none;box-shadow:var(--shadow-soft)}
.btn-outline{background:#fff;border:1px solid rgba(11,23,36,0.06);color:var(--primary)}

/* Form card tweaks */
.form-card{padding:1.5rem;border-radius:14px}
.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.form-actions{display:flex;justify-content:flex-end}

.form-card{
    padding:1.5rem;
    border-radius:14px;
    /* subtle card background + thin border for a light, elevated look */
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border:1px solid rgba(11,23,36,0.04);
    box-shadow: 0 6px 18px rgba(23,31,37,0.06);
    transition: box-shadow .15s ease, transform .12s ease;
}

@media(max-width:720px){
  .profile-card{grid-template-columns:1fr;}
  .profile-right{justify-content:flex-start}
  .form-actions{justify-content:flex-end;margin-top:8px}
}

/* Responsive: stack form fields on small screens to avoid overflow */
@media (max-width: 720px) {
  .form-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* Make sure each form-row stretches and doesn't overflow */
  .form-row{
    width:100%;
    margin-bottom:12px;
  }

  /* Slightly reduce paddings on small screens to fit better */
  .form-card{
    padding:1rem;
  }

  /* File input and pdf controls stack vertically on mobile */
  .pdf-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .pdf-controls{
    width:100%;
    margin-top:0;
  }

  input[type="file"], .input, .textarea{
    width:100%;
  }

  /* ensure action buttons wrap nicely on small widths */
  .form-actions{
    flex-direction:column-reverse;
    gap:10px;
  }
}
/* small utilities used by admin templates */
.promo-link{font-size:13px;color:var(--primary);text-decoration:none}
.btn-danger{background:#fff;border:1px solid rgba(239,68,68,0.12);color:#ef4444;padding:8px 12px;border-radius:999px;font-weight:600}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.mb-3{margin-bottom:.75rem}
.mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem}
.space-y-3 > * + *{margin-top:.75rem}
.space-y-4 > * + *{margin-top:1rem}

/* small toast */
.toast{position:fixed;right:20px;bottom:26px;background:#0b1724;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.3);z-index:9999}

/* responsive tweaks */
@media(max-width:880px){
  .two-col{grid-template-columns:1fr}
}