/* =========================
   RentPay — styles.css (clean + scoped home buttons)
   ========================= */

/* ===== Variabili ===== */
:root{
  --bg:#0b1220; --bg2:#0e1630; --card:#0f1b37; --border:rgba(255,255,255,.12);
  --text:#eaf2ff; --muted:#9fb3c8; --accent:#2ea0ff; --accentText:#04111f; --radius:18px;

  /* Nav */
  --rp-bg:#0b1220; --rp-panel:#0e1b2b; --rp-text:#e8f1ff; --rp-primary:#2ea0ff;
  --rp-border:rgba(255,255,255,.14);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}
section{scroll-margin-top:90px}

/* ===== Layout ===== */
.container{max-width:1000px;margin:0 auto;padding-inline:20px}
.container.narrow{max-width:900px}
.center{text-align:center}

/* ===== NAV ===== */
.rp-nav{
  position:sticky;top:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--rp-bg);border-bottom:1px solid var(--rp-border);
}
.rp-brand{display:flex;align-items:center;gap:10px;color:var(--rp-text)}
.rp-house{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--rp-primary),#7cc4ff)}
.rp-brand-text{font-weight:800;letter-spacing:.3px}
.rp-menu-desktop{display:flex;gap:16px;align-items:center}
.rp-menu-desktop a{color:var(--rp-text);opacity:.9}
.rp-menu-desktop a:hover,.rp-menu-desktop a.active{opacity:1;text-decoration:underline}
.rp-menu-desktop .rp-accent{padding:8px 12px;border-radius:10px;background:var(--rp-primary);color:#061423;font-weight:800;border:0}
.rp-hamburger{
  display:none;font-size:22px;line-height:1;padding:8px 10px;border:1px solid var(--rp-border);
  border-radius:10px;background:transparent;color:var(--rp-text)
}
@media (max-width:860px){.rp-hamburger{display:inline-block}.rp-menu-desktop{display:none}}

/* Drawer */
#rpBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:9998;display:none}
#rpBackdrop.show{display:block!important}
#rpBackdrop[hidden]{display:none!important;pointer-events:none!important}
#rpDrawer{
  position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100dvh;background:var(--rp-panel);
  border-left:1px solid var(--rp-border);padding:16px;display:flex;flex-direction:column;gap:8px;z-index:9999;
  transform:translateX(110%);transition:transform .25s ease
}
#rpDrawer.open{transform:translateX(0)!important}
@media (min-width:861px){#rpDrawer{transform:translateX(110%)!important}}
#rpDrawer a{color:var(--rp-text);padding:10px 8px;border-radius:10px}
#rpDrawer a:hover{background:rgba(255,255,255,.06)}
#rpDrawer .rp-accent{background:var(--rp-primary);color:#061423;font-weight:800}
.rp-drawer-head{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;background:var(--rp-panel);
  padding:12px 16px;margin:-16px -16px 8px;border-bottom:1px solid var(--rp-border)
}
.rp-close{background:transparent;color:var(--rp-text);border:1px solid var(--rp-border);border-radius:10px;padding:4px 10px;font-size:22px;line-height:1}
.rp-menu-desktop a:focus-visible,#rpDrawer a:focus-visible,.rp-close:focus-visible,.rp-hamburger:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px
}

/* ===== Hero / Card / Typography ===== */
.hero{
  max-width:860px;margin:24px auto 18px;border:1px solid var(--border);border-radius:var(--radius);padding:28px 22px;
  background:radial-gradient(80% 120% at 0% 0%, rgba(46,160,255,.18), transparent 60%),linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 10px 28px rgba(0,0,0,.35)
}
.hero h1{font-size:clamp(30px,5.2vw,46px);line-height:1.1;margin:0 0 12px}
.lead{opacity:.92;margin:0 0 16px}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 20px;margin:0 auto 22px;max-width:900px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);overflow:visible;
}

h2{margin:0 0 12px;font-size:clamp(22px,3.6vw,28px)}
h3{margin:0 0 8px}

/* ===== Footer ===== */
.footer{margin:36px auto 24px;opacity:.9;text-align:center;max-width:900px}
.footer .f-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.footer .f-links a{opacity:.85;font-size:14px}
.footer .f-links a:hover{opacity:1}

/* ===== Bottoni base (neutri, non rovinano login/dashboard) ===== */
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:12px;font-weight:800;cursor:pointer;border:none;
}
.btn.primary{background:var(--accent);color:var(--accentText)}

/* ===== Pill dei ruoli — SOLO in home ===== */
.home .role-toggle{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.home .pill{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:8px 14px; min-height:36px;
  border-radius:999px; font-weight:800; cursor:pointer;
  transition:background .15s ease, transform .06s ease, filter .15s ease;
}
.home .pill:hover{filter:brightness(1.08)}
.home .pill:active{transform:translateY(1px)}
.home .pill.active{background:var(--accent);color:var(--accentText);border-color:transparent}

/* ====== TABELLE (INVARIATE) ====== */
.container,.card,.section{overflow:visible}
.table-wrap{
  width:calc(100% - 4px);
  margin:2px auto;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain;
  border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.04);
  padding:0; position:relative;
}
.rp-table{
  display:table; border-collapse:collapse; width:max-content; min-width:760px; table-layout:auto;
}
.rp-table th,.rp-table td{
  white-space:nowrap; padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.12); font-size:1rem;
}
.rp-table thead th{font-weight:800;background:rgba(255,255,255,.08);position:sticky;top:0;z-index:1}
@media (max-width:720px){
  .rp-table{min-width:640px}
  .rp-table th,.rp-table td{padding:10px 12px;font-size:.95rem}
}
@media (max-width:560px){
  .rp-table{min-width:600px}
  .rp-table th,.rp-table td{padding:9px 10px;font-size:.92rem}
}
@media (max-width:400px){
  .rp-table{min-width:560px}
  .rp-table th,.rp-table td{padding:8px 9px;font-size:.9rem}
}

/* ===== Mobile tuning ===== */
@media (max-width:640px){
  .container{padding-inline:14px}
  .card{padding:16px 14px;border-radius:14px;width:100%;max-width:100%}
  body{font-size:15px}
  .hero h1{font-size:clamp(22px,6vw,28px)}
  h2{font-size:clamp(18px,4.8vw,22px);margin-bottom:10px}
  .lead{font-size:.95rem}
  .home .pill{padding:8px 12px}
  .btn{padding:10px 14px;border-radius:10px}
}
@media (max-width:400px){
  .container{padding-inline:12px}
  .card{padding:14px 12px;border-radius:12px}
}
/* ====== LOGIN (toggle pills coerenti con index) ====== */
.auth .role-toggle{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin:16px 0 18px;
}

.auth .pill{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:10px 18px;
  min-height:40px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, transform .06s ease, filter .15s ease;
}

.auth .pill:hover{ filter:brightness(1.08) }
.auth .pill:active{ transform:translateY(1px) }

.auth .pill.active{
  background:var(--accent);
  color:var(--accentText);
  border-color:transparent;
}

/* un filo di respiro sopra la form */
.auth .form-card{ margin-top: 6px; }

/* ==== FORM INPUTS (login) – look coerente scuro ==== */

/* contenitore già usato nel tuo HTML */
.input{
  display:flex; align-items:center; gap:10px;
  position: relative;
  background:#0e1b2b;                 /* scuro */
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: inset 0 0 0 0 transparent;
}

/* input & select base */
.input input,
.input select,
.input textarea{
  width:100%;
  border:0;
  outline:none;
  background:transparent;              /* elimina il fondo bianco */
  color:var(--text);
  font: inherit;
  line-height:1.2;
  padding:6px 0;                       /* comodo ma compatto */
}

/* focus chiaro blu */
.input:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(46,160,255,.22);
}

/* segnaposto un filo attenuato */
.input input::placeholder,
.input textarea::placeholder{ color:rgba(234,242,255,.65) }

/* stato readonly/disabled coerente */
.input input[readonly],
.input input:disabled,
.input select:disabled{
  opacity:.85;
  cursor:not-allowed;
}

/* ===== SELECT – togli stile nativo e metti caret custom ===== */
.input select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:28px;                   /* spazio per la freccetta */
}

/* caret con SVG inline, senza cambiare HTML */
.input::after{
  content:"";
  position:absolute; right:12px; top:50%; translate:0 -50%;
  width:14px; height:14px; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
  /* freccetta chiara (SVG) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23eaf2ff' d='M12 15.5L6 9.5h12z'/%3E%3C/svg%3E");
}
/* mostra la freccetta solo se dentro c'è un select */
.input:has(select)::after{ display:block }
.input:has(input)::after{ display:none }   /* niente caret sulle text */

/* ===== Autofill Chrome (niente giallo) ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px #0e1b2b inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* etichette sopra i campi, più pulite */
.field > label{
  color: var(--muted);
  font-weight: 700;
  margin: 6px 2px 6px;
}

/* pulsante submit in linea con il resto */
.form-card .actions .btn.primary{ min-width:96px }

/* Mobile: un filo più compatto */
@media (max-width:640px){
  .input{ padding:9px 11px; }
  .input input,.input select{ padding:6px 0; }
}

/* ===== LOGIN: forzo stile scuro su input/select ===== */

/* reset generale dei controlli testo in form-card */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="search"],
.form-card input[type="tel"],
.form-card input[type="url"],
.form-card textarea,
.form-card select{
  display:block;
  width:100%;
  background:#0e1b2b;                     /* fondo scuro */
  color:var(--text);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  line-height:1.25;
  outline:none;
  box-shadow:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

/* focus coerente con i bottoni */
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(46,160,255,.22);
}

/* placeholder più tenue */
.form-card ::placeholder{ color:rgba(234,242,255,.65) }

/* readonly/disabled */
.form-card input[readonly],
.form-card input:disabled,
.form-card select:disabled{
  opacity:.9;
  cursor:not-allowed;
}

/* SELECT: caret custom (senza cambiare l'HTML) */
.form-card select{
  padding-right:34px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23eaf2ff' d='M12 15.5 6 9.5h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
}

/* Chrome autofill (niente giallo) */
.form-card input:-webkit-autofill,
.form-card input:-webkit-autofill:hover,
.form-card input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px #0e1b2b inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Se nel markup usi anche il wrapper .input, non voglio doppio bordo */
.form-card .input{
  background:transparent;
  border:none;
  padding:0;
}
.form-card .input > span{ opacity:.9; margin-right:6px }

/* label più pulite/compatte */
.form-card .field > label{
  display:block;
  color:var(--muted);
  font-weight:700;
  margin:8px 2px 6px;
}

/* mobile un filo più compatto */
@media (max-width:640px){
  .form-card input,
  .form-card select,
  .form-card textarea{ padding:9px 11px; border-radius:10px }
}