/* ============================================================================
   MANGANELLI · Portale Ordini — Design System (linea A "Chiaro & rifinito")
   Foglio di stile unico, pronto da sostituire agli stili attuali.
   Convenzione classi: prefisso .mg-  (namespaced, non entra in conflitto).
   ============================================================================ */

/* ----- Font ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* ----- Design tokens ----- */
:root {
  /* Brand */
  --mg-green:        #7CB342;   /* azione primaria */
  --mg-green-hover:  #6AA033;
  --mg-green-soft:   #F3F9EE;   /* sfondo tenue */
  --mg-green-border: #D3E4C4;
  --mg-dark:         #14532D;   /* verde scuro / secondario */
  --mg-dark-hover:   #0F3D22;
  --mg-leaf:         #8CC152;   /* accento chiaro logo */

  /* Stati */
  --mg-amber:      #B26A00;  --mg-amber-bg: #FDF0DC;   /* bozza / da validare */
  --mg-success:    #2E7D32;  --mg-success-bg: #E4F3E0; /* confermato */
  --mg-danger:     #C0392B;  --mg-danger-bg: #FBEBEA;  /* elimina / annulla */
  --mg-info:       #2F6FB0;  --mg-info-bg: #E7F0FA;    /* orzo distico */

  /* Categorie prodotto (pallini) */
  --mg-cat-duro:   #E0A82E;  /* grano duro  */
  --mg-cat-tenero: #7CB342;  /* grano tenero */
  --mg-cat-distico:#5B94D6;  /* orzo distico */
  --mg-cat-hybrid: #A07BD6;  /* orzo hybrid  */

  /* Neutri */
  --mg-bg:        #F1F3F2;   /* sfondo pagina */
  --mg-card:      #FFFFFF;
  --mg-ink:       #1F2A24;   /* testo principale */
  --mg-ink-2:     #3B473C;   /* testo secondario */
  --mg-muted:     #6B7669;   /* testo tenue */
  --mg-faint:     #8CA08D;   /* etichette / meta */
  --mg-border:    #E6E9E6;
  --mg-border-2:  #DDE2DD;   /* bordo input */
  --mg-line:      #EDEFED;   /* separatori */

  /* Forma & profondità */
  --mg-radius:    12px;
  --mg-radius-lg: 16px;
  --mg-radius-sm: 10px;
  --mg-shadow:    0 24px 60px -30px rgba(20,83,45,.35);
  --mg-shadow-btn:0 8px 18px -8px rgba(124,179,66,.7);

  /* Tipografia */
  --mg-font:      'Manrope', system-ui, -apple-system, sans-serif;
  --mg-font-head: 'Poppins', var(--mg-font);
}

/* ----- Reset minimale ----- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--mg-font);
  color: var(--mg-ink);
  background: var(--mg-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mg-success); text-decoration: none; }
a:hover {color: #ffffff;}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.mg-page      { min-height: 100vh; display: flex; flex-direction: column; }
.mg-container {margin: 0 auto;width: 100%;padding: 28px;}
.mg-grid      { display: grid; gap: 24px; }
.mg-row       { display: flex; gap: 24px; align-items: flex-start; }

/* ============================================================================
   NAV BAR
   ============================================================================ */
.mg-nav {
  height: 72px; background: var(--mg-card);
  border-bottom: 1px solid var(--mg-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px;
}
.mg-brand      { display: flex; align-items: center; gap: 12px; }
.mg-brand__txt { line-height: 1; font-family: var(--mg-font-head); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.mg-brand__txt small { font-size: 11px; font-weight: 600; color: var(--mg-muted); }
.mg-brand__sub { font-size: 8px; letter-spacing: .14em; color: var(--mg-leaf); font-weight: 700; margin-top: 4px; }
.mg-nav__right { display: flex; align-items: center; gap: 26px; }
.mg-client     { font-family: var(--mg-font-head); font-weight: 700; font-size: 14px; color: var(--mg-dark); }
.mg-user       { display: flex; align-items: center; gap: 10px; }
.mg-user__ava  { width: 40px; height: 40px; border-radius: 9px; background: var(--mg-green-soft); display: grid; place-items: center; }
.mg-user__name { font-family: var(--mg-font-head); font-weight: 600; font-size: 14px; line-height: 1.15; }
.mg-user__role { font-size: 12px; color: var(--mg-faint); }

/* Badge carrello */
.mg-cart { position: relative; }
.mg-cart__count {
  position: absolute; top: -6px; right: -8px;
  background: var(--mg-green); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ============================================================================
   CARD
   ============================================================================ */
.mg-card {
  background: var(--mg-card);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  padding: 28px 30px;
}
.mg-card--sm { border-radius: var(--mg-radius); padding: 16px; }
.mg-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 20px; border-bottom: 1px solid var(--mg-line); margin-bottom: 24px;
}
.mg-title    { font-family: var(--mg-font-head); font-weight: 700; font-size: 26px; color: var(--mg-dark); margin: 0; }
.mg-title--sm{ font-size: 20px; }
.mg-subtitle { font-size: 13px; color: var(--mg-faint); margin-top: 2px; }
.mg-label    { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--mg-faint); text-transform: uppercase; }

/* ============================================================================
   BOTTONI
   ============================================================================ */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--mg-radius-sm);
  font-family: var(--mg-font-head); font-weight: 700; font-size: 13px; letter-spacing: .03em;
  border: none; cursor: pointer; transition: background .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
}
.mg-btn--primary   {background: var(--mg-green);color: #fff;/* box-shadow: var(--mg-shadow-btn); */}
.mg-btn--primary:hover { background: var(--mg-green-hover); }
.mg-btn--dark      { background: var(--mg-dark); color: #fff; }
.mg-btn--dark:hover{ background: var(--mg-dark-hover); }
.mg-btn--ghost     { background: #fff; color: var(--mg-dark); border: 1px solid var(--mg-dark); }
.mg-btn--ghost:hover {background: var(--mg-dark);}
.button-statics:hover {color: #fff;}
#reset-search:hover {color: #fff;}
.mg-btn--danger    { background: #fff; color: var(--mg-danger); border: 1px solid #E7C4C4; }
.mg-btn--danger:hover { background: var(--mg-danger-bg); }
.mg-btn--danger-ghost { background: transparent; color: var(--mg-danger); }
.mg-btn--lg        { height: 52px; padding: 0 40px; font-size: 15px; letter-spacing: .04em; border-radius: 11px; }
.mg-btn--block     { width: 100%; }

/* ============================================================================
   CAMPI FORM
   ============================================================================ */
.mg-field       { display: flex; flex-direction: column; gap: 7px; }
.mg-field > label { font-size: 13px; font-weight: 700; color: var(--mg-ink-2); }
.mg-input, .mg-select, .mg-textarea {
  width: 100%; border: 1px solid var(--mg-border-2); border-radius: var(--mg-radius-sm);
  background: #fff; color: var(--mg-ink-2); font-family: var(--mg-font); font-size: 14px;
  padding: 0 14px; height: 46px;
}
.mg-textarea    { height: 96px; padding: 12px 14px; resize: vertical; }
.mg-input:focus, .mg-select:focus, .mg-textarea:focus {
  outline: none; border-color: var(--mg-green); box-shadow: 0 0 0 3px rgba(124,179,66,.18);
}
.mg-input--readonly { background: #F4F6F4; border-color: var(--mg-border); font-weight: 600; }
.mg-input::placeholder, .mg-textarea::placeholder { color: #9AA69C; }

/* Barra di ricerca */
.mg-search {
  display: flex; align-items: center; gap: 10px;
  height: 48px; background: #fff; border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius); padding: 0 16px; color: #9AA69C; font-size: 15px;
}
.mg-search input { border: none; outline: none; flex: 1; font: inherit; color: var(--mg-ink-2); background: transparent; }

/* ============================================================================
   STEPPER QUANTITÀ
   ============================================================================ */
.mg-stepper { display: inline-flex; align-items: center; gap: 8px; }
.mg-stepper__btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--mg-border-2);
  background: #fff; display: grid; place-items: center; font-size: 18px; color: var(--mg-muted);
  cursor: pointer; line-height: 1;
}
.mg-stepper__btn--plus { border-color: var(--mg-green); background: var(--mg-green-soft); color: #4E8A1E; }
.mg-stepper__val { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================================
   TABELLE
   ============================================================================ */
.mg-table-wrap {/* border: 1px solid var(--mg-line); */border-radius: var(--mg-radius);overflow: hidden;}
.mg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mg-table thead th {
  font-family: var(--mg-font-head); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mg-muted);
  background: #F6F8F5; padding: 13px 18px; text-align: left;
}
.mg-table tbody td { padding: 15px 18px; border-top: 1px solid #EFF1EF; }
.mg-table tbody tr:hover { background: #FAFBFA; }
.mg-table .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-table .center { text-align: center; }
.mg-row--draft { background: #FFFCF5; }          /* riga bozza evidenziata */
.mg-order-hash { font-family: ui-monospace, monospace; font-size: 12px; color: #9AA69C; }

/* ============================================================================
   BADGE DI STATO
   ============================================================================ */
.mg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.mg-badge::before { content: "●"; font-size: 9px; line-height: 1; }
.mg-badge--draft   { background: var(--mg-amber-bg);   color: var(--mg-amber); }
.mg-badge--valid   { background: var(--mg-amber-bg);   color: var(--mg-amber); }
.mg-badge--ok      { background: var(--mg-success-bg); color: var(--mg-success); }
.mg-badge--info    { background: var(--mg-info-bg);    color: var(--mg-info); }
.mg-badge--danger  { background: var(--mg-danger-bg);  color: var(--mg-danger); }

/* Etichetta categoria prodotto (con pallino) */
.mg-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mg-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.mg-cat--duro    { color: var(--mg-cat-duro); }
.mg-cat--tenero  { color: var(--mg-cat-tenero); }
.mg-cat--distico { color: var(--mg-cat-distico); }
.mg-cat--hybrid  { color: var(--mg-cat-hybrid); }

/* ============================================================================
   AZIONI TABELLA (bottoni icona)
   ============================================================================ */
.mg-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.mg-action--edit { background: #F79009; color: #fff; }
.mg-action--open { background: #fff; color: var(--mg-success); border: 1px solid var(--mg-green-border); }
.mg-action--open:hover { color: var(--mg-success);}
.mg-icon-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; border: 1px solid transparent; }

/* ============================================================================
   PAGINAZIONE
   ============================================================================ */
.mg-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.mg-pager__info { font-size: 13px; color: var(--mg-faint); }
.mg-pager__nums { display: flex; gap: 6px; }
.mg-pager__nums span {
  min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid #E1E5E1;
  display: grid; place-items: center; font-size: 13px; color: var(--mg-ink-2); cursor: pointer;
}
.mg-pager__nums .is-active { background: var(--mg-dark); color: #fff; font-weight: 700; border-color: var(--mg-dark); }
.mg-pager__nums .is-disabled { color: #B7C0B7; cursor: default; }

/* ============================================================================
   RIEPILOGO / TOTALI
   ============================================================================ */
.mg-summary {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--mg-green-soft); border: 1px solid var(--mg-green-border);
  border-radius: var(--mg-radius); padding: 18px 22px;
}
.mg-stat__label { font-size: 12px; color: #6B8A5C; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mg-stat__value { font-family: var(--mg-font-head); font-weight: 700; font-size: 22px; color: var(--mg-dark); }

/* Prezzo non ancora definito (sostituisce i confusi "€ 0") */
.mg-price-tbd { font-size: 12px; font-weight: 700; color: var(--mg-amber); background: var(--mg-amber-bg); padding: 4px 10px; border-radius: 999px; }

/* ============================================================================
   CATALOGO
   ============================================================================ */
.mg-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mg-prod-card {
  background: #fff; border: 1px solid #E9ECE9; border-radius: var(--mg-radius);
  padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mg-prod-card:hover { border-color: var(--mg-green-border); box-shadow: 0 10px 24px -16px rgba(20,83,45,.4); transform: translateY(-1px); }
.mg-prod-card__thumb { width: 52px; height: 52px; border-radius: 50%; background: var(--mg-green-soft); display: grid; place-items: center; flex: 0 0 auto; object-fit: cover; }
.mg-prod-card__name  { font-family: var(--mg-font-head); font-weight: 700; font-size: 15px; color: var(--mg-ink); }

/* Filtri */
.mg-filter-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: 14px; color: var(--mg-ink-2); cursor: pointer;
}
.mg-filter-item.is-active { background: var(--mg-green-soft); font-weight: 600; color: var(--mg-dark); }
.mg-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #C4CDBF; display: grid; place-items: center; }
.mg-filter-item.is-active .mg-check { background: var(--mg-green); border-color: var(--mg-green); }
.mg-filter-item .count { margin-left: auto; font-size: 12px; color: #9AA69C; }

/* ============================================================================
   SCHEDA PRODOTTO
   ============================================================================ */
.mg-breadcrumb { font-size: 13px; color: var(--mg-faint); margin-bottom: 16px; }
.mg-breadcrumb b { color: var(--mg-ink-2); }
.mg-prod-hero {
  width: 300px; height: 300px; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(135deg,#8FB86A,#5E8F3E); object-fit: cover; display: block;
}

/* ============================================================================
   MODALE + BACKDROP
   ============================================================================ */
.mg-backdrop {
  position: fixed; inset: 0; background: rgba(20,40,20,.45);
  display: grid; place-items: center; z-index: 50; padding: 24px;
}
.mg-modal {
  width: min(640px, 100%); background: #fff; border-radius: var(--mg-radius-lg);
  box-shadow: 0 30px 70px -20px rgba(20,40,20,.4); overflow: hidden;
}
.mg-modal__head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--mg-line); }
.mg-modal__head-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--mg-success-bg); display: grid; place-items: center; }
.mg-modal__title { font-family: var(--mg-font-head); font-weight: 700; font-size: 17px; color: var(--mg-dark); }
.mg-modal__close { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; background: none; border: none; }

/* ============================================================================
   MINI-CARRELLO (dropdown)
   ============================================================================ */
.mg-minicart { width: 380px; background: #fff; border-radius: var(--mg-radius); box-shadow: 0 20px 50px -18px rgba(20,40,20,.35); overflow: hidden; }
.mg-minicart__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--mg-line); }
.mg-minicart__row  { display: flex; align-items: center; gap: 12px; padding: 12px; }
.mg-minicart__row + .mg-minicart__row { border-top: 1px solid #F3F4F3; }
.mg-minicart__thumb { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--mg-green-soft); }
.mg-minicart__foot { background: var(--mg-green-soft); border-top: 1px solid #E4EFD9; padding: 16px 20px; }

/* ============================================================================
   LOGIN
   ============================================================================ */
.mg-login {
  width: min(900px, 100%); background: #fff; border: 1px solid var(--mg-border);
  border-radius: 20px; overflow: hidden; display: flex;
  box-shadow: 0 30px 70px -40px rgba(20,83,45,.4);
}
.mg-login__brand {
  flex: 0 0 380px; color: #fff; padding: 44px 40px;
  background: linear-gradient(155deg,#1B5E31,#0F3D22);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.mg-login__brand h2 { font-family: var(--mg-font-head); font-weight: 700; font-size: 26px; line-height: 1.25; margin: 0; }
.mg-login__brand p  { font-size: 14px; line-height: 1.6; color: #C7DDBB; margin: 12px 0 0; }
.mg-login__brand small { font-size: 12px; color: #9FBE90; letter-spacing: .1em; font-weight: 700; }
.mg-login__form  { flex: 1; padding: 48px; }
.mg-input-group  { height: 50px; border: 1px solid var(--mg-border-2); border-radius: var(--mg-radius-sm); padding: 0 14px; display: flex; align-items: center; gap: 10px; }
.mg-input-group input { border: none; outline: none; flex: 1; font: inherit; font-size: 15px; color: var(--mg-ink-2); background: transparent; }
.mg-input-group svg { flex: 0 0 auto; }
.mg-login__center { min-height: 100vh; display: grid; place-items: center; padding: 64px 28px; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.mg-footer { margin-top: auto; text-align: center; padding: 22px; font-size: 13px; color: var(--mg-faint); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 960px) {
  .mg-row { flex-direction: column; }
  .mg-catalog { grid-template-columns: repeat(2, 1fr); }
  .mg-nav { padding: 0 18px; }
}
@media (max-width: 620px) {
  .mg-catalog { grid-template-columns: 1fr; }
  .mg-container { padding: 16px; }
  .mg-card { padding: 20px 18px; }
}