/* twenty-one-dark base overrides
   Keep this file ONLY for dark theme colors/overrides.
*/

:root{
  /* Core surfaces */
  --act-bg: #0f1115;
  --act-surface: #151922;
  --act-surface-2: #1b2130;

  /* Text */
  --act-text: #e7e9ee;
  --act-text-muted: rgba(231,233,238,.72);

  /* Borders & shadows */
  --act-border: rgba(255,255,255,.10);

  /* Links / accents */
  --act-link: #7ab7ff;
  --act-link-hover: #a6d0ff;
}

/* Global page */
html, body { background: var(--act-bg); color: var(--act-text); }

/* Typical Twenty-One wrappers */
#content, .content-wrapper, .main-content { background: transparent; }

/* Links */
a { color: var(--act-link); }
a:hover { color: var(--act-link-hover); }

/* Muted text helpers (Bootstrap-ish + WHMCS uses) */
.text-muted, .text-faded { color: var(--act-text-muted) !important; }

/* Cards / panels */
.card,
.panel,
.list-group-item {
  background: var(--act-surface);
  color: var(--act-text);
  border-color: var(--act-border);
}

/* Card header/footer */
.card-header,
.card-footer,
.panel-heading,
.panel-footer {
  background: var(--act-surface-2);
  border-color: var(--act-border);
  color: var(--act-text);
}

/* Tables */
.table { color: var(--act-text); }
.table thead th { border-color: var(--act-border); }
.table td, .table th { border-color: var(--act-border); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.03); }

/* Forms */
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"]{
  background: rgba(255,255,255,.04);
  color: var(--act-text);
  border-color: var(--act-border);
}
.form-control:focus{
  background: rgba(255,255,255,.06);
  color: var(--act-text);
  border-color: rgba(122,183,255,.55);
  box-shadow: none;
}
.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid rgb(75 77 88);
}
/* Modals */
.modal-content{
  background: var(--act-surface);
  color: var(--act-text);
  border-color: var(--act-border);
}
.modal-header, .modal-footer{
  border-color: var(--act-border);
}

/* =========================
   Twenty-One Dark: Base + Core Components
   Add at BOTTOM of dark.css
========================= */

/* Page background + default text */
body,
.content-wrapper,
.main-content {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
}

/* Links */
a { color: #cfd6ff; }
a:hover { color: #ffffff; }

/* Cards / panels */
.card,
.panel,
.list-group-item,
.modal-content {
  background: #151922 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.card-header,
.panel-heading,
.modal-header {
  background: #121622 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

.card-footer,
.panel-footer,
.modal-footer {
  background: #121622 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Tables */
.table,
.table td,
.table th {
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.table thead th {
  background: #121622 !important;
  color: #ffffff !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.03) !important;
}

/* Inputs / selects / textareas */
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.form-control::placeholder {
  color: rgba(230,230,230,0.55) !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow: none !important;
}

/* Dropdown menus */
.dropdown-menu {
  background: #151922 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.dropdown-item {
  color: #e6e6e6 !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* Sidebar containers (Twenty-One) */
.sidebar,
.sidebar .list-group,
.sidebar .list-group-item {
  background: #151922 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Alerts (keep readable) */
.alert {
  border-color: rgba(255,255,255,0.10) !important;
}

/* =========================
   Dark: Header (top bar), Footer links, Homepage Features band
========================= */

/* --- TOP HEADER BAR (logo area) --- */
/* Covers common Twenty-One header wrappers */
header,
.header,
.top-nav,
.topbar,
.top-nav-wrapper,
.navbar,
.navbar-main,
.navbar-default,
#header,
#main-menu,
.main-header {
  background: #0f1115 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* === Dark theme: Header matches footer === */
#header,
#header .navbar,
#header .navbar-light,
#header .main-navbar-wrapper {
    background-color: #07090e !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* If the header has a "light" class or white bg utilities */
.bg-white,
.bg-light {
  background: #0f1115 !important;
}

/* Nav links in the header */
.navbar a,
.navbar-nav .nav-link,
.navbar .navbar-brand,
.navbar .navbar-text {
  color: #e6e6e6 !important;
}
.navbar a:hover,
.navbar-nav .nav-link:hover {
  color: #ffffff !important;
}

/* =========================
   Dark Theme: Footer (Stronger Separation)
========================= */

/* Main footer block */
#footer {
  background: #07090e !important; /* noticeably darker than body */
  color: #cfcfcf !important;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Inner footer content gets slight lift so text doesn't sink */
#footer .container {
  background: transparent !important;
}

/* Copyright bar = darkest anchor */
#copyright-bar,
.act-copyright-bar {
  background: #0f1114 !important;
  color: #b8bcc6 !important;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Footer headings */
#footer h4 {
  color: #ffffff !important;
}

/* Footer body text */
#footer p {
  color: rgba(230,230,230,0.7) !important;
}

/* Footer links */
#footer a,
#copyright-bar a {
  color: #bfc8ff !important;
}

#footer a:hover,
#copyright-bar a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Footer icons */
#footer i,
#copyright-bar i {
  color: rgba(230,230,230,0.85) !important;
}

/* --- HOMEPAGE "FEATURES" SECTION (your custom band) --- */
/* You used: #platforms-simple + .act-darkband */
#platforms-simple,
.act-darkband {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
}

/* Make sure list items/links in that band read well */
#platforms-simple a,
.act-darkband a {
  color: #cfd6ff !important;
}
#platforms-simple a:hover,
.act-darkband a:hover {
  color: #ffffff !important;
}

#platforms-simple .act-section-title,
.act-darkband .act-section-title {
  color: #ffffff !important;
}
/* =========================
   Dark: Breadcrumbs (FULL BAR)
========================= */

/* Target the whole breadcrumb area (row/container) */
.breadcrumb-container,
.breadcrumb-wrapper,
div.breadcrumb,
section.breadcrumb,
#breadcrumb,
#breadcrumbs,
.page-breadcrumb,
.header-lined .breadcrumb {
  background: #0f1115 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Ensure the inner container doesn't stay light */
.breadcrumb-container > .container,
.breadcrumb-wrapper > .container,
.breadcrumb-container > .container-fluid,
.breadcrumb-wrapper > .container-fluid {
  background: transparent !important;
}

/* The actual list */
ol.breadcrumb {
  background: transparent !important;
  margin-bottom: 0 !important;
}

/* Links/text */
ol.breadcrumb .breadcrumb-item,
ol.breadcrumb .breadcrumb-item a {
  color: #cfd6ff !important;
}

ol.breadcrumb .breadcrumb-item a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

ol.breadcrumb .breadcrumb-item.active {
  color: #ffffff !important;
}

ol.breadcrumb .breadcrumb-item::before {
  color: rgba(255,255,255,0.4) !important;
}

/* =========================
   Dark: FULL breadcrumb bar (Twenty-One actual wrapper)
========================= */

/* This is the usual full-width light bar in Twenty-One */
.header-lined,
.header-lined .container,
.header-lined .container-fluid,
.page-header,
.page-header .container,
.page-header .container-fluid,
.page-title,
.page-title .container,
.page-title .container-fluid {
  background: #0f1115 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Sometimes the bar uses a bottom border instead of bg */
.header-lined,
.page-header,
.page-title {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Keep the breadcrumb itself transparent inside the dark bar */
.header-lined .breadcrumb,
.page-header .breadcrumb,
.page-title .breadcrumb,
ol.breadcrumb {
  background: transparent !important;
}

/* Breadcrumb text colors (in case the theme overrides them) */
.header-lined .breadcrumb-item,
.header-lined .breadcrumb-item a,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a,
.page-title .breadcrumb-item,
.page-title .breadcrumb-item a {
  color: #cfd6ff !important;
}
.header-lined .breadcrumb-item.active,
.page-header .breadcrumb-item.active,
.page-title .breadcrumb-item.active {
  color: #ffffff !important;
}
/* =========================
   Dark: WHMCS master breadcrumb (FULL WIDTH BAR)
========================= */

nav.master-breadcrumb {
  background: #0f1115 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Ensure inner container doesn't reintroduce light bg */
nav.master-breadcrumb .container,
nav.master-breadcrumb .container-fluid {
  background: transparent !important;
}

/* Breadcrumb list */
nav.master-breadcrumb .breadcrumb {
  background: transparent !important;
  margin-bottom: 0;
}

/* Breadcrumb text & links */
nav.master-breadcrumb .breadcrumb-item,
nav.master-breadcrumb .breadcrumb-item a {
  color: #cfd6ff !important;
}

nav.master-breadcrumb .breadcrumb-item a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

nav.master-breadcrumb .breadcrumb-item.active {
  color: #ffffff !important;
}

nav.master-breadcrumb .breadcrumb-item::before {
  color: rgba(255,255,255,0.45) !important;
}
/* =========================
   Dark: Client Area Tiles
========================= */

.tiles .tile{
  background: #151922 !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.tiles .tile .title{
  color: #ffffff !important;
}

.tiles .tile .stat{
  color: #ffffff !important;
}

.tiles .tile i{
  color: rgba(230,230,230,0.90) !important;
}

/* Keep the colored highlight bar, but ensure it doesn't sit on a light bg */
.tiles .tile .highlight{
  opacity: 0.9;
}

/* Optional: subtle hover (no “light flash”) */
.tiles .tile:hover,
.tiles .tile:focus{
  background: #1b2130 !important;
  text-decoration: none;
}
/* =========================
   Dark: WHMCS DataTables / Service Lists
========================= */

/* Base table */
table.table,
table.table-list,
table.dataTable {
  background: #151922 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Table head */
table.table thead th,
table.table-list thead th,
table.dataTable thead th {
  background: #121622 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* Table rows */
table.table tbody tr,
table.table-list tbody tr,
table.dataTable tbody tr {
  background: #151922 !important;
}

/* Zebra striping */
table.table-striped tbody tr:nth-of-type(odd),
table.dataTable tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.03) !important;
}

/* Cells */
table.table td,
table.table th,
table.table-list td,
table.table-list th,
table.dataTable td,
table.dataTable th {
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Hover */
table.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background: #1b2130 !important;
}

/* Sorting arrows / active sort */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: #121622 !important;
  color: #ffffff !important;
}

/* DataTables info + pagination */
.dataTables_info,
.dataTables_paginate,
.dataTables_length,
.dataTables_filter label {
  color: rgba(230,230,230,0.75) !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #cfd6ff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #1b2130 !important;
  color: #ffffff !important;
}

/* Remove any forced white backgrounds */
table.dataTable,
.dataTables_wrapper,
.dataTables_scrollBody {
  background: transparent !important;
}

/* =========================
   Dark: WHMCS DataTables (strong overrides)
========================= */

.dataTables_wrapper,
.dataTables_wrapper .row,
.dataTables_wrapper .col-sm-12,
.dataTables_wrapper .table-responsive {
  background: transparent !important;
}

.dataTables_wrapper table.dataTable,
table.table.table-list.dataTable {
  background: #151922 !important;
  color: #e6e6e6 !important;
}

.dataTables_wrapper table.dataTable thead,
.dataTables_wrapper table.dataTable thead tr,
.dataTables_wrapper table.dataTable thead th,
table.table.table-list.dataTable thead th {
  background: #121622 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.dataTables_wrapper table.dataTable tbody tr,
.dataTables_wrapper table.dataTable tbody td,
table.table.table-list.dataTable tbody td {
  background: #151922 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dataTables_wrapper table.dataTable tbody tr:nth-of-type(odd) td {
  background: rgba(255,255,255,0.03) !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover td {
  background: #1b2130 !important;
}

/* Kill any “white panel” wrapper WHMCS puts around lists */
.table-container,
.tablebg,
div.dataTables_scrollBody {
  background: transparent !important;
}

/* DataTables controls */
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: rgba(230,230,230,0.75) !important;
}

.dataTables_filter input,
.dataTables_length select {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
/* Force proxymod proxy list to dark (kills inline white background) */
.proxy-table-scroll{
  background: var(--act-surface) !important;
  border-color: var(--act-border) !important;
  color: var(--act-text) !important;
  padding: 8px !important;          /* keeps your spacing */
  border-radius: 8px !important;    /* slightly nicer */
}

/* Table base */
.proxy-table-scroll table{
  width: 100% !important;
  background: transparent !important;
  color: var(--act-text) !important;
  border-collapse: collapse !important;
}

/* Header + cells */
.proxy-table-scroll th,
.proxy-table-scroll td{
  background: transparent !important;
  color: var(--act-text) !important;
  border-color: var(--act-border) !important;
}

/* Your header row has inline border-bottom colors; override */
.proxy-table-scroll thead th,
.proxy-table-scroll thead td{
  background: var(--act-surface-2) !important;
  border-bottom: 1px solid var(--act-border) !important;
}

/* Hover / selected row (if your JS adds a class) */
.proxy-table-scroll tbody tr:hover{
  background: rgba(255,255,255,.04) !important;
}

/* Checkboxes stay visible */
.proxy-table-scroll input[type="checkbox"]{
  accent-color: #7ab7ff;
}

/* If MDL is applying its own background */
.proxy-table-scroll .mdl-data-table{
  background: transparent !important;
}
.proxy-table-scroll .mdl-data-table__cell--non-numeric{
  color: var(--act-text) !important;
}
/* Kill any striping + force dark rows/cells */
.proxy-table-scroll .mdl-data-table tbody tr,
.proxy-table-scroll .mdl-data-table tbody tr:nth-child(odd),
.proxy-table-scroll .mdl-data-table tbody tr:nth-child(even){
  background: transparent !important;
}

.proxy-table-scroll .mdl-data-table tbody td,
.proxy-table-scroll .mdl-data-table tbody th{
  background: transparent !important;
  color: var(--act-text) !important;
}

/* Add our own subtle striping (optional, but dark) */
.proxy-table-scroll .mdl-data-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.02) !important;
}
.proxy-table-scroll .mdl-data-table tbody tr:nth-child(even){
  background: rgba(255,255,255,.00) !important;
}
/* =========================
   Dark: Markdown Editor (bootstrap-markdown / WHMCS)
========================= */

/* Main editor wrapper */
.md-editor {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Toolbar */
.md-editor .md-header {
  background: #151922 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Toolbar buttons */
.md-editor .btn,
.md-editor .btn-default {
  background: #1b2130 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

.md-editor .btn:hover,
.md-editor .btn-default:hover {
  background: #22283a !important;
  color: #ffffff !important;
}

/* Active / primary toolbar button (Preview) */
.md-editor .btn-primary,
.md-editor .btn-primary.active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Icons in toolbar */
.md-editor .btn i,
.md-editor .md-control i {
  color: #e6e6e6 !important;
}

/* Textarea */
.md-editor textarea,
.md-editor .md-input {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Placeholder text */
.md-editor textarea::placeholder {
  color: rgba(230,230,230,0.55) !important;
}

/* Footer/status bar */
.md-editor .md-footer {
  background: #151922 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  color: #b5b5b5 !important;
}

/* Save status text */
.md-editor .markdown-save {
  color: #7ab7ff !important;
}

/* Fullscreen mode */
.md-editor.md-fullscreen-mode {
  background: #0f1115 !important;
}

/* Fullscreen controls */
.md-editor .md-fullscreen-controls {
  background: #151922 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

/* Help modal trigger */
.md-editor .open-modal {
  color: #e6e6e6 !important;
}
.md-editor .open-modal:hover {
  color: #ffffff !important;
}
/* =========================
   HARD OVERRIDE: Markdown textarea (WHMCS)
========================= */

/* Exact textarea used by WHMCS markdown editor */
.md-editor textarea.form-control,
.md-editor textarea.markdown-editor,
.md-editor textarea.md-input,
textarea#inputMessage.form-control {
  background-color: #0f1115 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Cursor + selection */
.md-editor textarea::selection,
textarea#inputMessage::selection {
  background: rgba(122,183,255,0.35);
  color: #ffffff;
}

/* Placeholder text */
.md-editor textarea::placeholder,
textarea#inputMessage::placeholder {
  color: rgba(230,230,230,0.55) !important;
}

/* Focus state (Bootstrap loves to re-lighten this) */
.md-editor textarea.form-control:focus,
textarea#inputMessage.form-control:focus {
  background-color: #0f1115 !important;
  color: #ffffff !important;
  border-color: rgba(122,183,255,0.6) !important;
  box-shadow: none !important;
}
/* =========================
   Dark: File attachment input (WHMCS / Bootstrap)
========================= */

/* Wrapper */
.attachment-group,
.input-group.attachment-group {
  background: transparent !important;
}

/* File label (the visible "Choose file" box) */
.custom-file-label {
  background-color: #0f1115 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Remove Bootstrap light after-element */
.custom-file-label::after {
  background-color: #151922 !important;
  color: #e6e6e6 !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

/* Hover */
.custom-file-label:hover {
  background-color: #151922 !important;
}

/* File input itself (hidden but still styled by Bootstrap) */
.custom-file-input:focus ~ .custom-file-label {
  border-color: rgba(122,183,255,0.6) !important;
  box-shadow: none !important;
}

/* "Add More" button */
.attachment-group .btn,
#btnTicketAttachmentsAdd {
  background-color: #151922 !important;
  color: #e6e6e6 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

.attachment-group .btn:hover,
#btnTicketAttachmentsAdd:hover {
  background-color: #1b2130 !important;
  color: #ffffff !important;
}
/* =========================
   Dark Theme — Announcements / News (FULL OVERRIDE)
   Covers homepage widgets + announcement index + announcement cards
========================= */

/* Container */
.announcements {
  color: var(--act-text) !important;
}

/* Individual announcement card */
.announcements .announcement {
  background: var(--act-surface) !important;
  border: 1px solid var(--act-border) !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}

/* Title */
.announcements .announcement h1 {
  margin-bottom: 6px !important;
}

.announcements .announcement h1,
.announcements .announcement h1 a {
  color: var(--act-text) !important;
}

/* Date / meta line */
.announcements .announcement ul,
.announcements .announcement li,
.announcements .announcement .text-muted {
  color: var(--act-text-muted) !important;
}

/* Main content */
.announcements .announcement article,
.announcements .announcement article span,
.announcements .announcement article p {
  color: var(--act-text) !important;
  background: transparent !important;
}

/* Prevent inherited white backgrounds */
.announcements .announcement article * {
  background: transparent !important;
}

/* Buttons */
.announcements .announcement .btn,
.announcements .announcement .btn.btn-default {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--act-border) !important;
  color: var(--act-text) !important;
}

.announcements .announcement .btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* Edit button (admin hover) */
.announcements .announcement .show-on-hover {
  opacity: 0.85 !important;
}

/* Icons */
.announcements .announcement i {
  color: inherit !important;
}

/* Card wrapper safety (homepage news widget) */
.card-body .announcements {
  background: transparent !important;
}
/* =========================
   Dark Theme — Header Knowledgebase Search
========================= */

.input-group.search {
  background: transparent !important;
}

/* Input field */
.input-group.search .form-control {
  background: var(--act-surface) !important;
  color: var(--act-text) !important;
  border: 1px solid var(--act-border) !important;
  border-left: none !important;
}

.input-group.search .form-control::placeholder {
  color: var(--act-text-muted) !important;
}

/* Button wrapper */
.input-group.search .input-group-prepend {
  background: transparent !important;
}

/* Search button */
.input-group.search .btn,
.input-group.search .btn.btn-default {
  background: var(--act-surface-2) !important;
  border: 1px solid var(--act-border) !important;
  border-right: none !important;
  color: var(--act-text-muted) !important;
}

/* Hover / focus states */
.input-group.search .btn:hover,
.input-group.search .btn:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* Icon */
.input-group.search i {
  color: inherit !important;
}

/* Remove harsh focus glow */
.input-group.search .form-control:focus {
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.25) !important;
}
/* =========================
   Dark Theme — Darker / Subtle Search Border
========================= */

/* Base: darker, low-contrast border */
.input-group.search .form-control,
.input-group.search .btn {
  border-color: rgba(0, 0, 0, 0.55) !important;
}

/* Remove visible seam between button + input */
.input-group.search .btn {
  border-right-color: transparent !important;
}
.input-group.search .form-control {
  border-left-color: transparent !important;
}

/* Backgrounds stay dark */
.input-group.search .form-control {
  background: #0f1115 !important;
  color: #e6e6e6 !important;
}
.input-group.search .btn {
  background: #121622 !important;
  color: #cfd6ff !important;
}

/* Hover / focus: slightly lighter, still restrained */
.input-group.search .form-control:focus,
.input-group.search .btn:hover {
  border-color: rgba(255,255,255,0.12) !important;
}

/* Kill any Bootstrap glow */
.input-group.search .form-control:focus {
  box-shadow: none !important;
}
/* =========================
   Dark Theme: Header Cart Button
========================= */
/* =========================
   Dark theme – Cart items list
========================= */

.view-cart-items {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 6px 0;
}

/* Individual cart item */
.view-cart-items .item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
}

.view-cart-items .item:last-child {
  border-bottom: none;
}

/* Product title */
.view-cart-items .item-title {
  color: #ffffff !important;
  font-weight: 600;
}

/* Product group */
.view-cart-items .item-group {
  display: block;
  color: rgba(231,233,238,.70) !important;
  font-size: 0.9rem;
}

/* Configuration details */
.view-cart-items small {
  color: rgba(231,233,238,.65) !important;
}

/* Price column */
.view-cart-items .item-price span {
  color: #ffffff !important;
  font-weight: 600;
}

.view-cart-items .item-price .cycle {
  display: block;
  color: rgba(231,233,238,.65) !important;
  font-size: 0.85rem;
}
/* =========================
   Dark – Account selection blocks
========================= */

.account-select-container .account,
.apply-credit-container {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 14px;
  margin-bottom: 10px;
  color: #e7e9ee;
}

/* Active / selected account */
.account-select-container .account.active {
  background: #1b2130 !important;
  border-color: rgba(122,183,255,.35);
}

/* Bottom divider fix */
.account-select-container .account.border-bottom {
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Address text */
.account-select-container .address strong {
  color: #ffffff !important;
}

.account-select-container .address .small {
  color: rgba(231,233,238,.70) !important;
}

/* Currency badge */
.account-select-container .label-info {
  background: rgba(122,183,255,.18) !important;
  color: #cfd6ff !important;
  border: 1px solid rgba(122,183,255,.35);
}

/* =========================
   Dark – Apply Credit section
========================= */

.apply-credit-container p {
  color: rgba(231,233,238,.75) !important;
  margin-bottom: 12px;
}

/* Credit option rows */
.apply-credit-container label.radio {
  display: block;
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
}

/* Hover */
.apply-credit-container label.radio:hover {
  background: #1b2130 !important;
}

/* Selected credit option */
.apply-credit-container .iradio_square-blue.checked
  + span,
.apply-credit-container label.radio:has(.checked) {
  background: #1b2130 !important;
  border-color: rgba(122,183,255,.35);
}

/* Credit amounts */
.apply-credit-container span span {
  color: #ffffff !important;
  font-weight: 600;
}
/* =========================
   iCheck radios - restore indicator without boxy borders
========================= */

/* Base radio container */
.account-select-container .iradio_square-blue {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  margin-right: 10px !important;
}

/* Remove any sprite/background iCheck might apply */
.account-select-container .iradio_square-blue,
.account-select-container .iradio_square-blue.checked {
  background-image: none !important;
}
/* =========================
   Checkout – Payment Method Selector (text only)
========================= */

/* Helper text */
#paymentGatewaysContainer .text-muted {
  color: rgba(231,233,238,0.65) !important;
}

/* Payment method labels */
#paymentGatewaysContainer label.radio-inline {
  color: #e7e9ee !important;
  font-weight: 500;
  margin-right: 18px;
}

/* Slight emphasis on hover (no background change) */
#paymentGatewaysContainer label.radio-inline:hover {
  color: #ffffff !important;
}
/* Checked dot */
.account-select-container .iradio_square-blue.checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: #7ab7ff !important;
}
/* =========================
   Credit Card Input Container (Dark)
========================= */
#creditCardInputFields,
#creditCardInputFields .cc-input-container {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  padding: 16px !important;
  color: #e6e9ee !important;
}

/* Stripe / WHMCS injected inputs */
#creditCardInputFields input,
#creditCardInputFields iframe,
#creditCardInputFields .form-control {
  background: #0f1115 !important;
  color: #e6e9ee !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Placeholder text */
#creditCardInputFields input::placeholder {
  color: rgba(230,233,238,0.55) !important;
}

/* Labels inside CC area */
#creditCardInputFields label {
  color: rgba(230,233,238,0.85) !important;
}

/* Focus state */
#creditCardInputFields input:focus {
  background: #0f1115 !important;
  border-color: rgba(122,183,255,0.6) !important;
  box-shadow: none !important;
}
/* Make the label text look correct */
.account-select-container .address,
.account-select-container label.radio-inline {
  color: #e7e9ee !important;
}
/* =========================
   Stripe Elements – dark theme text fix
========================= */
.InputElement,
.Input {
  color: #e6e9ee !important;        /* main typed text */
  caret-color: #e6e9ee !important;
}

/* Placeholder text (MM / YY, etc.) */
.InputElement::placeholder,
.Input::placeholder {
  color: rgba(230, 233, 238, 0.55) !important;
}

/* When Stripe marks field complete */
.InputElement.is-complete {
  color: #e6e9ee !important;
}

/* Focus state (keep subtle) */
.InputElement:focus {
  color: #ffffff !important;
}====================
   PayPal account selection (dark)
========================= */
ul.selected {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  list-style: none !important;
}

/* List items */
ul.selected li {
  color: #e6e9ee !important;
}

/* Label text only (do NOT touch iCheck box) */
ul.selected label.radio-inline {
  color: #e6e9ee !important;
  font-weight: 500;
}

/* Slight hover feedback */
ul.selected li:hover {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 4px;
}
/* =========================
   Checkout - Existing Account Select (clean dark rows)
========================= */

.account-select-container .account {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}

.account-select-container .account.border-bottom {
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.account-select-container .account.active {
  background: #1b2130 !important;
  border-color: rgba(122,183,255,.35) !important;
}
/* =========================
   FIX – iCheck radios should NOT be boxed
========================= */

/* Strip any box styling from the radio itself */
.iradio_square-blue,
.iradio_square-blue.checked {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep radio clickable area invisible */
.iradio_square-blue ins,
.iradio_square-blue input {
  background: transparent !important;
}

/* Restore proper circular look */
.iradio_square-blue::before,
.iradio_square-blue::after {
  box-shadow: none !important;
}
/* =========================
   Dark – iCheck radios
========================= */

/* Base radio */
.iradio_square-blue {
  background-color: #0f1115 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 3px !important;
}

/* Checked radio */
.iradio_square-blue.checked {
  background-color: rgba(122,183,255,.25) !important;
  border-color: rgba(122,183,255,.55) !important;
}

/* Remove white flash */
.iradio_square-blue ins,
.iradio_square-blue input {
  background: transparent !important;
}
/* Edit / remove buttons */
.view-cart-items .btn-link {
  color: rgba(207,214,255,.85) !important;
}

.view-cart-items .btn-link:hover {
  color: #ffffff !important;
  text-decoration: none;
}

/* Remove (X) button */
.view-cart-items .btn-remove-from-cart i {
  color: rgba(255,255,255,.65) !important;
}

.view-cart-items .btn-remove-from-cart:hover i {
  color: #ff6b6b !important;
}
.navbar .cart-btn,
.navbar .cart-btn.btn,
.navbar .cart-btn.nav-link {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #e6e6e6 !important;
}

/* Hover / focus */
.navbar .cart-btn:hover,
.navbar .cart-btn:focus {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: #ffffff !important;
}

/* Cart icon */
.navbar .cart-btn i {
  color: inherit !important;
}

/* Cart badge */
.navbar .cart-btn .badge {
  background: #7ab7ff !important;
  color: #0f1115 !important;
  border: none !important;
}

/* =========================
   Dark: Order Summary / Product Total
========================= */

.summary-container {
    background: #151922 !important;
    color: #e6e6e6 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
    padding: 16px !important;
}

/* Product name + group */
.summary-container .product-name {
    color: #ffffff !important;
    font-weight: 600;
    display: block;
}

.summary-container .product-group {
    color: rgba(230,230,230,0.65) !important;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

/* Line items */
.summary-container .clearfix {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 6px 0;
}

.summary-container .clearfix:first-of-type {
    border-top: 0;
}

/* Totals section */
.summary-container .summary-totals {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

/* Total due today */
.summary-container .total-due-today {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px solid rgba(255,255,255,0.15);
    text-align: right;
}

.summary-container .total-due-today .amt {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #cfd6ff !important;
}

.summary-container .total-due-today span:last-child {
    color: rgba(230,230,230,0.7) !important;
    font-size: 0.85rem;
}
/* =========================
   Dark: Product Info (cart / summary header)
========================= */

.product-info {
    background: #151922 !important;
    color: #e6e6e6 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px;
}

/* Product title text */
.product-info .product-title {
    color: #ffffff !important;
    font-weight: 600;
    margin-bottom: 0;
}

/* Any secondary text */
.product-info p {
    color: rgba(230,230,230,0.75) !important;
}
/* =========================
   Dark Theme: KB Header Search (FINAL override)
========================= */

/* Kill light borders coming from form-inline / appended-form-control */
form.form-inline .input-group.search .form-control.appended-form-control {
  background: #151922 !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Left button (search icon) */
form.form-inline .input-group.search .btn.btn-default {
  background: #151922 !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-right: 0 !important;
}

/* Make the whole group feel unified */
form.form-inline .input-group.search {
  border-radius: 4px;
  overflow: hidden;
}

/* Hover / focus polish */
form.form-inline .input-group.search .form-control:focus,
form.form-inline .input-group.search .btn:hover {
  background: #1b2130 !important;
  border-color: rgba(255,255,255,0.32) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Placeholder text */
form.form-inline .input-group.search .form-control::placeholder {
  color: rgba(230,230,230,0.55) !important;
}
/* =========================
   Dark Theme: Knowledgebase header search (HARD override)
   Fixes bright border coming from wrapper / theme helpers
========================= */

/* 1) The wrapper itself (most common source of the “still bright border”) */
form.form-inline.ml-auto .input-group.search {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* 2) Kill any theme-added outlines/shadows on *anything* inside the search group */
form.form-inline.ml-auto .input-group.search,
form.form-inline.ml-auto .input-group.search * {
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Button area */
form.form-inline.ml-auto .input-group.search .input-group-prepend .btn,
form.form-inline.ml-auto .input-group.search .btn.btn-default {
  background: transparent !important;
  color: #e6e6e6 !important;
  border: 0 !important;            /* wrapper handles the border */
}

/* 4) Input */
form.form-inline.ml-auto .input-group.search input.form-control,
form.form-inline.ml-auto .input-group.search .form-control.appended-form-control {
  background: transparent !important;
  color: #e6e6e6 !important;
  border: 0 !important;            /* wrapper handles the border */
}
/* =========================
   Dark Theme: Ion.RangeSlider (irs)
========================= */

.irs {
  color: rgba(231,233,238,.85) !important;
}

/* Track */
.irs .irs-line {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
}
.irs .irs-line-left,
.irs .irs-line-mid,
.irs .irs-line-right {
  background: transparent !important; /* prevent light gradients */
}

/* Filled range */
.irs .irs-bar,
.irs .irs-bar-edge {
  background: rgba(122,183,255,.55) !important; /* subtle blue */
  border: 1px solid rgba(122,183,255,.65) !important;
}

/* Handles */
.irs .irs-slider {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: none !important;
}
.irs .irs-slider:hover {
  border-color: rgba(255,255,255,.35) !important;
}

/* Labels (min/max + current value bubble) */
.irs .irs-min,
.irs .irs-max {
  background: rgba(255,255,255,.08) !important;
  color: rgba(231,233,238,.80) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 6px !important;
}

.irs .irs-single,
.irs .irs-from,
.irs .irs-to {
  background: #151922 !important;
  color: #e7e9ee !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
}
.irs .irs-single:before,
.irs .irs-from:before,
.irs .irs-to:before {
  border-top-color: #151922 !important; /* arrow pointer */
}

/* Ticks/grid (if enabled) */
.irs .irs-grid-text {
  color: rgba(231,233,238,.60) !important;
}
.irs .irs-grid-pol {
  background: rgba(255,255,255,.10) !important;
}
/* Ion.RangeSlider – lighten ruler marks */
.irs .irs-grid-pol {
  background: rgba(255,255,255,.18) !important; /* was too dark */
}

.irs .irs-grid-text {
  color: rgba(231,233,238,.75) !important; /* clearer but still subtle */
}

/* =========================
   Dark Theme: Fix <select> caret (dropdown arrow)
========================= */
/* Dark theme – Additional Information sub-heading (bordered) */
.sub-heading .primary-bg-color {
  background: #151922 !important;
  color: #e7e9ee !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 4px;

  padding: 10px 14px;
}

/* Small helper text */
.sub-heading .primary-bg-color small {
  color: rgba(231,233,238,.65) !important;
}
select.form-control,
select.custom-select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    background-image: none !important;
}

/* Ensure arrow is visible on dark bg */
select.form-control,
select.custom-select {
    background-color: #151922 !important;
    color: #e6e6e6 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
/* 5) Hover/focus: slightly brighter but NOT white */
form.form-inline.ml-auto .input-group.search:hover {
  border-color: rgba(255,255,255,0.28) !important;
}
form.form-inline.ml-auto .input-group.search:focus-within {
  border-color: rgba(255,255,255,0.35) !important;
  background: #1b2130 !important;
}

/* 6) Placeholder */
form.form-inline.ml-auto .input-group.search input::placeholder {
  color: rgba(230,230,230,0.55) !important;
}
/* Dropdown hover fix – force single solid color */
.dropdown-menu {
  background: #151922 !important;
}

.dropdown-item {
  background: transparent !important;
  color: #e6e6e6 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #1b2130 !important; /* SOLID, not rgba */
  color: #ffffff !important;
}

/* Kill any Bootstrap overlay effects */
.dropdown-item::before,
.dropdown-item::after {
  display: none !important;
}
/* =========================
   Dark: Action icon tiles (keep accents, no overlay)
========================= */

.action-icon-btns a[class^="card-accent-"],
.action-icon-btns a[class*=" card-accent-"]{
  background: #151922 !important;
  color: #e7e9ee !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Keep the icon container readable */
.action-icon-btns a[class^="card-accent-"] .ico-container,
.action-icon-btns a[class*=" card-accent-"] .ico-container{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Icons */
.action-icon-btns a[class^="card-accent-"] i,
.action-icon-btns a[class*=" card-accent-"] i{
  color: #e7e9ee !important;
}

/* Hover (simple + clean) */
.action-icon-btns a[class^="card-accent-"]:hover,
.action-icon-btns a[class*=" card-accent-"]:hover{
  background: #1b2130 !important;
  color: #ffffff !important;
}

/* --- Re-apply accents as a border strip so they cannot vanish --- */
/* (These match the Twenty-One accent palette you referenced) */

/* --- Accent bars on TOP (original Twenty-One behavior) --- */
.action-icon-btns a.card-accent-teal{
  border-top: 4px solid #00aba9 !important;
}
.action-icon-btns a.card-accent-pomegranate{
  border-top: 4px solid #c0392b !important;
}
.action-icon-btns a.card-accent-sun-flower{
  border-top: 4px solid #f1c40f !important;
}
.action-icon-btns a.card-accent-green{
  border-top: 4px solid #00a65a !important;
}
.action-icon-btns a.card-accent-asbestos{
  border-top: 4px solid #7f8c8d !important;
}
/* If your build uses the inner .highlight bar, keep it visible too */
.action-icon-btns a .highlight{
  opacity: 1 !important;
  filter: none !important;
}
.fa-stack .fa-circle {
    color: #151922 !important;
}
.fa-stack {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
#registration label {
    font-weight: 300;
    color: #ddd;
    font-size: 13px;
}
.fa-stack .fa-circle {
    color: #151922 !important;
}
/* Dark background disk for stacked icons */
.fa-stack .fa-circle {
    color: #07090e !important; /* deep dark, matches footer/features */
}

/* === Dark: Product status cards === */
.product-status {
    background-color: #151922 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e6e6e6 !important;
}
.product-status .product-icon {
    background: transparent !important;
    color: #e6e6e6 !important;
}
/* Fix FA stacked icon "oval" outline around the circle */
.product-status .product-icon .fa-stack{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Keep the actual stacked circle + icon looking right in dark mode */
.product-status .product-icon .fa-stack .fa-circle{
  color: #2a3142 !important;          /* circle fill */
}
.product-status .product-icon .fa-stack .fa-stack-1x{
  color: #e7e9ee !important;          /* icon color */
}
/* =========================
   DARK MODE: NAV TABS
========================= */

/* Tabs container */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Individual tab */
.nav-tabs .nav-item .nav-link {
  background: transparent !important;
  color: #cfd6ff !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
}

/* Hover state (kill bright flash) */
.nav-tabs .nav-item .nav-link:hover,
.nav-tabs .nav-item .nav-link:focus {
  background: #151922 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Active tab */
.nav-tabs .nav-item .nav-link.active {
  background: #151922 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.16) !important;
  border-bottom-color: #151922 !important; /* blends into content */
}

/* Content panel under tabs */
.tab-content {
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top: none !important;
  color: #e7e9ee !important;
}
/* =========================
   DARK: Client Area Sidebar cards + hover/active states
   (Service Details Overview / Actions)
========================= */

/* Sidebar card container (these are the light offenders) */
.sidebar .card.card-sidebar,
.sidebar .card.card-sidebar.card-light,
.sidebar .card.card-sidebar.panel-default,
.sidebar .card.card-sidebar.panel-actions {
  background: var(--act-surface, #151922) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Sidebar card header */
.sidebar .card.card-sidebar .card-header {
  background: var(--act-surface-2, #1b2130) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--act-text, #e7e9ee) !important;
}

/* Header title + chevron */
.sidebar .card.card-sidebar .card-title,
.sidebar .card.card-sidebar .card-title i {
  color: var(--act-text, #e7e9ee) !important;
}
.sidebar .card.card-sidebar .card-minimise {
  opacity: 0.85;
}

/* List group wrapper */
.sidebar .card.card-sidebar .list-group,
.sidebar .card.card-sidebar .list-group-flush {
  background: transparent !important;
}

/* Items (default) */
.sidebar .card.card-sidebar a.list-group-item,
.sidebar .card.card-sidebar a.list-group-item-action {
  background: transparent !important;
  color: rgba(231,233,238,.85) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* First item shouldn't have a top border */
.sidebar .card.card-sidebar .list-group a.list-group-item:first-child,
.sidebar .card.card-sidebar .list-group a.list-group-item-action:first-child {
  border-top: 0 !important;
}

/* Hover (the missing hover effect) */
.sidebar .card.card-sidebar a.list-group-item-action:hover,
.sidebar .card.card-sidebar a.list-group-item-action:focus {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Active item */
.sidebar .card.card-sidebar a.list-group-item.active,
.sidebar .card.card-sidebar a.list-group-item-action.active {
  background: rgba(122,183,255,0.16) !important;
  color: #ffffff !important;
  border-top-color: rgba(122,183,255,0.22) !important;
}

/* Labels + icons inside the item */
.sidebar .sidebar-menu-item-label {
  color: inherit !important;
}
.sidebar .sidebar-menu-item-icon,
.sidebar .sidebar-menu-item-icon-wrapper i {
  color: rgba(231,233,238,.80) !important;
}

/* Active icon bump */
.sidebar .list-group-item.active .sidebar-menu-item-icon,
.sidebar .list-group-item-action.active .sidebar-menu-item-icon {
  color: #ffffff !important;
}
/* =========================
   Dark: Service Details page separation + sidebar hovers
   (ADD to bottom of dark.css)
========================= */

/* Give the main card area a stronger "panel" separation */
.product-details,
.product-details .row {
  background: rgba(0,0,0,0) !important;
}

/* The big details card: slightly different surface + subtle border */
.card .product-details,
.card .product-details-wrap,
.card .product-details-container {
  background: #0b0d12 !important;              /* deeper than your page bg */
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  padding: 18px !important;
}

/* If your markup is exactly .card > .card-body > .product-details */
.card .card-body > .product-details {
  background: #0b0d12 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  padding: 18px !important;
}

/* Left "product-status" block: make it read like a distinct card */
.product-status {
  background: #111522 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}

/* Right column divider line (subtle) */
.product-details .col-md-6 + .col-md-6 {
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

/* =========================
   Sidebar cards + list items (hover + active)
========================= */

.sidebar .card-sidebar,
.sidebar .panel-actions {
  background: #111522 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.sidebar .card-sidebar .card-header {
  background: #0e121b !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* List group items inside the sidebar */
.sidebar .list-group-item,
.sidebar .list-group-item-action {
  background: transparent !important;
  color: rgba(231,233,238,0.88) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Hover should be ONE solid color (not layered/weird) */
.sidebar .list-group-item-action:hover,
.sidebar .list-group-item-action:focus {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* Active tab in sidebar */
.sidebar .list-group-item.active,
.sidebar .list-group-item-action.active {
  background: rgba(122,183,255,0.14) !important;
  color: #ffffff !important;
  border-color: rgba(122,183,255,0.28) !important;
}

/* Icon color in sidebar items */
.sidebar .sidebar-menu-item-icon,
.sidebar .sidebar-menu-item-icon-wrapper i {
  color: rgba(231,233,238,0.80) !important;
}

/* =========================
   Tabs on service details (if they’re still too bright)
========================= */

.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

.nav-tabs .nav-link {
  color: rgba(231,233,238,0.80) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: #0b0d12 !important;
  border-color: rgba(255,255,255,0.10) rgba(255,255,255,0.10) #0b0d12 !important;
}

.tab-content {
  background: #0b0d12 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
  padding: 12px 14px !important;
}
/* =========================================================
   TWENTY-ONE DARK — SIDEBAR PANELS (FINAL FIX)
========================================================= */

/* Base sidebar container */
.sidebar{
  background: transparent !important;
}

/* Sidebar cards (Overview / Actions / Filters / Status) */
.sidebar .card.card-sidebar{
  background: #151922 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important; /* critical for radius */
  box-shadow: none !important;
}

/* Card header */
.sidebar .card.card-sidebar > .card-header{
  background: #1b2130 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding: 14px 18px !important;
}

/* Header icons */
.sidebar .card-header i{
  color: rgba(255,255,255,0.85) !important;
}

/* Body wrapper (THIS fixes separation) */
.sidebar .card.card-sidebar .collapsable-card-body{
  background: #0f1115 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* List group container */
.sidebar .list-group{
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Individual rows */
.sidebar .list-group-item{
  background: rgba(255,255,255,0.02) !important;
  color: #e6e6e6 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 12px 16px !important;
}

/* Remove last divider line */
.sidebar .list-group-item:last-child{
  border-bottom: 0 !important;
}

/* Hover */
.sidebar .list-group-item:hover{
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* Active state */
.sidebar .list-group-item.active{
  background: rgba(122,183,255,0.20) !important;
  color: #ffffff !important;
}

/* Icons inside rows */
.sidebar .sidebar-menu-item-icon,
.sidebar .sidebar-menu-item-icon-wrapper i{
  color: rgba(255,255,255,0.75) !important;
}

/* Badges */
.sidebar .badge{
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

/* Collapse arrow */
.sidebar .card-minimise{
  color: rgba(255,255,255,0.65) !important;
}
.sidebar .card-minimise:hover{
  color: #ffffff !important;
}
.kb-category a:hover {
    background-color: rgba(255, 255, 255, 0.06);
}