/* Extracted from index.html <style id="rabbit-settings-design-v12"> */

/* =========================================================
   Rabbit Settings Design V12
   Centro controllo più chiaro, guidato e coerente col nuovo design.
   Solo UI/UX: nessuna funzione rimossa.
   ========================================================= */

#settings{
  background:
    radial-gradient(circle at 8% 0%, rgba(21,94,239,.09), transparent 26%),
    radial-gradient(circle at 94% 3%, rgba(14,124,114,.10), transparent 24%),
    linear-gradient(180deg, rgba(244,247,251,.72), rgba(234,241,251,.84)) !important;
  min-height:100vh;
}

/* Hero impostazioni più premium */
#settings .hero,
#settings .command-center,
#settings > .card:first-child{
  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(21,94,239,.16), transparent 26%),
    radial-gradient(circle at 0% 100%, rgba(14,124,114,.10), transparent 24%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,247,255,.84)) !important;
  box-shadow:0 22px 64px rgba(16,24,40,.10) !important;
  overflow:hidden !important;
  position:relative !important;
}

#settings .hero::after,
#settings .command-center::after,
#settings > .card:first-child::after{
  content:"CONTROL CENTER";
  position:absolute;
  right:18px;
  bottom:-18px;
  font-size:62px;
  line-height:1;
  letter-spacing:-.08em;
  font-weight:950;
  color:rgba(15,23,42,.035);
  pointer-events:none;
}

/* Layout impostazioni */
.settings-layout{
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start !important;
  margin-top:18px !important;
}

/* Menu sinistro impostazioni */
.settings-menu{
  position:sticky !important;
  top:92px !important;
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.76) !important;
  background:
    radial-gradient(circle at 0 0, rgba(21,94,239,.10), transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.84)) !important;
  box-shadow:0 16px 44px rgba(16,24,40,.09) !important;
  padding:14px !important;
  display:grid !important;
  gap:10px !important;
}

.settings-menu::before{
  content:"Aree impostazioni";
  display:block;
  font-size:14px;
  font-weight:950;
  color:#10203d;
  letter-spacing:-.02em;
  margin:2px 4px 4px;
}

.settings-menu button{
  width:100% !important;
  min-height:58px !important;
  justify-content:flex-start !important;
  text-align:left !important;
  border-radius:18px !important;
  border:1px solid rgba(16,24,40,.08) !important;
  background:linear-gradient(180deg,#fff,#f9fbff) !important;
  color:#172033 !important;
  box-shadow:0 8px 22px rgba(16,24,40,.05) !important;
  padding:10px 12px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  position:relative !important;
  overflow:hidden !important;
}

.settings-menu button::before{
  width:34px;
  height:34px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(21,94,239,.15),rgba(14,124,114,.11));
  color:#155eef;
  font-size:16px;
  flex:0 0 auto;
}

.settings-menu button:nth-child(1)::before{content:"🏷️";}
.settings-menu button:nth-child(2)::before{content:"🏠";}
.settings-menu button:nth-child(3)::before{content:"🎛️";}
.settings-menu button:nth-child(4)::before{content:"🧩";}
.settings-menu button:nth-child(5)::before{content:"🔐";}
.settings-menu button:nth-child(6)::before{content:"🗄️";}

.settings-menu button:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 28px rgba(16,24,40,.09) !important;
  border-color:rgba(21,94,239,.22) !important;
}

.settings-menu button.is-active{
  background:linear-gradient(135deg,#155eef,#1d4ed8) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 32px rgba(21,94,239,.24) !important;
}

.settings-menu button.is-active::before{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* Wrapper contenuti */
.settings-layout > div:last-child{
  display:grid !important;
  gap:18px !important;
  min-width:0 !important;
}

/* Sezioni impostazioni */
.settings-section{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.76) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(21,94,239,.07), transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,251,255,.86)) !important;
  box-shadow:0 16px 44px rgba(16,24,40,.08) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  padding:20px !important;
  overflow:hidden !important;
  position:relative !important;
}

.settings-section::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#155eef,#0e7c72,#7c3aed);
  opacity:.72;
}

.settings-section h3{
  margin:0 0 14px !important;
  font-size:24px !important;
  letter-spacing:-.05em !important;
  color:#10203d !important;
  display:flex;
  align-items:center;
  gap:10px;
}

#set_brand h3::before{content:"🏷️";}
#set_home h3::before{content:"🏠";}
#set_interface h3::before{content:"🎛️";}
#set_modules h3::before{content:"🧩";}
#set_permissions h3::before{content:"🔐";}
#set_data h3::before{content:"🗄️";}

.settings-section .muted{
  color:#667085 !important;
  font-weight:650;
}

/* Form più leggibili */
.settings-section .form-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.settings-section label{
  border-radius:18px !important;
  border:1px solid rgba(16,24,40,.08) !important;
  background:linear-gradient(180deg,#fff,#f9fbff) !important;
  padding:12px !important;
  color:#475467 !important;
  font-weight:850 !important;
  display:grid !important;
  gap:8px !important;
}

.settings-section label.full{
  grid-column:1 / -1 !important;
}

.settings-section input,
.settings-section textarea,
.settings-section select{
  min-height:44px !important;
  border-radius:14px !important;
  border:1px solid rgba(16,24,40,.10) !important;
  background:#fff !important;
  color:#101828 !important;
  font-weight:750 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.settings-section textarea{
  min-height:100px !important;
  resize:vertical !important;
}

.settings-section input[type="color"]{
  min-height:46px !important;
  padding:4px !important;
}

/* Toggle Home più belli */
.home-structure-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

.home-toggle{
  min-height:72px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  border-radius:18px !important;
  border:1px solid rgba(16,24,40,.08) !important;
  background:linear-gradient(180deg,#fff,#f9fbff) !important;
  box-shadow:0 8px 22px rgba(16,24,40,.04) !important;
  padding:12px !important;
}

.home-toggle b{
  color:#10203d !important;
}

.home-toggle small{
  display:block;
  margin-top:4px;
  color:#98a2b3 !important;
  font-weight:750;
}

.home-toggle input[type="checkbox"]{
  width:20px !important;
  height:20px !important;
  accent-color:#155eef !important;
}

/* Bottoni */
.settings-section button,
#settings button{
  border-radius:15px !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(16,24,40,.05) !important;
}

.settings-section button.primary,
#settings button.primary{
  background:linear-gradient(135deg,#155eef,#1d4ed8) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 12px 28px rgba(21,94,239,.22) !important;
}

/* Tabelle permessi */
#set_permissions{
  overflow:hidden !important;
}

#set_permissions table{
  border-collapse:separate !important;
  border-spacing:0 8px !important;
}

#set_permissions th{
  color:#667085 !important;
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:.04em;
}

#set_permissions td{
  background:#fff !important;
  border-top:1px solid rgba(16,24,40,.06);
  border-bottom:1px solid rgba(16,24,40,.06);
  padding:8px !important;
}

#set_permissions td:first-child{
  border-left:1px solid rgba(16,24,40,.06);
  border-radius:14px 0 0 14px;
}

#set_permissions td:last-child{
  border-right:1px solid rgba(16,24,40,.06);
  border-radius:0 14px 14px 0;
}

/* Database box */
.db-status{
  border-radius:20px !important;
  border:1px solid rgba(21,94,239,.12) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(21,94,239,.08), transparent 28%),
    linear-gradient(180deg,#fff,#f7faff) !important;
  padding:16px !important;
  color:#344054 !important;
  font-weight:750;
}

/* Quick overview cards injected via JS */
.settings-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}

.settings-overview-card{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.76);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.84));
  box-shadow:0 14px 36px rgba(16,24,40,.08);
  padding:18px;
  position:relative;
  overflow:hidden;
}

.settings-overview-card::after{
  content:"";
  position:absolute;
  right:-22px;
  bottom:-24px;
  width:86px;
  height:86px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(21,94,239,.12),rgba(14,124,114,.08));
  transform:rotate(12deg);
}

.settings-overview-card b{
  display:block;
  font-size:18px;
  letter-spacing:-.03em;
  color:#10203d;
  margin-bottom:6px;
}

.settings-overview-card span{
  color:#667085;
  font-weight:700;
  line-height:1.4;
}

.settings-overview-icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(21,94,239,.14),rgba(14,124,114,.10));
  margin-bottom:12px;
  font-size:20px;
}

@media(max-width:1180px){
  .settings-layout{
    grid-template-columns:1fr !important;
  }

  .settings-menu{
    position:relative !important;
    top:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .settings-menu::before{
    grid-column:1 / -1;
  }

  .settings-overview{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:760px){
  .settings-menu{
    grid-template-columns:1fr 1fr !important;
  }

  .settings-section .form-grid,
  .home-structure-grid{
    grid-template-columns:1fr !important;
  }

  .settings-section{
    padding:16px !important;
    border-radius:22px !important;
  }

  .settings-section h3{
    font-size:21px !important;
  }
}