/* =====================================================================
   Midnight — a theme for PerfectPanel
   Casper Cloud · caspersmm.cloud
   ---------------------------------------------------------------------
   Install: upload this file, then load it AFTER the panel's own CSS.
   Everything is driven by the variables in :root — change a colour there
   and it propagates through the whole panel.
   ===================================================================== */

:root {
  --cc-bg:        #0b1020;
  --cc-surface:   #141b32;
  --cc-surface-2: #1c2542;
  --cc-border:    #26314f;
  --cc-text:      #e8ecf6;
  --cc-muted:     #8b95b0;
  --cc-brand:     #3ddbd9;
  --cc-brand-2:   #4f7cff;
  --cc-success:   #3ddb8f;
  --cc-warn:      #ffb454;
  --cc-danger:    #ff6b6b;
  --cc-radius:    10px;
  --cc-font:      'Inter',system-ui,sans-serif;
  --cc-shadow:    0 1px 2px rgba(0,0,0,.35);
  --cc-gap:       16px;
}

/* ---------- base ---------- */
html, body {
  background: #0b1020 !important;
  color: var(--cc-text) !important;
  font-family: var(--cc-font) !important;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cc-brand); text-decoration: none; }
a:hover { color: var(--cc-brand-2); }
hr { border-color: var(--cc-border); }
::selection { background: var(--cc-brand); color: #0b1020; }

h1,h2,h3,h4,h5 { color: var(--cc-text); font-weight: 600; letter-spacing: -.01em; }
small, .text-muted, .help-block { color: var(--cc-muted) !important; }

/* ---------- layout shells ---------- */
.wrapper, .content-wrapper, .main-content, #app, .container-fluid {
  background: transparent !important;
}
.content-header { padding: 22px 18px 8px; }
.content-header h1 { font-size: 22px; margin: 0; }

/* ---------- sidebar / navigation ---------- */
.main-sidebar, .sidebar, .left-side, aside.main-sidebar {
  background: var(--cc-surface) !important;
  border-right: 1px solid var(--cc-border) !important;
}
.sidebar-menu > li > a, .nav-sidebar > .nav-item > .nav-link {
  color: var(--cc-muted) !important;
  border-left: 2px solid transparent;
  padding: 11px 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-menu > li > a:hover, .nav-sidebar > .nav-item > .nav-link:hover {
  background: var(--cc-surface-2) !important;
  color: var(--cc-text) !important;
}
.sidebar-menu > li.active > a, .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--cc-surface-2) !important;
  color: var(--cc-brand) !important;
  border-left-color: var(--cc-brand);
}
.sidebar-menu > li > a > i, .nav-link > i { width: 20px; text-align: center; }

/* ---------- top bar ---------- */
.main-header, .navbar, .navbar-static-top {
  background: var(--cc-surface) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  box-shadow: none !important;
}
.main-header .logo, .navbar-brand {
  background: var(--cc-surface) !important;
  color: var(--cc-text) !important;
  font-weight: 600;
  letter-spacing: -.01em;
}
.navbar-nav > li > a { color: var(--cc-muted) !important; }
.navbar-nav > li > a:hover { color: var(--cc-text) !important; }

/* ---------- cards / boxes / panels ---------- */
.box, .card, .panel, .info-box, .small-box, .widget {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius) !important;
  box-shadow: var(--cc-shadow) !important;
  border-top-width: 1px !important;
}
.box-header, .card-header, .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  padding: 14px 18px !important;
}
.box-title, .card-title, .panel-title {
  font-size: 15px !important; font-weight: 600 !important; margin: 0 !important;
}
.box-body, .card-body, .panel-body { padding: 18px !important; }
.box-footer, .card-footer {
  background: var(--cc-surface-2) !important;
  border-top: 1px solid var(--cc-border) !important;
}

/* ---------- stat tiles ---------- */
.small-box, .info-box { padding: 4px; overflow: hidden; }
.small-box > .inner { padding: 16px 18px; }
.small-box h3 { font-size: 26px !important; font-weight: 600 !important; margin: 0 0 4px; }
.small-box p { color: var(--cc-muted) !important; margin: 0; font-size: 13px; }
.small-box .icon { color: var(--cc-brand) !important; opacity: .22; font-size: 62px; top: 8px; }
.small-box > .small-box-footer {
  background: transparent !important; color: var(--cc-brand) !important;
  border-top: 1px solid var(--cc-border); font-size: 12.5px;
}
.info-box-icon {
  background: var(--cc-surface-2) !important; color: var(--cc-brand) !important;
  border-radius: var(--cc-radius) 0 0 var(--cc-radius);
}
.info-box-number { color: var(--cc-text) !important; font-weight: 600; }
.info-box-text { color: var(--cc-muted) !important; }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--cc-radius) !important;
  font-weight: 500; padding: 9px 18px; border: 1px solid transparent;
  transition: filter .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-info {
  background: var(--cc-brand) !important; border-color: var(--cc-brand) !important;
  color: #0b1020 !important; 
}
.btn-primary:hover, .btn-info:hover { filter: brightness(1.08); }
.btn-success { background: var(--cc-success) !important; border-color: var(--cc-success) !important; color: #0b1020 !important; }
.btn-warning { background: var(--cc-warn) !important; border-color: var(--cc-warn) !important; color: #0b1020 !important; }
.btn-danger  { background: var(--cc-danger) !important; border-color: var(--cc-danger) !important; color: #fff !important; }
.btn-default, .btn-secondary {
  background: var(--cc-surface-2) !important; color: var(--cc-text) !important;
  border-color: var(--cc-border) !important;
}
.btn-default:hover { background: var(--cc-border) !important; }
.btn-block { width: 100%; }

/* ---------- forms ---------- */
.form-control, input[type=text], input[type=email], input[type=password],
input[type=number], textarea, select, .select2-selection {
  background: #1c2542 !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  border-radius: var(--cc-radius) !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  height: auto !important;
}
.form-control:focus, textarea:focus, select:focus {
  border-color: var(--cc-brand) !important;
  box-shadow: 0 0 0 3px rgba(61,219,217,0.14) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--cc-muted) !important; opacity: .75; }
label, .control-label { color: var(--cc-text) !important; font-weight: 500; font-size: 13.5px; margin-bottom: 6px; }
.input-group-addon, .input-group-text {
  background: var(--cc-surface-2) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-muted) !important;
}

/* ---------- tables (orders, services) ---------- */
.table { color: var(--cc-text) !important; }
.table > thead > tr > th, .table thead th {
  background: var(--cc-surface-2) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-muted) !important;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; padding: 11px 12px;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--cc-border) !important;
  padding: 12px !important; vertical-align: middle;
}
.table-hover > tbody > tr:hover > td { background: var(--cc-surface-2) !important; }
.table-striped > tbody > tr:nth-child(odd) > td { background: rgba(232,236,246,0.03) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--cc-surface) !important; border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important; border-radius: var(--cc-radius);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--cc-brand) !important; color: #0b1020 !important;
  border-color: var(--cc-brand) !important;
}
.dataTables_filter input, .dataTables_length select {
  background: #1c2542 !important; border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important; border-radius: var(--cc-radius);
}

/* ---------- service list ---------- */
.service-item, .services-list li {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.service-item:hover { border-color: var(--cc-brand) !important; }
.service-id {
  font-family: ui-monospace, monospace; color: var(--cc-muted);
  background: var(--cc-surface-2); padding: 2px 7px; border-radius: 4px; font-size: 12px;
}
.service-price { color: var(--cc-brand); font-weight: 600; }

/* ---------- badges / labels / statuses ---------- */
.label, .badge {
  border-radius: 999px; padding: 4px 11px; font-weight: 500; font-size: 11.5px;
  letter-spacing: .02em;
}
.label-success, .badge-success, .status-completed { background: var(--cc-success) !important; color: #0b1020 !important; }
.label-warning, .badge-warning, .status-pending, .status-processing { background: var(--cc-warn) !important; color: #0b1020 !important; }
.label-danger, .badge-danger, .status-canceled, .status-cancelled { background: var(--cc-danger) !important; color: #fff !important; }
.label-info, .badge-info, .status-inprogress { background: var(--cc-brand-2) !important; color: #fff !important; }
.label-default, .badge-secondary { background: var(--cc-surface-2) !important; color: var(--cc-muted) !important; }

/* ---------- alerts ---------- */
.alert { border-radius: var(--cc-radius); border: 1px solid var(--cc-border); }
.alert-success { background: rgba(61,219,143,0.12) !important; color: var(--cc-success) !important; border-color: var(--cc-success) !important; }
.alert-danger  { background: rgba(255,107,107,0.12) !important; color: var(--cc-danger) !important; border-color: var(--cc-danger) !important; }
.alert-warning { background: rgba(255,180,84,0.12) !important; color: var(--cc-warn) !important; border-color: var(--cc-warn) !important; }
.alert-info    { background: rgba(61,219,217,0.14) !important; color: var(--cc-brand) !important; border-color: var(--cc-brand) !important; }

/* ---------- tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--cc-border) !important; }
.nav-tabs > li > a, .nav-tabs .nav-link {
  color: var(--cc-muted) !important; border: none !important;
  border-bottom: 2px solid transparent !important; background: transparent !important;
}
.nav-tabs > li.active > a, .nav-tabs .nav-link.active {
  color: var(--cc-brand) !important; border-bottom-color: var(--cc-brand) !important;
  background: transparent !important;
}

/* ---------- modals & dropdowns ---------- */
.modal-content, .dropdown-menu {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius) !important;
  color: var(--cc-text) !important;
}
.modal-header, .modal-footer { border-color: var(--cc-border) !important; }
.dropdown-menu > li > a, .dropdown-item { color: var(--cc-text) !important; }
.dropdown-menu > li > a:hover, .dropdown-item:hover {
  background: var(--cc-surface-2) !important; color: var(--cc-brand) !important;
}

/* ---------- login / register ---------- */
.login-page, .register-page, .lockscreen {
  background: radial-gradient(1200px 600px at 50% -10%,rgba(61,219,217,0.16),transparent), #0b1020 !important;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.login-box, .register-box { width: 100%; max-width: 400px; margin: 0 auto; }
.login-box-body, .register-box-body, .card-body.login-card-body {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius) !important;
  padding: 30px !important;
  box-shadow: var(--cc-shadow) !important;
}
.login-logo, .register-logo { margin-bottom: 22px; }
.login-logo a, .register-logo a { color: var(--cc-text) !important; font-weight: 600; }
.login-box-msg, .register-box-msg { color: var(--cc-muted) !important; font-size: 14px; }

/* ---------- add funds ---------- */
.payment-method, .payment-option {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius);
  padding: 16px; cursor: pointer; transition: border-color .15s;
}
.payment-method:hover, .payment-option:hover { border-color: var(--cc-brand) !important; }
.payment-method.selected, .payment-option.active {
  border-color: var(--cc-brand) !important; background: rgba(61,219,217,0.14) !important;
}

/* ---------- support / tickets ---------- */
.ticket-message {
  background: var(--cc-surface-2) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius); padding: 14px 16px; margin-bottom: 12px;
}
.ticket-message.staff { border-left: 3px solid var(--cc-brand) !important; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cc-bg); }
::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--cc-muted); }

/* ---------- RTL ---------- */
[dir="rtl"] .sidebar-menu > li > a,
[dir="rtl"] .nav-sidebar > .nav-item > .nav-link {
  border-left: none; border-right: 2px solid transparent; text-align: right;
}
[dir="rtl"] .sidebar-menu > li.active > a,
[dir="rtl"] .nav-sidebar > .nav-item > .nav-link.active {
  border-right-color: var(--cc-brand);
}
[dir="rtl"] .main-sidebar, [dir="rtl"] .sidebar {
  border-right: none !important; border-left: 1px solid var(--cc-border) !important;
}
[dir="rtl"] .info-box-icon { border-radius: 0 var(--cc-radius) var(--cc-radius) 0; }
[dir="rtl"] .ticket-message.staff { border-left: none; border-right: 3px solid var(--cc-brand) !important; }
[dir="rtl"] .table > thead > tr > th, [dir="rtl"] .table > tbody > tr > td { text-align: right; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .content-header { padding: 14px 12px 4px; }
  .box-body, .card-body { padding: 14px !important; }
  .small-box h3 { font-size: 21px !important; }
  .table > tbody > tr > td { padding: 9px !important; font-size: 13.5px; }
  .btn { padding: 9px 14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}