body {
    min-height: 75rem;
    padding-top: 4.5rem;
}

.table td .badge {
    vertical-align: middle;
    line-height: 1.2;
}

.table td .btn-outline-danger.border-0 {
    border-color: transparent !important;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.table td .btn-outline-danger.border-0:hover {
    opacity: 1;
    background-color: rgba(220, 53, 69, 0.1);
}

.table td .d-inline-flex {
    flex-wrap: nowrap;
}

/*.banniere {*/
/*    height: 100px;*/
/*    width: auto;*/
/*}*/



/*.dropdown-menu {*/
/*  border: none;*/
/*  box-shadow: 0 4px 8px rgba(0,0,0,0.3);*/
/*}*/

/*.dropdown-item {*/
/*  border-radius: 4px;*/
/*  margin: 2px 8px;*/
/*  transition: all 0.2s;*/
/*}*/

/*.dropdown-item:hover {*/
/*  background-color: rgba(255,255,255,0.1);*/
/*}*/

/*.nav-item.dropdown:hover .dropdown-menu {*/
/*  display: block;*/
/*  position: absolute;*/
/*  left: 100%;*/
/*  top: 0;*/
/*  margin-left: 0.1rem;*/
/*}*/

/*@media (max-width: 767.98px) {*/
/*  .nav-item.dropdown:hover .dropdown-menu {*/
/*    position: static;*/
/*    margin-left: 0;*/
/*  }*/
/*}*/


 @media (min-width: 768px) {
    /* Ouverture au survol limitee aux menus de navigation laterale
       (cf. _sidebar_desktop.html). Exclut le menu utilisateur de la navbar
       qui doit rester pilote par Bootstrap/Popper (click + positionnement
       auto-flip), sinon dropdown-menu-end n'est pas applique et le panneau
       deborde du viewport. */
    .nav-item.dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
    }

    .nav-item.dropdown-menu {
      margin-top: 0;
    }
  }

  .dropdown-toggle::after {
    display: inline-block;
    margin-inline-start: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }

  /* Style pour les options de livraison */
#modeLivraison option[value="retrait_magasin"] {
    background-color: #e8f5e8;
}

#modeLivraison option[value="livraison_domicile"] {
    background-color: #fff3cd;
}

#modeLivraison option[value="express"] {
    background-color: #f8d7da;
    font-weight: bold;
}

/* Animation pour l'apparition des champs */
#adresseInputs {
    transition: all 0.3s ease-in-out;
}
/* Les design tokens (--accent, --bg, --border, ...) sont définis dans
   static/css/theme.css, chargé après ce fichier : source de vérité unique. */
body { background:var(--bg); font-family:'DM Sans',sans-serif; color:var(--text); }
.rx-page { max-width:960px; margin:2rem auto; padding:0 1rem 4rem; }
.rx-header { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.rx-header-icon { width:48px; height:48px; border-radius:var(--radius-sm); background:var(--accent); display:grid; place-items:center; color:#fff; font-size:1.25rem; flex-shrink:0; box-shadow:var(--shadow-md); }
.rx-header h1 { font-size:1.5rem; font-weight:600; margin:0; }
.rx-header p  { margin:0; color:var(--muted); font-size:.9rem; }
.rx-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.25rem; overflow:hidden; }
.rx-card-header { padding:.875rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.625rem; font-weight:600; font-size:.875rem; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; }
.rx-card-header i { color:var(--accent); font-size:1rem; }
.rx-card-body { padding:1.25rem; }
.field-group { margin-bottom:1rem; }
.field-group:last-child { margin-bottom:0; }
.field-group label { display:block; font-size:.8125rem; font-weight:500; color:var(--muted); margin-bottom:.375rem; letter-spacing:.02em; }
.field-group input:not([type="radio"]):not([type="checkbox"]), .field-group select, .field-group textarea { width:100%; padding:.625rem .875rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:.9375rem; color:var(--text); background:var(--surface); transition:border-color .15s,box-shadow .15s; outline:none; box-sizing:border-box; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.field-group input[disabled] { background:var(--bg); color:var(--muted); cursor:not-allowed; }
.field-group .errorlist { list-style:none; padding:0; margin:.375rem 0 0; font-size:.8rem; color:var(--danger); }
.rx-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.rx-table th { padding:.625rem .875rem; text-align:start; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1.5px solid var(--border); background:var(--bg); }
.rx-table td { padding:.75rem .875rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.rx-table tr:last-child td { border-bottom:none; }
.rx-table tr:hover td { background:var(--bg); }
.badge-type { display:inline-block; padding:.2rem .625rem; border-radius:20px; font-size:.75rem; font-weight:600; background:var(--accent-light); color:var(--accent-text); }
.badge-danger { background:#fff0f0; color:var(--danger); }
.btn { display:inline-flex; align-items:center; gap:.375rem; padding:.625rem 1.25rem; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:.9375rem; font-weight:500; cursor:pointer; border:none; text-decoration:none; transition:all .15s; }
.btn-primary { background:var(--accent-text, #0f766e); color:#fff; }
.btn-primary:hover { background:var(--accent-text-hover, #0b5d57); color:#fff; box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--bg); color:var(--muted); border:1.5px solid var(--border); }
.btn-secondary:hover { background:var(--border); color:var(--text); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; color:#fff; }
.btn-sm { padding:.35rem .75rem; font-size:.8125rem; }
.btn-outline-warning { background:#fff8e1; color:#b45309; border:1.5px solid #fcd34d; }
.btn-outline-warning:hover { background:#fcd34d; color:#78350f; }
.btn-outline-danger { background:#fff0f0; color:var(--danger); border:1.5px solid #fca5a5; }
.btn-outline-danger:hover { background:#fca5a5; color:#7f1d1d; }
.rx-actions { display:flex; justify-content:space-between; align-items:center; padding-top:1.25rem; margin-top:.5rem; border-top:1.5px solid var(--border); }
.alert-danger { background:#fff0f0; border:1.5px solid #fca5a5; border-radius:var(--radius-sm); padding:.875rem 1rem; color:#7f1d1d; font-size:.875rem; margin-bottom:1.25rem; }
.alert-danger ul { margin:.375rem 0 0 1rem; padding:0; }
.alert-warning { background:#fff8e1; border:1.5px solid #fcd34d; border-radius:var(--radius-sm); padding:.875rem 1rem; color:#78350f; font-size:.875rem; margin-bottom:1.25rem; }
.alert-info { background:var(--accent-light); border:1.5px solid var(--accent); border-radius:var(--radius-sm); padding:.875rem 1rem; color:var(--accent-text); font-size:.875rem; margin-bottom:1.25rem; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px) { .grid-2 { grid-template-columns:1fr; } }
.info-row { display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem; }
.info-row:last-child { margin-bottom:0; }
.info-label { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.info-value { font-size:.9375rem; color:var(--text); }


/* ─── Action buttons — Notion/Linear style ──────────────── */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    font-size: .875rem;
}
.btn-action:hover                { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.btn-action.btn-view:hover       { color: var(--accent); background: var(--accent-light); border-color: var(--accent); }
.btn-action.btn-edit:hover       { color: #d97706;       background: #fef9c3;              border-color: #fcd34d; }
.btn-action.btn-delete:hover     { color: var(--danger); background: #fef2f2;              border-color: #fca5a5; }

/* ─── Mobile responsive fixes ───────────────────────────── */
@media (max-width: 991.98px) {
    .rx-page {
        margin: 1rem auto;
        padding: 0 .75rem 2rem;
        max-width: 100%;
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .rx-header h1 {
        font-size: 1.25rem;
    }
    .rx-card {
        margin-bottom: 1rem;
    }
    .rx-card-header {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .rx-table {
        font-size: .75rem;
    }
    .rx-table th,
    .rx-table td {
        padding: .5rem .5rem;
    }
    .rx-actions {
        flex-direction: column;
        gap: .5rem;
    }
    .rx-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Fix Bootstrap card conflict with rx-card ───────────── */
/* Bootstrap resets card styles — force rx-card to always show */
.rx-card,
div.rx-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
}
.rx-card-header,
div.rx-card-header {
    padding: .875rem 1.25rem !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
}
.rx-card-body,
div.rx-card-body {
    padding: 1.25rem !important;
    background: var(--surface) !important;
}

/* Fix h1 color override from base.css */
.rx-header h1 {
    color: var(--text) !important;
}

/* Fix info-row display */
.info-row {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 1rem;
}
.info-row:last-child { margin-bottom: 0; }
.info-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.info-value {
    font-size: .9375rem;
    color: var(--text);
}

td .btn {
  display: inline-flex;
  align-items: center;
}