/*
 * StreamSpot Dashboard Override
 * Loaded after admin-core.css and layout.css to rebrand the dashboard
 * to the StreamSpot dark theme: #000 bg, #171717 cards, #f56600 accent
 */

/* ===== A. Page background ===== */
body.theme-dark {
  background-color: #000 !important;
}

/* ===== B. Cards & surfaces ===== */
.theme-dark .card,
.theme-dark .modal-content {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark .input-group-text {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
  color: #ced4da !important;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
  border-color: #f56600 !important;
  box-shadow: 0 0 0 0.2rem rgba(245, 102, 0, 0.25) !important;
}

.theme-dark .selectgroup-button {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
  color: #ced4da !important;
}

/* ===== C. Navbar & sidebar ===== */
.theme-dark .navbar,
.theme-dark .header {
  background-color: #000 !important;
  border-bottom-color: #2a2a2a !important;
}

/* Space between top toolbar and nav menu */
.theme-dark .header.top {
  margin-bottom: 1.25rem;
}

.theme-dark .sidebar {
  background-color: #000 !important;
  border-right-color: #2a2a2a !important;
}

/* ===== D. Sidebar active/hover ===== */
.theme-dark .sidebar .sidebar-menu .sidebar-item.active > .sidebar-link,
.theme-dark .sidebar .sidebar-menu .sidebar-item > .sidebar-link.active {
  background: rgba(245, 102, 0, 0.12) !important;
  color: #f56600 !important;
}

.theme-dark .sidebar .sidebar-menu .sidebar-item.active > .sidebar-link i,
.theme-dark .sidebar .sidebar-menu .sidebar-item > .sidebar-link.active i {
  color: #f56600 !important;
}

.theme-dark .sidebar .sidebar-menu .sidebar-item > .sidebar-link:hover {
  background: rgba(245, 102, 0, 0.08) !important;
  color: #f56600 !important;
}

.theme-dark .sidebar .sidebar-menu .sidebar-item > .sidebar-link:hover i {
  color: #f56600 !important;
}

/* ===== E. Primary color swap ===== */
.theme-dark .btn-primary,
.btn-primary {
  background-color: #f56600 !important;
  border-color: #f56600 !important;
  color: #fff !important;
}

.theme-dark .btn-primary:hover,
.btn-primary:hover {
  background-color: #cc5500 !important;
  border-color: #cc5500 !important;
  color: #fff !important;
}

.theme-dark .btn-primary:focus,
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(245, 102, 0, 0.5) !important;
}

.theme-dark .btn-primary:disabled,
.btn-primary:disabled {
  background-color: #f56600 !important;
  border-color: #f56600 !important;
  opacity: 0.65;
}

.theme-dark .btn-outline-primary {
  color: #f56600 !important;
  border-color: #f56600 !important;
}

.theme-dark .btn-outline-primary:hover {
  background-color: #f56600 !important;
  color: #fff !important;
}

.theme-dark .bg-primary,
.bg-primary {
  background-color: #f56600 !important;
}

.theme-dark .text-primary,
.text-primary {
  color: #f56600 !important;
}

.theme-dark a {
  color: #f56600;
}

.theme-dark a:hover {
  color: #cc5500;
}

/* ===== F. Pagination ===== */
.theme-dark .page-item.active .page-link {
  background-color: #f56600 !important;
  border-color: #f56600 !important;
}

.theme-dark .page-link {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
  color: #ced4da !important;
}

.theme-dark .page-link:hover {
  background-color: #2a2a2a !important;
  color: #f56600 !important;
}

/* ===== G. Tabs ===== */
.theme-dark .tabs-list .nav-tabs li > a.active,
.theme-dark .nav-tabs .nav-link.active {
  border-color: #f56600 !important;
  color: #f56600 !important;
}

.theme-dark .nav-tabs .nav-link:hover {
  color: #f56600 !important;
}

/* ===== H. Stat card gradients ===== */
.theme-dark .bg-success-gradient {
  background-image: linear-gradient(120deg, #f56600 0%, #ff8c3a 100%) !important;
}

.theme-dark .bg-danger-gradient {
  background-image: linear-gradient(120deg, #cc5500 0%, #f56600 100%) !important;
}

.theme-dark .bg-warning-gradient {
  background-image: linear-gradient(120deg, #ff8c3a 0%, #ffb366 100%) !important;
}

.theme-dark .bg-info-gradient {
  background-image: linear-gradient(120deg, #f56600 0%, #cc5500 100%) !important;
}

/* ===== I. Tables ===== */
.theme-dark .table {
  color: #ced4da !important;
  border-color: #2a2a2a !important;
}

.theme-dark .table th,
.theme-dark .table td {
  border-color: #2a2a2a !important;
}

.theme-dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.theme-dark .table thead th {
  border-bottom-color: #2a2a2a !important;
  color: #fff !important;
}

/* ===== J. Form controls — checkboxes/switches ===== */
.theme-dark .form-check-input:checked {
  background-color: #f56600 !important;
  border-color: #f56600 !important;
}

.theme-dark .form-switch .form-check-input:checked {
  background-color: #f56600 !important;
}

.theme-dark .selectgroup-input:checked + .selectgroup-button {
  background-color: #f56600 !important;
  color: #fff !important;
  border-color: #f56600 !important;
}

/* ===== K. Dropdowns (selectize) ===== */
.selectize-dropdown,
.selectize-dropdown-content,
.theme-dark .selectize-dropdown,
.theme-dark .selectize-dropdown-content {
  background-color: #111 !important;
  border: 1px solid #2a2a2a !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px !important;
  color: #ced4da !important;
  margin-top: 0 !important;
}
.selectize-dropdown,
.selectize-dropdown.form-control,
.selectize-dropdown.form-control.custom-select {
  position: absolute !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  background-color: #111 !important;
}
.selectize-dropdown-content {
  max-height: 250px !important;
  overflow-y: auto !important;
}
.selectize-dropdown .option,
.theme-dark .selectize-dropdown .option {
  color: #ced4da !important;
  padding: 8px 12px !important;
}
.selectize-dropdown .option:hover,
.selectize-dropdown .active,
.theme-dark .selectize-dropdown .active {
  background-color: #f56600 !important;
  color: #fff !important;
}

.selectize-input,
.theme-dark .selectize-input {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
  color: #ced4da !important;
}
.selectize-input input {
  color: #ced4da !important;
}
.selectize-input.dropdown-active::before {
  display: none !important;
}

/* Selectize dropdown arrow */
.selectize-control.single .selectize-input:after {
  border-color: #9f9f9f transparent transparent transparent !important;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  border-color: transparent transparent #9f9f9f transparent !important;
}
/* Selectize remove/clear button */
.selectize-input .remove-single,
.selectize-input .item .remove {
  display: none !important;
}
.selectize-input .item {
  color: #ced4da !important;
}

/* Category & Order Service dropdown arrow spacing */
select.form-control,
select.form-control.square {
  padding-right: 2rem !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239f9f9f' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 12px !important;
}

/* ===== L. Charts (c3.js) ===== */
.theme-dark .c3 line,
.theme-dark .c3 path.domain {
  stroke: #2a2a2a !important;
}

.theme-dark .c3 text {
  fill: #8a8a8a !important;
}

.theme-dark .c3-tooltip {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
}

.theme-dark .c3-tooltip th {
  background-color: #2a2a2a !important;
  color: #fff !important;
}

.theme-dark .c3-tooltip td {
  background-color: #171717 !important;
  color: #ced4da !important;
}

/* ===== M. Dropdown menus ===== */
.theme-dark .dropdown-menu {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
}

.theme-dark .dropdown-item {
  color: #ced4da !important;
}

.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus {
  background-color: #2a2a2a !important;
  color: #fff !important;
}

.theme-dark .dropdown-divider {
  border-top-color: #2a2a2a !important;
}

/* ===== N. Logo ===== */
/* filter: none so colored logos render properly.
   If logo is black-on-transparent, change to filter: brightness(0) invert(1)
   or upload a white logo variant via admin settings */
.theme-dark .sidebar .sidebar-brand img,
.theme-dark .navbar-brand img {
  filter: none !important;
}

/* ===== O. Hide theme customizer ===== */
a[href="#customize"] {
  display: none !important;
}

.theme-settings-wrap {
  display: none !important;
}

/* ===== P. Miscellaneous ===== */

/* Scrollbar styling */
.theme-dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme-dark ::-webkit-scrollbar-track {
  background: #000;
}

.theme-dark ::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Modal borders */
.theme-dark .modal-header {
  border-bottom-color: #2a2a2a !important;
}

.theme-dark .modal-footer {
  border-top-color: #2a2a2a !important;
}

/* Muted text */
.theme-dark .text-muted {
  color: #8a8a8a !important;
}

/* Card headers */
.theme-dark .card-header,
.theme-dark-ocean .card-header {
  background-color: #171717 !important;
  border-bottom-color: #2a2a2a !important;
  border-radius: inherit !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.theme-dark .card-collapsed > .card-header,
.theme-dark-ocean .card-collapsed > .card-header {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
}

.theme-dark .card-footer {
  background-color: #171717 !important;
  border-top-color: #2a2a2a !important;
}

/* Ticket list */
.theme-dark .list-group-item {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
  color: #ced4da !important;
}

/* Badges */
.theme-dark .badge-primary,
.theme-dark .badge.bg-primary {
  background-color: #f56600 !important;
}

/* Progress bars */
.theme-dark .progress {
  background-color: #2a2a2a !important;
}

.theme-dark .progress-bar {
  background-color: #f56600 !important;
}

/* Alert primary */
.theme-dark .alert-primary {
  background-color: rgba(245, 102, 0, 0.15) !important;
  border-color: #f56600 !important;
  color: #f56600 !important;
}

/* Header top gradient override */
.theme-dark .header.top {
  background: #171717 !important;
}

/* Breadcrumb */
.theme-dark .breadcrumb {
  background-color: transparent !important;
}

.theme-dark .breadcrumb-item a {
  color: #f56600 !important;
}

/* Popover/Tooltip */
.theme-dark .popover {
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
}

.theme-dark .tooltip-inner {
  background-color: #171717 !important;
}

/* ===== Q. Hide social network filter on new order page ===== */
.social-cat,
.card:has(.social-cat) {
  display: none !important;
}

/* ===== R. theme-dark-ocean overrides ===== */
/* The horizontal layout uses body.theme-dark-ocean (from admin setting).
   layout.css has .theme-dark-ocean selectors with !important that beat
   plain .theme-dark selectors. We must match or exceed that specificity. */

body.theme-dark-ocean {
  background-color: #000 !important;
}

.theme-dark-ocean .header {
  background-color: #000 !important;
}

.theme-dark-ocean .modal-content,
.theme-dark-ocean .card {
  background: #171717 !important;
  border: 1px solid #2a2a2a !important;
}

.theme-dark-ocean .order_resume {
  background: #171717 !important;
  border: 1px solid #2a2a2a !important;
}

.theme-dark-ocean .order_resume .service-details {
  background: #0d0d0d !important;
  border: 1px solid #2a2a2a !important;
  color: #ced4da !important;
}

.theme-dark-ocean .order_resume .service-name {
  color: #ced4da !important;
}

.theme-dark-ocean .order_resume .service-id-title {
  background-color: #f56600 !important;
  color: #fff !important;
}

.theme-dark-ocean .form-control {
  background: #171717 !important;
  border: 1px solid #2a2a2a !important;
  color: #ced4da !important;
}

.theme-dark-ocean .form-control:focus {
  border-color: #f56600 !important;
  box-shadow: 0 0 0 0.2rem rgba(245, 102, 0, 0.25) !important;
}

.theme-dark-ocean label {
  color: #ced4da !important;
}

.theme-dark-ocean .nav-tabs .nav-link.active,
.theme-dark-ocean .nav-tabs .nav-link:hover,
.theme-dark-ocean .tabs-list .nav-tabs li > a.active,
.theme-dark-ocean .tabs-list .nav-tabs li > a:hover {
  border-color: #f56600 !important;
  color: #f56600 !important;
  background-color: transparent !important;
}

.theme-dark-ocean .tabs-list .nav-tabs li > a {
  color: #ced4da !important;
}

.theme-dark-ocean .btn-primary {
  background-color: #f56600 !important;
  border-color: #f56600 !important;
  color: #fff !important;
}

.theme-dark-ocean .btn-primary:hover {
  background-color: #cc5500 !important;
  border-color: #cc5500 !important;
}

.theme-dark-ocean .page-item.active .page-link {
  background-color: #f56600 !important;
  border-color: #f56600 !important;
}

.theme-dark-ocean .text-primary {
  color: #f56600 !important;
}

.theme-dark-ocean .btn-secondary {
  color: #ced4da !important;
  background-color: #171717 !important;
  border-color: #2a2a2a !important;
}

.theme-dark-ocean .btn-secondary:hover {
  color: #f56600 !important;
  border-color: #f56600 !important;
}

body.theme-dark-ocean tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.theme-dark-ocean .footer {
  background-color: #171717 !important;
}

.theme-dark-ocean .text-info,
.theme-dark .text-info,
.text-info {
  color: #f56600 !important;
}

.theme-dark-ocean .badge-info,
.theme-dark .badge-info,
.badge-info {
  background-color: #f56600 !important;
  color: #fff !important;
}

.theme-dark-ocean .order_resume .badge-default,
.theme-dark .order_resume .badge-default,
.order_resume .badge-default {
  background-color: transparent !important;
  color: #ced4da !important;
  font-size: inherit !important;
  padding: 0 !important;
}

.theme-dark-ocean .btn-info,
.theme-dark .btn-info,
.btn-info {
  background-color: rgba(245, 102, 0, 0.15) !important;
  border-color: #f56600 !important;
  color: #f56600 !important;
}

.theme-dark-ocean .btn-info:hover,
.theme-dark .btn-info:hover,
.btn-info:hover {
  background-color: rgba(245, 102, 0, 0.25) !important;
  border-color: #cc5500 !important;
  color: #cc5500 !important;
}

/* ===== S. Reduce page bottom spacing ===== */
.page-main {
  min-height: auto !important;
}
.my-3.my-md-5 {
  margin-bottom: 1rem !important;
}
.app-content {
  min-height: auto !important;
}

/* ===== T. Statistics header cards — responsive text ===== */
.statistics .item .number {
  font-size: clamp(14px, 1.8vw, 30px) !important;
  white-space: nowrap !important;
}

.statistics .item small {
  font-size: clamp(9px, 1vw, 12px) !important;
  white-space: nowrap !important;
}

.statistics .item .stamp {
  color: #f56600 !important;
  background: #171717 !important;
}

/* ===== U. Footer — matches landing page ===== */
.btn-discord {
  display: inline-block;
  background-color: #5865F2;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 8px;
  transition: background-color 0.3s;
  text-decoration: none;
}
.btn-discord:hover {
  background-color: #4752c4;
  text-decoration: none;
  color: #fff !important;
}
.btn-discord .btn-discord-logo {
  height: 30px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}
.footer .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.copyrights {
  line-height: 170%;
  color: #9f9f9f;
}
.footer-menu ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.footer-menu ul li {
  padding: 0 25px;
}
.footer-menu ul a {
  color: #9f9f9f;
  text-decoration: none;
  transition: 0.3s;
}
.footer-menu ul a:hover {
  color: #fff;
}
@media (max-width: 992px) {
  .footer .wrapper {
    justify-content: center;
    flex-wrap: wrap;
  }
  .footer-menu ul {
    display: block;
    text-align: center;
  }
  .footer-menu ul li {
    padding: 5px 0;
  }
}

/* ===== V. Mobile sidebar fix ===== */
@media (max-width: 1199px) {
  .navbar-side {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    z-index: 1050;
    transition: left 0.3s ease;
    background-color: #000 !important;
    border-right: 1px solid #2a2a2a;
  }
  .navbar-side.show,
  body.sidebar-show .navbar-side {
    left: 0;
  }
  .mobile-menu {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    color: #fff !important;
    font-size: 22px;
    padding: 0 8px;
  }
  .mobile-menu .navbar-toggler-icon i {
    color: #fff !important;
  }
}
@media (min-width: 1200px) {
  .mobile-menu {
    display: none !important;
  }
}