/* =====================================================================
   Menés Academy — application UI (auth, student portal, staff console)
   Extends css/style.css. Load style.css first.
   ===================================================================== */

/* ---------------- Form messages ---------------- */
.form-message{
  padding: .8rem 1rem; border-radius: var(--radius); font-size: .88rem;
  border:1px solid transparent; margin-bottom: 1rem;
}
.form-message-info   { background:#EAF0FA; border-color:#C3D3EE; color:#1B355F; }
.form-message-error  { background:#FBEAE9; border-color:#EBC3C1; color:#7E2420; }
.form-message-success{ background:#E8F2EB; border-color:#BFDCC9; color:#175334; }

/* ---------------- Auth pages ---------------- */
.auth-page{
  min-height:100vh; display:grid; grid-template-columns: 1fr 1fr;
  background: var(--pergamena);
}
@media (max-width: 900px){ .auth-page{ grid-template-columns: 1fr; } }

.auth-aside{
  background: var(--inchiostro-deep); color: var(--pergamena-on-dark);
  padding: clamp(2rem,5vw,4rem); display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-aside::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 50% at 30% 10%, rgba(151,117,63,.22), transparent 70%);
}
.auth-aside > *{ position:relative; }
.auth-aside .brand-word{ color: var(--bianco); }
.auth-aside h2{ color: var(--bianco); margin-top: 2rem; max-width: 16ch; }
.auth-aside p{ margin-top: 1rem; max-width: 40ch; }
.auth-aside-quote{ border-top:1px solid rgba(237,230,214,.16); padding-top:1.4rem; font-size:.9rem; }
.auth-aside-quote b{ display:block; color: var(--bronzo-soft); margin-top:.5rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width: 900px){ .auth-aside{ display:none; } }

.auth-main{ display:flex; align-items:center; justify-content:center; padding: clamp(1.5rem,5vw,3rem); }
.auth-card{ width:100%; max-width: 420px; }
.auth-card h1{ font-size: var(--step-3); }
.auth-card > p.sub{ margin-top:.6rem; margin-bottom: 2rem; }
.auth-card form{ display:flex; flex-direction:column; gap: 1rem; }
.auth-alt{ margin-top:1.5rem; font-size:.9rem; text-align:center; color: var(--inchiostro-soft); }
.auth-alt a{ color: var(--nastro-blu); font-weight:600; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-back{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color: var(--inchiostro-soft); margin-bottom: 2rem; }
.auth-back:hover{ color: var(--inchiostro); }

/* ---------------- App shell (portal + console) ---------------- */
.app-header{
  background: var(--inchiostro-deep); color: var(--pergamena-on-dark);
  border-bottom:1px solid rgba(237,230,214,.14);
  position:sticky; top:0; z-index:100;
}
.app-header .nav{ padding-block: .8rem; }
.app-header .brand-word{ color: var(--bianco); }
.app-user{ display:flex; align-items:center; gap:.8rem; }
.app-user-chip{
  display:flex; align-items:center; gap:.6rem; padding:.35rem .35rem .35rem .9rem;
  border:1px solid rgba(237,230,214,.2); border-radius:999px;
}
.app-user-chip span{ font-size:.85rem; color: var(--pergamena-on-dark); }
.app-user-chip .avatar{
  width:30px; height:30px; border-radius:50%; background: var(--bronzo); color: var(--bianco);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700;
}
.role-badge{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:.2rem .5rem; border-radius:999px; background: var(--bronzo); color: var(--bianco);
}
.link-quiet{ font-size:.85rem; color: var(--pergamena-on-dark-soft); }
.link-quiet:hover{ color: var(--bianco); }

.app-body{ padding-block: clamp(1.5rem, 4vw, 3rem); min-height: 60vh; }

/* Page title row */
.app-title{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom: 2rem; }
.app-title h1{ font-size: var(--step-3); }
.app-title p{ margin-top:.4rem; font-size:.95rem; }

/* Tab bar for the console sections */
.app-tabs{ display:flex; gap:.25rem; border-bottom:1px solid var(--pergamena-line); margin-bottom:2rem; overflow-x:auto; }
.app-tab{
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:.85rem 1.1rem; font-size:.9rem; font-weight:600; color: var(--inchiostro-soft);
  cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:.5rem;
}
.app-tab:hover{ color: var(--inchiostro); }
.app-tab.active{ color: var(--inchiostro); border-color: var(--bronzo); }
.app-tab .count{
  font-family: var(--font-mono); font-size:.68rem; background: var(--pergamena-deep);
  border-radius:999px; padding:.1rem .45rem; color: var(--inchiostro-soft);
}
.app-tab.active .count{ background: var(--bronzo); color: var(--bianco); }
.app-section{ display:none; }
.app-section.active{ display:block; }

/* ---------------- Status pills ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:.4em; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
.pill-not_started, .pill-new, .pill-draft      { background:#EDE7DA; border-color:#DCD1B9; color:#6B6250; }
.pill-in_progress, .pill-contacted, .pill-shortlisted,
.pill-requested, .pill-pending                 { background:#EAF0FA; border-color:#C3D3EE; color:#1B355F; }
.pill-action_required                          { background:#FBF1E2; border-color:#E8D2AC; color:#7A5714; }
.pill-submitted, .pill-interview, .pill-qualified,
.pill-confirmed                                { background:#EDE9F7; border-color:#CFC5E8; color:#42327A; }
.pill-approved, .pill-offer, .pill-enrolled,
.pill-completed, .pill-converted               { background:#E8F2EB; border-color:#BFDCC9; color:#175334; }
.pill-rejected, .pill-cancelled, .pill-no_show,
.pill-closed, .pill-withdrawn                  { background:#FBEAE9; border-color:#EBC3C1; color:#7E2420; }
.pill-on_hold                                  { background:#EDE7DA; border-color:#DCD1B9; color:#6B6250; }

/* ---------------- Milestone tracker ---------------- */
.tracker{ display:flex; flex-direction:column; }
.tracker-step{ display:grid; grid-template-columns: 44px 1fr; gap: 1.1rem; position:relative; padding-bottom: 1.8rem; }
.tracker-step:last-child{ padding-bottom:0; }
.tracker-rail{ display:flex; flex-direction:column; align-items:center; }
.tracker-dot{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--pergamena-line);
  background: var(--bianco); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:.8rem; color: var(--inchiostro-soft); flex-shrink:0; z-index:1;
}
.tracker-line{ width:1px; flex:1; background: var(--pergamena-line); margin-top:.3rem; }
.tracker-step:last-child .tracker-line{ display:none; }
.tracker-step[data-status="approved"] .tracker-dot{ background: var(--verde-tricolore); border-color: var(--verde-tricolore); color:#fff; }
.tracker-step[data-status="approved"] .tracker-line{ background: var(--verde-tricolore); opacity:.35; }
.tracker-step[data-status="in_progress"] .tracker-dot{ background: var(--nastro-blu); border-color: var(--nastro-blu); color:#fff; }
.tracker-step[data-status="submitted"] .tracker-dot{ border-color: var(--nastro-blu); color: var(--nastro-blu); }
.tracker-step[data-status="action_required"] .tracker-dot{ background: var(--bronzo); border-color: var(--bronzo); color:#fff; }
.tracker-step[data-status="rejected"] .tracker-dot{ background: var(--rosso-tricolore); border-color: var(--rosso-tricolore); color:#fff; }
.tracker-body{ padding-top:.4rem; }
.tracker-body .flex-between{ align-items:flex-start; }
.tracker-body h4{ font-size: var(--step-0); font-family: var(--font-body); font-weight:700; }
.tracker-body .note{ margin-top:.4rem; font-size:.88rem; color: var(--inchiostro-soft); }
.tracker-body .meta{ margin-top:.35rem; font-size:.76rem; color: var(--bronzo); font-family: var(--font-mono); }

/* ---------------- Data table ---------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--pergamena-line); border-radius: var(--radius); background: var(--bianco); }
table.data{ width:100%; border-collapse: collapse; min-width: 640px; }
table.data th{
  text-align:left; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--bronzo); font-weight:700; padding: .9rem 1rem; border-bottom:1px solid var(--pergamena-line);
  background: var(--pergamena-deep); white-space:nowrap;
}
table.data td{ padding: .9rem 1rem; border-bottom:1px solid var(--pergamena-line); font-size:.9rem; vertical-align: middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tbody tr:hover{ background: rgba(220,209,185,.18); }
table.data td .strong{ font-weight:600; color: var(--inchiostro); }
table.data td .sub{ font-size:.78rem; color: var(--inchiostro-soft); }
.mono{ font-family: var(--font-mono); font-size:.82rem; }
.row-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }

.btn-sm{ padding:.45rem .8rem; font-size:.78rem; border-radius: var(--radius-sm); }
.btn-outline{ background:transparent; border:1px solid var(--pergamena-line); color: var(--inchiostro); }
.btn-outline:hover{ border-color: var(--inchiostro); }
.btn-danger{ background: transparent; border:1px solid #EBC3C1; color:#7E2420; }
.btn-danger:hover{ background:#FBEAE9; }

/* ---------------- Cards / panels ---------------- */
.panel{ background: var(--bianco); border:1px solid var(--pergamena-line); border-radius: var(--radius); padding: clamp(1.2rem,3vw,1.8rem); }
.panel + .panel{ margin-top: 1.2rem; }
.panel-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom: 1.3rem; }
.panel-head h3{ font-size: var(--step-1); }
.panel-head p{ font-size:.85rem; margin-top:.2rem; }

.app-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; align-items:start; }
@media (max-width: 960px){ .app-grid{ grid-template-columns: 1fr; } }

.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-bottom: 2rem; }
@media (max-width: 760px){ .stat-row{ grid-template-columns: repeat(2,1fr);} }
.stat-box{ background: var(--bianco); border:1px solid var(--pergamena-line); border-radius:var(--radius); padding:1.2rem; }
.stat-box b{ display:block; font-family: var(--font-mono); font-size: var(--step-2); color: var(--inchiostro); line-height:1.1; }
.stat-box span{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--bronzo); }

/* The key-value list now lives in css/style.css, because the generated
   /explore pages use it and only load that sheet. */

/* Timeline of advisor notes */
.timeline{ display:flex; flex-direction:column; gap:1.2rem; }
.timeline-item{ display:grid; grid-template-columns: 34px 1fr; gap:.9rem; }
.timeline-avatar{ width:34px; height:34px; border-radius:50%; background: var(--inchiostro-deep); color: var(--bronzo-soft); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; }
.timeline-body{ font-size:.9rem; }
.timeline-body .who{ font-weight:600; }
.timeline-body .when{ font-size:.74rem; color: var(--inchiostro-soft); font-family: var(--font-mono); }
.timeline-body p{ margin-top:.35rem; color: var(--inchiostro); }
.timeline-item.internal .timeline-body p{ border-left:2px solid var(--bronzo); padding-left:.7rem; }
.internal-tag{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color: var(--bronzo); font-weight:700; margin-left:.4rem; }

/* Document list */
.doc-list{ display:flex; flex-direction:column; }
.doc-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--pergamena-line); flex-wrap:wrap; }
.doc-item:last-child{ border-bottom:none; }
.doc-item .doc-name{ font-weight:600; font-size:.9rem; }
.doc-item .doc-meta{ font-size:.76rem; color: var(--inchiostro-soft); }

.file-drop{
  border:1px dashed var(--pergamena-line); border-radius: var(--radius);
  padding: 1.4rem; text-align:center; background: var(--pergamena-deep);
}
.file-drop input[type=file]{ display:block; margin: .8rem auto 0; font-size:.85rem; max-width:100%; }

/* Empty state inside panels */
.panel-empty{ text-align:center; padding: 2.2rem 1rem; color: var(--inchiostro-soft); font-size:.9rem; }

/* ---------------- Modal ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(16,25,42,.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1.2rem; z-index: 500;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  background: var(--pergamena); border-radius: var(--radius); width:100%; max-width: 560px;
  max-height: 90vh; overflow-y:auto; border:1px solid var(--pergamena-line);
  box-shadow: 0 24px 60px rgba(16,25,42,.3);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.3rem clamp(1.2rem,3vw,1.8rem); border-bottom:1px solid var(--pergamena-line); }
.modal-head h3{ font-size: var(--step-1); }
.modal-close{ background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color: var(--inchiostro-soft); padding:0 .3rem; }
.modal-close:hover{ color: var(--inchiostro); }
.modal-body{ padding: clamp(1.2rem,3vw,1.8rem); display:flex; flex-direction:column; gap:1rem; }
.modal-foot{ padding: 1.1rem clamp(1.2rem,3vw,1.8rem); border-top:1px solid var(--pergamena-line); display:flex; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; }

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(120%);
  background: var(--inchiostro-deep); color: var(--bianco); padding:.85rem 1.4rem;
  border-radius: var(--radius); font-size:.88rem; z-index: 900; box-shadow: 0 12px 30px rgba(16,25,42,.35);
  transition: transform .35s var(--ease); max-width: calc(100vw - 2rem);
}
.toast.show{ transform:translateX(-50%) translateY(0); }
.toast.error{ background: var(--rosso-tricolore); }
.toast.success{ background: var(--verde-tricolore); }

/* ---------------- Loading ---------------- */
.loading{ display:flex; align-items:center; justify-content:center; gap:.7rem; padding: 3rem 1rem; color: var(--inchiostro-soft); font-size:.9rem; }
.spinner{ width:18px; height:18px; border:2px solid var(--pergamena-line); border-top-color: var(--bronzo); border-radius:50%; animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------------- Filter toolbar ---------------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:1.2rem; }
.toolbar .dir-search{ flex:1 1 240px; }
.toolbar select{
  padding:.6rem .8rem; border:1px solid var(--pergamena-line); border-radius:var(--radius);
  background: var(--bianco); font-family: var(--font-body); font-size:.85rem; color: var(--inchiostro);
}

/* Booking: slot chips */
.slot-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap:.5rem; }
.slot{
  border:1px solid var(--pergamena-line); background: var(--bianco); border-radius: var(--radius);
  padding:.6rem .4rem; font-size:.85rem; font-family: var(--font-mono); cursor:pointer; text-align:center;
  color: var(--inchiostro); transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.slot:hover{ border-color: var(--nastro-blu); }
.slot.selected{ background: var(--nastro-blu); border-color: var(--nastro-blu); color: var(--bianco); }
.slot[disabled]{ opacity:.4; cursor:not-allowed; }

/* Channel cards on the booking page */
.channel-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width: 800px){ .channel-grid{ grid-template-columns:1fr; } }
.channel-card{
  display:flex; flex-direction:column; gap:.5rem; padding:1.4rem; background: var(--bianco);
  border:1px solid var(--pergamena-line); border-radius: var(--radius);
  transition: border-color .2s var(--ease), transform .3s var(--ease);
}
.channel-card:hover{ border-color: var(--bronzo); transform: translateY(-2px); }
.channel-card svg{ width:26px; height:26px; color: var(--bronzo); }
.channel-card h4{ font-size: var(--step-0); font-family: var(--font-body); font-weight:700; }
.channel-card p{ font-size:.85rem; }
.channel-card .channel-value{ font-family: var(--font-mono); font-size:.82rem; color: var(--nastro-blu); margin-top:auto; padding-top:.5rem; }