/* ===== Grid Profle ===== */

.panel{
    padding: 15px 20px;
}


/* =========================
   CARD LAYOUT
========================= */

.settings-card{
  width: min(1100px, 100%);          /* ✅ pi laj sou laptop */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}

.card-header{
  padding:18px 22px 0;               /* ✅ ti kras plis espas */
}

.breadcrumb{
  font-size:13px;
  color:#6b7280;
  margin-bottom:10px;
}

/* =========================
   TABS
========================= */

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 0 14px;
  border-bottom:1px solid #e5e7eb;
}

.tab-btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  color:#374151;
  transition:.15s ease;
}
.tab-btn:hover{ transform: translateY(-1px); }
.tab-btn.active{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.card-body{
  padding:18px 22px 22px;
}

/* =========================
   PANELS (IMPORTANT)
========================= */

.panel{
  display:none;
  padding: 12px 0 0;                 /* ✅ pa bay gwo padding ki kwense */
  animation:fade .18s ease;
}
.panel.active{ display:block; }

@keyframes fade{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================
   REMOVE AVATAR AREA (NO GAP)
========================= */

/* ✅ Si w toujou gen <aside class="side"> nan HTML la */
.side{ display:none !important; }

/* ✅ split vin 1 kolòn (pa gen vid ankò) */
.split{
  display:block;                      /* ✅ retire 2 kolòn yo */
}

/* =========================
   FORM GRID
========================= */

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;                           /* ✅ pi alèz */
}

/* sou laptop mwayen / ti */
@media (max-width: 900px){
  .grid{ gap:14px; }
}

/* mobile */
@media (max-width: 780px){
  .grid{ grid-template-columns: 1fr; }
  .card-header{ padding:16px 16px 0; }
  .card-body{ padding:16px; }
}

/* =========================
   FIELDS
========================= */

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color:#374151;
  text-transform:uppercase;
}

/* ✅ inputs pi “normal” (pi long, pa kwense) */
input, select{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  outline:none;
  background:#fff;
  font-size:14px;
  transition:.15s ease;
}

input:focus, select:focus{
  border-color:#111827;
  box-shadow: 0 0 0 4px rgba(17,24,39,.08);
}

/* rows like phone + badge, amount + currency */
.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;                     /* ✅ evite kwense sou ti ekran */
}

.badge{
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #86efac;
  background:#dcfce7;
  color:#166534;
  white-space:nowrap;
}

.help{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
  line-height:1.35;
}

/* =========================
   FOOTER BUTTONS
========================= */

.footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px;
  padding-top:16px;
}

.btn{
  border:none;
  cursor:pointer;
  padding:11px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
}

.btn-primary{
  background:#f59e0b;
  color:#111827;
}
.btn-primary:hover{ filter:brightness(.98); }

.btn-secondary{
  background:#f3f4f6;
  color:#111827;
  border:1px solid #e5e7eb;
}