/* =====================================================
   INDIGO THEME — PERFECT PANEL (FINAL v2, smaller type)
   This is the ONLY block you need in CSS -> style.css
   Delete all previously pasted blocks and paste this
   complete at the END of the file.
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --pp-bg:#F3F4FB;
  --pp-surface:#FFFFFF;
  --pp-ink:#171928;
  --pp-muted:#6A6F85;
  --pp-line:#E7E8F2;
  --pp-grad:linear-gradient(120deg,#3527C9 0%,#5B3DF5 55%,#8A4DFF 100%);
  --pp-accent:#4A33E8;
  --pp-accent-dark:#3527C9;
  --pp-accent-soft:#EDEAFE;
  --pp-ok:#0E9F6E;   --pp-ok-soft:#E3F5EE;
  --pp-warn:#C77D08; --pp-warn-soft:#FCF1DC;
  --pp-bad:#D64545;  --pp-bad-soft:#FBEAEA;
  --pp-radius:18px;
  --pp-shadow:0 2px 4px rgba(23,25,40,.04),0 16px 40px -18px rgba(74,51,232,.22);
}

/* ---------- Base + ZERO horizontal page scroll ---------- */
html{font-size:15px}
html,body{max-width:100% !important;overflow-x:hidden !important}
body{
  background:
    radial-gradient(1100px 420px at 85% -180px, rgba(138,77,255,.10), transparent 60%),
    var(--pp-bg) !important;
  color:var(--pp-ink) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  line-height:1.55 !important;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,iframe{max-width:100%;height:auto}
*{min-width:0}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{
  font-family:'Space Grotesk',sans-serif !important;
  letter-spacing:-.015em;color:var(--pp-ink);
}
h1,.h1{font-size:1.45rem !important}
h2,.h2{font-size:1.2rem !important}
a{color:var(--pp-accent)}
a:hover{color:var(--pp-accent-dark)}

/* ---------- Floating cards ---------- */
.card,.panel,.well,.box{
  background:var(--pp-surface) !important;
  border:none !important;
  border-radius:var(--pp-radius) !important;
  box-shadow:var(--pp-shadow) !important;
  overflow:hidden;
  margin-bottom:18px;
}
.card-header,.panel-heading{
  background:transparent !important;
  border-bottom:1px solid var(--pp-line) !important;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:1rem !important;
  padding:14px 18px !important;
  position:relative;
}
.card-header:before,.panel-heading:before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;
  border-radius:99px;background:var(--pp-grad);
}
.card-body,.panel-body{padding:18px !important}

/* ---------- Gradient buttons ---------- */
.btn{
  border-radius:12px !important;
  font-weight:600 !important;font-size:.9rem !important;
  min-height:44px;padding:10px 18px !important;
  transition:filter .15s,transform .1s,box-shadow .15s !important;
}
.btn:active{transform:scale(.985)}
.btn-primary,button[type="submit"].btn{
  background:var(--pp-grad) !important;
  border:none !important;color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(74,51,232,.55);
}
.btn-primary:hover,button[type="submit"].btn:hover{filter:brightness(1.08)}
.btn-default,.btn-secondary{
  background:#fff !important;border:1px solid var(--pp-line) !important;
  color:var(--pp-ink) !important;
}
.btn-outline-primary{
  color:var(--pp-accent) !important;border-color:var(--pp-accent) !important;
  background:transparent !important;
}
.btn-outline-primary:hover{background:var(--pp-accent-soft) !important}
.btn-xs{min-height:32px;padding:5px 11px !important;font-size:.76rem !important;border-radius:9px !important}

/* ---------- Forms ---------- */
/* NOTE: inputs stay at 16px on purpose - below 16px mobile browsers auto-zoom on focus */
.form-control,select.form-control,textarea.form-control,.form-select{
  background:#F7F7FD !important;
  border:1.5px solid var(--pp-line) !important;
  border-radius:12px !important;
  padding:11px 13px !important;height:auto !important;min-height:46px;
  font-size:16px !important;color:var(--pp-ink) !important;
  box-shadow:none !important;
  transition:border-color .15s,box-shadow .15s !important;
}
textarea.form-control{min-height:100px}
.form-control:focus,.form-select:focus{
  background:#fff !important;
  border-color:var(--pp-accent) !important;
  box-shadow:0 0 0 4px var(--pp-accent-soft) !important;outline:none !important;
}
label,.form-label,.control-label{
  font-size:.82rem !important;font-weight:600 !important;
  color:var(--pp-muted) !important;margin-bottom:6px !important;
}
.form-group{margin-bottom:15px !important}

/* ---------- Tables: scroll inside their card, never the page ---------- */
.table{background:transparent;color:var(--pp-ink) !important;margin-bottom:0}
.table thead th{
  background:#F7F7FD !important;color:var(--pp-muted) !important;
  font-size:.68rem !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.06em;
  border:none !important;white-space:nowrap;padding:11px !important;
}
.table td{
  border-color:var(--pp-line) !important;vertical-align:middle !important;
  font-size:.86rem !important;padding:12px 11px !important;
}
.table-striped tbody tr:nth-of-type(odd){background:rgba(243,244,251,.55) !important}
.table-hover tbody tr:hover{background:var(--pp-accent-soft) !important}
.table-responsive{border:none !important;-webkit-overflow-scrolling:touch}
@media(max-width:768px){
  .table{display:block;width:100% !important;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- Badges ---------- */
.badge,.label{
  border-radius:999px !important;font-weight:700 !important;
  font-size:.72rem !important;padding:4px 11px !important;white-space:nowrap;
}
.badge-success,.label-success,.bg-success{background:var(--pp-ok-soft) !important;color:var(--pp-ok) !important}
.badge-info,.label-info,.bg-info,.badge-primary,.bg-primary{background:var(--pp-accent-soft) !important;color:var(--pp-accent) !important}
.badge-warning,.label-warning,.bg-warning{background:var(--pp-warn-soft) !important;color:var(--pp-warn) !important}
.badge-danger,.label-danger,.bg-danger{background:var(--pp-bad-soft) !important;color:var(--pp-bad) !important}
.badge-secondary,.label-default,.bg-secondary{background:#EFEFF7 !important;color:var(--pp-muted) !important}

/* ---------- Alerts / dropdowns / pagination / tabs ---------- */
.alert{border-radius:14px !important;border:none !important;font-size:.88rem !important}
.alert-success{background:var(--pp-ok-soft) !important;color:var(--pp-ok) !important}
.alert-danger{background:var(--pp-bad-soft) !important;color:var(--pp-bad) !important}
.alert-info{background:var(--pp-accent-soft) !important;color:var(--pp-accent-dark) !important}
.dropdown-menu{
  border:1px solid var(--pp-line) !important;border-radius:14px !important;
  box-shadow:var(--pp-shadow) !important;padding:6px !important;
}
.dropdown-menu > li > a,.dropdown-item{border-radius:9px;padding:9px 13px !important;font-size:.88rem}
.dropdown-menu > li > a:hover,.dropdown-item:hover{background:var(--pp-accent-soft) !important;color:var(--pp-accent) !important}
.page-link,.pagination > li > a{
  border-color:var(--pp-line) !important;color:var(--pp-muted) !important;
  border-radius:10px !important;margin:0 3px;
  min-width:40px;min-height:40px;font-size:.88rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.page-item.active .page-link,.pagination > li.active > a{background:var(--pp-grad) !important;border:none !important;color:#fff !important}
.nav-tabs{border-bottom:1px solid var(--pp-line) !important}
.nav-tabs .nav-link,.nav-tabs > li > a{
  border:none !important;color:var(--pp-muted) !important;
  font-weight:600;padding:11px 15px !important;background:transparent !important;
}
.nav-tabs .nav-link.active,.nav-tabs > li.active > a{
  color:var(--pp-accent) !important;
  box-shadow:inset 0 -2px 0 var(--pp-accent);
}

/* ---------- Footer ---------- */
footer,.footer{background:transparent !important;border:none !important;color:var(--pp-muted) !important}

/* ---------- Mobile ---------- */
@media(max-width:768px){
  .container,.container-fluid{padding-left:14px !important;padding-right:14px !important}
  .row{margin-left:-7px !important;margin-right:-7px !important}
  .row [class*="col-"]{padding-left:7px !important;padding-right:7px !important}
  form .btn,.card .btn-primary{width:100%;display:block}
  .card{border-radius:16px !important}
  .card-body,.panel-body{padding:15px 13px !important}
}
@media(max-width:380px){html{font-size:14.5px}}

/* ---------- Details ---------- */
.balance,.price,.charge,td.text-right,.table td:last-child{font-variant-numeric:tabular-nums}
::selection{background:var(--pp-accent-soft);color:var(--pp-accent-dark)}

/* =====================================================
   SHARED COMPONENTS (hero, pills, mobile cards)
   Used by all redesigned pages.
===================================================== */
.pp-hero{margin:22px 0 12px;padding:0 2px}
.pp-hero h1{font-size:1.35rem;margin:0}

/* Status pills (scrollable chips) */
.nav-pills{
  display:flex;gap:8px;align-items:center;margin-bottom:14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;
}
.nav-pills::-webkit-scrollbar{display:none}
.nav-pills > li{float:none;flex:none}
.nav-pills > li > a{
  display:inline-block;white-space:nowrap;
  background:#fff;border:1px solid var(--pp-line);border-radius:999px;
  color:var(--pp-muted);font-weight:600;font-size:.82rem;padding:8px 14px;
}
.nav-pills > li > a:hover{background:var(--pp-accent-soft);color:var(--pp-accent);border-color:#C9BEFA}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus{
  background:var(--pp-grad) !important;
  color:#fff !important;border:none;
  box-shadow:0 6px 14px -6px rgba(74,51,232,.5);
}
.nav-pills .search{margin-left:auto;flex:0 0 230px}
@media(max-width:767px){.nav-pills .search{flex:0 0 190px}}

/* Mobile cards: any table with .pp-cards becomes stacked cards */
.pp-cards tbody td{font-weight:600;color:var(--pp-ink)}
.pp-cards .pp-money{color:var(--pp-accent-dark);font-weight:700}
.pp-cards .pp-dim{font-weight:500;color:var(--pp-muted)}
@media(max-width:767px){
  .pp-cards{display:block !important;width:100% !important;overflow:visible !important}
  .pp-cards thead{display:none}
  .pp-cards tbody{display:block}
  .pp-cards tbody > tr{
    display:block;background:#fff;
    border:1px solid var(--pp-line);border-radius:14px;
    margin-bottom:11px;padding:7px 2px;
    box-shadow:0 8px 20px -14px rgba(74,51,232,.25);
  }
  .pp-cards tbody td{
    display:flex !important;justify-content:space-between;align-items:baseline;
    gap:12px;border:none !important;
    padding:6px 13px !important;width:100%;max-width:100% !important;
    font-size:.85rem !important;text-align:right;
  }
  .pp-cards tbody td:before{
    content:attr(data-label);flex:none;
    font-weight:700;color:#9AA0B5;font-size:.66rem;
    text-transform:uppercase;letter-spacing:.05em;text-align:left;
  }
  /* Main cell: full-width bold title at the top of the card */
  .pp-cards tbody td.pp-main{
    display:block !important;text-align:left;
    font-weight:700;font-size:.92rem !important;padding-top:9px !important;
  }
  .pp-cards tbody td.pp-main:before{display:block;margin-bottom:2px}
  .pp-cards .pp-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
  .pp-cards td.link,.pp-cards td .link{word-break:break-all}
}