/* ============================================================
   Medical Concept - Area riservata
   Usa i token e i componenti di styles.css (.btn, .field, .form, .eyebrow)
   ============================================================ */

.area{min-height:320px}
.area[hidden],[hidden]{display:none!important}

.area-msg{
  margin:0; padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:.92rem; line-height:1.5;
  background:var(--c-mist); color:var(--c-ink);
}
.area-msg--error{background:#f6e7e5; color:#8a2a22}
.area-msg--ok{background:#e8efe6; color:#2f5a2a}

/* Barra superiore */
.area-bar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:28px; margin-bottom:32px;
  border-bottom:1px solid var(--c-mist);
}
.area-bar h2{margin:0; font-size:clamp(1.6rem, 3vw, 2.2rem)}

/* Tab categorie */
.area-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px}
.area-tab{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 22px;
  border:1.5px solid var(--c-mist); border-radius:999px;
  background:var(--c-white); color:var(--c-ink);
  font:inherit; font-size:.85rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.area-tab:hover{border-color:var(--c-gold); color:var(--c-gold)}
.area-tab.is-active{background:var(--c-ink); border-color:var(--c-ink); color:var(--c-paper)}
.area-tab__count{
  min-width:22px; padding:2px 7px; border-radius:999px;
  background:var(--c-mist); color:var(--c-ink);
  font-size:.72rem; letter-spacing:0; text-align:center;
}
.area-tab.is-active .area-tab__count{background:var(--c-gold); color:var(--c-paper)}

/* Griglia materiali */
.area-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.area-empty{grid-column:1/-1; margin:0; padding:48px 0; text-align:center; color:#6b6b6b}
.area-card{
  display:flex; flex-direction:column;
  background:var(--c-white);
  border:1px solid var(--c-mist); border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.area-card__media{
  display:block; width:100%; aspect-ratio:16/9;
  object-fit:cover; background:var(--c-ink);
}
.area-card__body{display:flex; flex-direction:column; gap:10px; padding:24px; flex:1}
.area-card__body h3{margin:0; font-size:1.15rem; line-height:1.3}
.area-card__body p{margin:0; font-size:.93rem; color:#525252}
.area-card__meta{font-size:.8rem!important; color:#6b6b6b!important}
.area-card__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:12px}
.area-card__actions .btn{padding:11px 20px; font-size:.78rem}
.area-badge{
  align-self:flex-start;
  padding:3px 10px; border-radius:999px;
  background:var(--c-mist); color:var(--c-ink);
  font-size:.7rem; font-weight:700; letter-spacing:.12em;
}

/* Pannelli di gestione */
.area-panel{
  background:var(--c-white);
  border:1px solid var(--c-mist); border-radius:var(--radius);
  padding:clamp(24px, 3vw, 40px);
  box-shadow:var(--shadow-soft);
  margin-bottom:32px;
}
.area-panel h3{margin:0 0 .4em; font-size:1.3rem}
.area-hint{margin:0 0 24px; font-size:.9rem; color:#6b6b6b}
.area-upload{max-width:720px}
.area-upload input[type="file"]{padding:12px 14px; background:var(--c-paper)}

/* Coda di caricamento */
.area-queue{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.area-queue:empty{display:none}
.area-queue li{
  display:grid; grid-template-columns:minmax(0,1fr) 140px auto;
  align-items:center; gap:14px; font-size:.88rem;
}
.area-queue__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.area-progress{height:6px; border-radius:999px; background:var(--c-mist); overflow:hidden}
.area-bar-fill{display:block; height:100%; width:0; background:var(--c-gold); transition:width .2s linear}
.area-queue__state{min-width:70px; text-align:right; color:#6b6b6b}
.area-queue__state.is-ok{color:#2f5a2a; font-weight:600}
.area-queue__state.is-error{color:#8a2a22; font-weight:600}

/* Elenco gestione */
.area-filters{max-width:520px; margin:16px 0 24px}
.area-list{display:grid}
.area-row{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) auto;
  align-items:center; gap:18px;
  padding:16px 0; border-top:1px solid var(--c-mist);
}
.area-row__main{display:flex; flex-direction:column; gap:6px; min-width:0}
.area-row__main strong{overflow-wrap:anywhere}
.area-row__ctrl{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.area-row__ctrl select{
  padding:10px 12px; border:1px solid var(--c-mist); border-radius:var(--radius-sm);
  background:var(--c-white); font:inherit; font-size:.88rem; color:var(--c-ink);
  min-width:0;
}
.area-row__actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.area-row__actions .btn{padding:10px 18px; font-size:.75rem}
.area-row__status{font-size:.78rem; color:#2f5a2a}
.area-danger:hover{background:#8a2a22; border-color:#8a2a22; color:var(--c-paper)}

@media (max-width:860px){
  .area-row{grid-template-columns:1fr}
  .area-row__actions{justify-content:flex-start}
  .area-queue li{grid-template-columns:1fr auto}
  .area-progress{grid-column:1/-1; order:3}
}
@media (max-width:640px){
  .area-grid{grid-template-columns:1fr}
  .area-row__ctrl{grid-template-columns:1fr}
}