/* ElmanCloud – Modern Dark UI (Bootstrap 5)
   Fixes: invisible table headers/text + low-contrast components
   Scope: body.panel (admin + client)
*/

:root{
  --panel-bg: #070b16;
  --panel-surface: rgba(17, 25, 46, .88);
  --panel-surface-2: rgba(17, 25, 46, .70);
  --panel-border: rgba(255,255,255,.10);
  --panel-border-2: rgba(255,255,255,.14);
  --panel-text: #e9eeff;
  --panel-text-2: rgba(233,238,255,.78);
  --panel-text-3: rgba(233,238,255,.62);
  --panel-accent: #0ea5e9;   /* cyan-blue */
  --panel-accent-2: #22c55e; /* green */
  --panel-danger: #ef4444;
  --panel-warning: #f59e0b;
  --panel-radius: 16px;
}

body.panel{
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(14,165,233,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 8%, rgba(34,197,94,.14), transparent 62%),
    radial-gradient(700px 380px at 55% 92%, rgba(168,85,247,.10), transparent 58%),
    var(--panel-bg);
  color: var(--panel-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

body.panel a{ color: inherit; }
body.panel a:hover{ color: var(--panel-text); }

/* Topbar */
body.panel .navbar{
  background: rgba(10, 15, 30, .70) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--panel-border);
}
body.panel .navbar .navbar-brand{
  letter-spacing: .2px;
}

/* Sidebar */
body.panel .sidebar{
  background: var(--panel-surface-2);
  border-right: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
}
@media (min-width: 992px){
  body.panel .sidebar{
    position: sticky;
    top: 72px; /* navbar height + breathing */
    height: calc(100vh - 88px);
    overflow: auto;
  }
}
body.panel .sidebar a{
  color: var(--panel-text-2);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body.panel .sidebar a:hover{
  color: var(--panel-text);
  background: rgba(14,165,233,.10);
  transform: translateX(1px);
}
body.panel .sidebar a.active{
  color: var(--panel-text);
  background: rgba(14,165,233,.16);
  border: 1px solid rgba(14,165,233,.18);
  border-radius: 12px;
}

/* Cards */
body.panel .card{
  background: var(--panel-surface) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--panel-radius) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.34);
}
body.panel .card .card-header{
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--panel-border) !important;
}

/* Headings / muted */
body.panel .text-muted,
body.panel .text-secondary{ color: var(--panel-text-3) !important; }
body.panel .text-muted-soft{ color: var(--panel-text-3) !important; }

/* Buttons */
body.panel .btn{
  border-radius: 12px;
}
body.panel .btn-accent{
  background: linear-gradient(135deg, rgba(14,165,233,1), rgba(34,197,94,1));
  border: 0;
  color: #fff;
  box-shadow: 0 10px 26px rgba(14,165,233,.22);
}
body.panel .btn-accent:hover{
  filter: brightness(1.03);
  color: #fff;
}
body.panel .btn-outline-light{
  border-color: var(--panel-border-2) !important;
  color: var(--panel-text) !important;
}
body.panel .btn-outline-light:hover{
  background: rgba(255,255,255,.08) !important;
}
body.panel .btn-outline-secondary{
  border-color: var(--panel-border-2) !important;
  color: var(--panel-text-2) !important;
}
body.panel .btn-outline-secondary:hover{
  background: rgba(255,255,255,.06) !important;
}

/* Forms */
body.panel .form-control,
body.panel .form-select{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--panel-text) !important;
  border-radius: 12px;
}
body.panel .form-control::placeholder{ color: rgba(233,238,255,.45); }
body.panel .form-control:focus,
body.panel .form-select:focus{
  border-color: rgba(14,165,233,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(14,165,233,.16) !important;
}
body.panel .form-check-input{
  border-color: var(--panel-border-2);
  background-color: rgba(255,255,255,.04);
}
body.panel .form-check-input:checked{
  background-color: var(--panel-accent);
  border-color: var(--panel-accent);
}

/* Tables – FORCE readable text and remove "white strip" issues */
body.panel .table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--panel-text);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--panel-text);
  --bs-table-hover-bg: rgba(14,165,233,.06);
  --bs-table-hover-color: var(--panel-text);
  --bs-table-border-color: var(--panel-border);
  color: var(--panel-text) !important;
  margin-bottom: 0;
}
body.panel .table > :not(caption) > * > *{
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
body.panel .table thead th,
body.panel .table thead td{
  background: rgba(255,255,255,.04) !important;
  color: var(--panel-text) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--panel-border) !important;
}
body.panel .table tbody tr{
  border-color: var(--panel-border) !important;
}
body.panel .table td, body.panel .table th{
  border-color: var(--panel-border) !important;
}

/* Pagination */
body.panel .pagination .page-link{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--panel-text) !important;
}
body.panel .pagination .page-link:hover{
  background: rgba(14,165,233,.10) !important;
}
body.panel .pagination .page-item.active .page-link{
  background: rgba(14,165,233,.22) !important;
  border-color: rgba(14,165,233,.30) !important;
}

/* Alerts */
body.panel .alert{
  background: rgba(17,25,46,.86) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--panel-radius) !important;
  color: var(--panel-text) !important;
}
body.panel .alert-success{ border-color: rgba(34,197,94,.35) !important; }
body.panel .alert-danger{ border-color: rgba(239,68,68,.35) !important; }
body.panel .alert-warning{ border-color: rgba(245,158,11,.35) !important; }

/* Badges */
body.panel .badge-soft{
  background: rgba(14,165,233,.16);
  border: 1px solid rgba(14,165,233,.24);
  color: var(--panel-text);
}

/* Small polish */
body.panel .table-responsive{
  border-radius: var(--panel-radius);
}
body.panel hr{ border-color: var(--panel-border); opacity: 1; }

/* Scrollbar (WebKit) */
body.panel ::-webkit-scrollbar{ width: 10px; height: 10px; }
body.panel ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 20px; }
body.panel ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.18); }