/* =====================================================
   PERFECTPANEL — FULL PROFESSIONAL VIBE CSS (FINAL)
   Bootstrap 3.3.7 SAFE • Works on:
   ✅ All Private Pages (dashboard/orders/addfunds/services/tickets/etc.)
   ✅ Guest Pages (home/login/signup) without breaking layout
   ✅ No Bootstrap grid override
   ✅ Mobile optimized
===================================================== */

/* ===============================
   1) DESIGN TOKENS
=============================== */
:root{
  --pp-primary:#1d6fd8;
  --pp-primary-2:#56a3ff;
  --pp-primary-dark:#1556a8;

  --pp-bg:#f4f8ff;
  --pp-bg-2:#eef5ff;
  --pp-card:#ffffff;

  --pp-text:#0b1f3a;
  --pp-muted:#56708f;

  --pp-border:#dbe8fb;
  --pp-border-2:#cfe0fb;

  --pp-radius:14px;
  --pp-radius-sm:10px;

  --pp-shadow-sm:0 4px 14px rgba(11,31,58,.08);
  --pp-shadow:0 14px 36px rgba(11,31,58,.12);

  --pp-sidebar:#0b1f3a;
  --pp-sidebar-2:#0f2a4d;
  --pp-sidebar-text:rgba(255,255,255,.92);
  --pp-sidebar-muted:rgba(255,255,255,.65);
  --pp-sidebar-line:rgba(255,255,255,.10);

  --pp-success:#16a34a;
  --pp-warning:#f59e0b;
  --pp-danger:#ef4444;
  --pp-info:#0ea5e9;
}

/* ===============================
   2) GLOBAL RESET (SAFE)
=============================== */
*,
*::before,
*::after{box-sizing:border-box;}

html,body{width:100%; overflow-x:hidden !important;}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--pp-bg),var(--pp-bg-2));
  color:var(--pp-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links */
a{color:var(--pp-primary); text-decoration:none;}
a:hover,a:focus{color:var(--pp-primary-dark); text-decoration:none;}

/* Text helpers */
.text-muted{color:var(--pp-muted) !important;}

/* ===============================
   3) CONTAINER SAFETY (BS3)
=============================== */
.container,
.container-fluid{padding-left:15px; padding-right:15px;}

/* ===============================
   4) NAVBAR (TOP) — PRO
=============================== */
.navbar{
  border-radius:0;
  margin:0;
  border:0;
}

.navbar-default{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:var(--pp-text) !important;
}
.navbar-brand img{max-height:34px; display:block;}

.navbar-toggle{margin-top:10px; margin-right:12px;}

.navbar-nav > li > a{
  color:var(--pp-text) !important;
  font-weight:700;
}
.navbar-nav > li > a:hover{
  color:var(--pp-primary-dark) !important;
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus{
  background:transparent !important;
  color:var(--pp-primary-dark) !important;
}

.navbar-icon{margin-right:8px; opacity:.95;}

/* Balance badge (top) */
.navbar .badge{
  background:rgba(29,111,216,.12);
  color:var(--pp-primary-dark);
  border:1px solid rgba(29,111,216,.25);
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
}

/* Dropdown */
.dropdown-menu{
  border-radius:14px;
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow);
  padding:6px;
}
.dropdown-menu > li > a{
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
}
.dropdown-menu > li > a:hover{
  background:rgba(29,111,216,.08);
}

/* ===============================
   5) SIDEBAR (PRIVATE PAGES)
   Use with .pp-app / .pp-sidebar / .pp-content
=============================== */
.pp-app{min-height:100vh;}

.pp-sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width:240px;
  background:linear-gradient(180deg,var(--pp-sidebar),var(--pp-sidebar-2));
  color:var(--pp-sidebar-text);
  overflow:auto;
  z-index:1200;
  border-right:1px solid var(--pp-sidebar-line);
}

.pp-sidebar::-webkit-scrollbar{width:8px;}
.pp-sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:8px;
}

.pp-sidebar .pp-brand{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--pp-sidebar-line);
}
.pp-sidebar .pp-brand img{max-height:34px; display:block;}
.pp-sidebar .pp-brand .pp-name{font-weight:900; font-size:13px; letter-spacing:.2px;}

.pp-sidebar .pp-balance{
  padding:10px 16px;
  border-bottom:1px solid var(--pp-sidebar-line);
  color:var(--pp-sidebar-text);
}
.pp-sidebar .pp-balance .badge{
  background:rgba(86,163,255,.16);
  color:#eaf3ff;
  border:1px solid rgba(86,163,255,.32);
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
}

.pp-sidebar .pp-section-title{
  padding:12px 16px 8px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--pp-sidebar-muted);
}

.pp-sidebar .pp-nav{list-style:none; padding:6px 0 14px; margin:0;}
.pp-sidebar .pp-nav li a{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  color:var(--pp-sidebar-text);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:all .15s ease;
}
.pp-sidebar .pp-nav li a .navbar-icon{opacity:.95;}
.pp-sidebar .pp-nav li a:hover{
  background:rgba(29,111,216,.16);
  border-left-color:rgba(86,163,255,.65);
}
.pp-sidebar .pp-nav li.active a{
  background:rgba(29,111,216,.22);
  border-left-color:var(--pp-primary-2);
}

/* Content beside sidebar */
.pp-content{
  margin-left:240px;
  min-height:100vh;
  padding:18px 18px 30px;
}

/* ===============================
   6) PAGE HEADERS
=============================== */
.page-header{
  margin:0 0 16px;
  padding:0 0 12px;
  border-bottom:1px solid var(--pp-border);
}
.page-header h1,
.page-header h2,
.page-header h3{
  margin:0;
  font-weight:1000;
  letter-spacing:-.2px;
  color:var(--pp-text);
}

/* ===============================
   7) CARDS / PANELS / WELLS
=============================== */
.pp-card{
  background:var(--pp-card);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow-sm);
  padding:16px;
}

.panel{
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow-sm);
}
.panel-heading{
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border-bottom:1px solid var(--pp-border);
  border-top-left-radius:var(--pp-radius);
  border-top-right-radius:var(--pp-radius);
}
.panel-title{
  font-weight:900;
  color:var(--pp-text);
}
.panel-body{
  background:#fff;
  border-bottom-left-radius:var(--pp-radius);
  border-bottom-right-radius:var(--pp-radius);
}

.well{
  border-radius:var(--pp-radius);
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
  background:#fff;
}

/* ===============================
   8) TABLES (ORDERS, SERVICES)
=============================== */
.table{background:#fff; margin-bottom:0;}
.table > thead > tr > th{
  border-bottom:1px solid var(--pp-border);
  color:var(--pp-text);
  font-weight:900;
  background:#f8fbff;
}
.table > tbody > tr > td{
  border-top:1px solid var(--pp-border);
  color:var(--pp-text);
  vertical-align:middle;
}
.table-hover > tbody > tr:hover{background:#f3f8ff;}

.table-responsive{
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow-sm);
  background:#fff;
  overflow:hidden;
}

/* ===============================
   9) FORMS
=============================== */
label{font-weight:800; color:var(--pp-text);}

.form-control{
  border-radius:12px;
  border:1px solid var(--pp-border-2);
  box-shadow:none;
  height:42px;
  padding:10px 12px;
}
.form-control:focus{
  border-color:rgba(29,111,216,.55);
  box-shadow:0 0 0 4px rgba(29,111,216,.10);
}

/* Input groups */
.input-group .form-control{height:42px;}
.input-group-addon{
  border-radius:12px;
  border:1px solid var(--pp-border-2);
  background:#f8fbff;
  font-weight:800;
}

/* Select2 (common) */
.select2-container .select2-selection--single{
  height:42px !important;
  border:1px solid var(--pp-border-2) !important;
  border-radius:12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:40px !important;
}

/* ===============================
   10) BUTTONS — PRO
=============================== */
.btn{
  border-radius:12px;
  font-weight:900;
  padding:10px 14px;
  transition:transform .08s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}

.btn-primary{
  background:linear-gradient(135deg,var(--pp-primary),var(--pp-primary-2));
  border:0;
  box-shadow:0 12px 26px rgba(29,111,216,.18);
}
.btn-primary:hover,
.btn-primary:focus{
  background:linear-gradient(135deg,var(--pp-primary-dark),var(--pp-primary));
}

.btn-default{
  background:#fff;
  border:1px solid var(--pp-border);
}
.btn-default:hover{background:#f8fbff;}

.btn-success{background:linear-gradient(135deg,#16a34a,#22c55e); border:0; box-shadow:0 12px 26px rgba(34,197,94,.14);}
.btn-danger{background:linear-gradient(135deg,#ef4444,#f87171); border:0; box-shadow:0 12px 26px rgba(239,68,68,.14);}
.btn-info{background:linear-gradient(135deg,#0ea5e9,#38bdf8); border:0; box-shadow:0 12px 26px rgba(14,165,233,.14);}

/* ===============================
   11) BADGES / LABELS / ALERTS
=============================== */
.badge{border-radius:999px; padding:6px 10px; font-weight:900;}
.label{border-radius:999px; padding:6px 10px; font-weight:900;}

.alert{
  border-radius:14px;
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow-sm);
}
.alert-success{border-color:rgba(22,163,74,.25);}
.alert-danger{border-color:rgba(239,68,68,.25);}
.alert-info{border-color:rgba(14,165,233,.25);}
.alert-warning{border-color:rgba(245,158,11,.25);}

/* ===============================
   12) PAGINATION
=============================== */
.pagination > li > a,
.pagination > li > span{
  border:1px solid var(--pp-border);
  color:var(--pp-text);
}
.pagination > li > a:hover{background:#f3f8ff;}
.pagination > .active > a,
.pagination > .active > span{
  background:var(--pp-primary);
  border-color:var(--pp-primary);
}

/* ===============================
   13) TABS (BS3)
=============================== */
.nav-tabs{
  border-bottom:1px solid var(--pp-border);
}
.nav-tabs > li > a{
  border-radius:12px 12px 0 0;
  font-weight:900;
  color:var(--pp-muted);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
  color:var(--pp-text);
  border:1px solid var(--pp-border);
  border-bottom-color:transparent;
  background:#fff;
}

/* ===============================
   14) MODALS (BS3)
=============================== */
.modal-content{
  border-radius:16px;
  border:1px solid var(--pp-border);
  box-shadow:var(--pp-shadow);
}
.modal-header{
  border-bottom:1px solid var(--pp-border);
  background:linear-gradient(180deg,#fff,#f7fbff);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.modal-title{font-weight:1000; color:var(--pp-text);}

/* ===============================
   15) MOBILE (DRAWER SIDEBAR)
=============================== */
@media (max-width:767px){
  /* Sidebar drawer */
  .pp-sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .pp-app.pp-sidebar-open .pp-sidebar{
    transform:translateX(0);
  }
  .pp-content{
    margin-left:0;
    padding:12px 12px 22px;
  }

  /* Navbar fixed */
  .navbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:1300;
  }
  body{padding-top:52px;}
}