/* =====================================================
   COBALT THEME — PERFECT PANEL (v3 PREMIUM)
   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:#F1F4FB;
  --pp-surface:#FFFFFF;
  --pp-ink:#141A26;
  --pp-muted:#61697D;
  --pp-line:#E5E9F2;
  --pp-grad:linear-gradient(120deg,#0B4FD6 0%,#1E6BFF 55%,#3E8BFF 100%);
  --pp-grad-soft:linear-gradient(120deg,#E4EDFF,#EEF4FF);
  --pp-accent:#1859E8;
  --pp-accent-dark:#0B4FD6;
  --pp-accent-soft:#E4EDFF;
  --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 1px 2px rgba(20,26,38,.04),0 4px 12px -4px rgba(20,26,38,.06),0 18px 40px -20px rgba(24,89,232,.20);
  --pp-shadow-hover:0 2px 4px rgba(20,26,38,.05),0 12px 28px -8px rgba(24,89,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(900px 380px at 88% -160px, rgba(62,139,255,.13), transparent 62%),
    radial-gradient(700px 300px at 5% 8%, rgba(24,89,232,.06), transparent 55%),
    var(--pp-bg) !important;
  background-attachment:fixed !important;
  color:var(--pp-ink) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  line-height:1.55 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
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:-.02em;color:var(--pp-ink);
}
h1,.h1{font-size:1.45rem !important}
h2,.h2{font-size:1.2rem !important}
a{color:var(--pp-accent);transition:color .15s}
a:hover{color:var(--pp-accent-dark)}

/* ---------- Floating cards (with hover lift) ---------- */
.card,.panel,.well,.box{
  background:var(--pp-surface) !important;
  border:1px solid rgba(229,233,242,.7) !important;
  border-radius:var(--pp-radius) !important;
  box-shadow:var(--pp-shadow) !important;
  overflow:hidden;
  margin-bottom:18px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.well-float:hover{
  box-shadow:var(--pp-shadow-hover) !important;
}
.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 (with sheen) ---------- */
.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 .2s !important;
  position:relative;overflow:hidden;
}
.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 6px 16px -6px rgba(24,89,232,.5),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover,button[type="submit"].btn:hover{
  filter:brightness(1.07);
  box-shadow:0 10px 24px -8px rgba(24,89,232,.6),inset 0 1px 0 rgba(255,255,255,.18);
}
/* Subtle moving sheen on primary buttons */
.btn-primary:after,button[type="submit"].btn:after{
  content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn-primary:hover:after,button[type="submit"].btn:hover:after{left:130%}
.btn-default,.btn-secondary{
  background:#fff !important;border:1px solid var(--pp-line) !important;
  color:var(--pp-ink) !important;
}
.btn-default:hover,.btn-secondary:hover{border-color:#B8CEFF !important;color:var(--pp-accent) !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:#F6F8FD !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 .18s,box-shadow .18s,background .18s !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;
}
.form-control:hover:not(:focus){border-color:#CBD5EC !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:#F6F8FD !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(241,244,251,.5) !important}
.table-hover tbody tr{transition:background .12s}
.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;
  letter-spacing:.01em;
}
.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:#EDF0F7 !important;color:var(--pp-muted) !important}

/* ---------- Alerts / dropdowns / pagination / tabs ---------- */
.alert{border-radius:14px !important;border:none !important;font-size:.88rem !important;padding:13px 16px !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;
  animation:pp-drop .18s ease;
}
@keyframes pp-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dropdown-menu > li > a,.dropdown-item{border-radius:9px;padding:9px 13px !important;font-size:.88rem;transition:background .12s}
.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;
  transition:background .15s,color .15s,border-color .15s;
}
.page-link:hover,.pagination > li > a:hover{border-color:#B8CEFF !important;color:var(--pp-accent) !important;background:var(--pp-accent-soft) !important}
.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;
  transition:color .15s;
}
.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)}

/* Page content fades in on load */
.container,.container-fluid{animation:pp-fade .35s ease}
@keyframes pp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *,.btn-primary:after{animation:none !important;transition:none !important}
}

/* =====================================================
   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;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.nav-pills > li > a:hover{background:var(--pp-accent-soft);color:var(--pp-accent);border-color:#B8CEFF}
.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(24,89,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 6px 18px -14px rgba(24,89,232,.28);
    transition:box-shadow .2s,transform .2s;
  }
  .pp-cards tbody > tr:active{transform:scale(.995);box-shadow:0 8px 22px -12px rgba(24,89,232,.35)}
  .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:#93A0BC;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}
}