/* VIFOOD V446 - Settings Professional UI
   UI-only enhancement. No API/SQL/permission logic is modified. */

.v446-settings-page{
  --v446-navy:#10203c;
  --v446-green:var(--brand-green,#16a34a);
  --v446-soft:#f7f9fc;
  --v446-line:#e5e7eb;
}

.v446-settings-page > [data-v446-settings-nav]{
  position:sticky;
  top:0;
  z-index:35;
  margin:14px 0 18px;
  padding:10px;
  border:1px solid var(--v446-line);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 18px rgba(16,32,60,.06);
  backdrop-filter:blur(8px);
}

.v446-settings-nav-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 2px 9px;
}
.v446-settings-nav-title strong{font-size:13px;color:var(--v446-navy);letter-spacing:.01em}
.v446-settings-nav-title span{font-size:11px;color:#667085}
.v446-settings-nav-items{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;padding-bottom:1px}
.v446-settings-tab{
  appearance:none;border:1px solid #dfe4ea;background:#fff;color:#344054;
  border-radius:6px;padding:8px 11px;font:600 12px/1.15 Arial,"Segoe UI",Tahoma,sans-serif;
  cursor:pointer;white-space:nowrap;transition:.15s ease;
}
.v446-settings-tab:hover{border-color:var(--v446-green);color:var(--v446-green);background:#f7fff9}
.v446-settings-tab.is-active{background:var(--v446-navy);border-color:var(--v446-navy);color:#fff}

.v446-settings-page [data-v446-settings-section]{scroll-margin-top:112px;overflow:hidden}
.v446-settings-page [data-v446-settings-section] > :first-child{background:linear-gradient(180deg,#fff,#fbfcfe)}
.v446-settings-page [data-v446-settings-section]{border-color:#e1e5ea!important;box-shadow:0 2px 8px rgba(16,32,60,.045)!important}
.v446-settings-page input,.v446-settings-page select,.v446-settings-page textarea{border-color:#d7dce3}
.v446-settings-page input:focus,.v446-settings-page select:focus,.v446-settings-page textarea:focus{border-color:var(--v446-green);box-shadow:0 0 0 3px rgba(22,163,74,.08)}
.v446-settings-page button{min-height:34px}

/* Compact information banner shown only in Settings. */
.v446-settings-note{
  display:flex;align-items:flex-start;gap:10px;margin:-5px 0 15px;padding:10px 12px;
  border:1px solid #dce6f2;border-left:3px solid var(--v446-green);border-radius:6px;
  background:#f8fbff;color:#475467;font-size:11.5px;line-height:1.45;
}
.v446-settings-note b{color:var(--v446-navy)}

@media (min-width:1101px){
  .v446-settings-page{font-family:Arial,"Segoe UI",Tahoma,sans-serif}
  .v446-settings-page > [data-v446-settings-nav]{top:8px}
  .v446-settings-page [data-v446-settings-section]{margin-top:16px!important}
}

@media (max-width:1100px){
  .v446-settings-page > [data-v446-settings-nav]{top:0;margin:10px -2px 14px;border-radius:7px;padding:8px}
  .v446-settings-nav-title{display:none}
  .v446-settings-nav-items{gap:6px}
  .v446-settings-tab{padding:8px 10px;font-size:11px}
  .v446-settings-page [data-v446-settings-section]{scroll-margin-top:76px}
  .v446-settings-page [data-v446-settings-section] > div:first-child{padding-left:14px!important;padding-right:14px!important}
  .v446-settings-note{font-size:11px}
}