/* *****************************************************
    ** Custom Stylesheet (Dark Theme Match) **
***************************************************** */

html {
    font-size: 14px;
}

:root {
    /* Base Neutral Palette */
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151; /* Card backgrounds */
    --neutral-800: #1f2937; /* Sidebar backgrounds */
    --neutral-900: #111827; /* Main body background */
    --neutral-950: #030712;

    /* Primary colors (Set to the green seen in your image or a sleek dark blue) */
    --primary: #10b981;          
    --primary-lifted: #059669;   
    --primary-accented: #047857; 

    /* Neutral colors for Dark Mode Elements */
    --bg: var(--neutral-900);
    --bg-muted: var(--neutral-800);
    --bg-lifted: var(--neutral-700);
    --bg-accented: var(--neutral-600);
    --bg-inverted: var(--neutral-50);

    /* Text neutral colors */
    --text-inverted: var(--neutral-900);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-300);
    --text-accented: var(--neutral-100);
    --text: var(--neutral-50);

    /* Border neutral colors */
    --border-muted: var(--neutral-800);
    --border: var(--neutral-700);
    --border-lifted: var(--neutral-600);
    --border-accented: var(--neutral-500);
}

/* =========================================
   HARD OVERRIDES FOR TWENTY-ONE THEME
   (Forces Bootstrap/WHMCS to use the dark vars)
========================================= */

body, .app-main {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* Sidebar and Navigation */
.app-nav, .sidebar {
    background-color: var(--bg-muted) !important;
    border-right: 1px solid var(--border) !important;
}

/* Panels and Cards (Like the main content boxes) */
.card, .panel, .panel-default {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.card-header, .panel-heading {
    background-color: var(--bg-muted) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-accented) !important;
}

.card-footer, .panel-footer {
    background-color: var(--bg-muted) !important;
    border-top: 1px solid var(--border) !important;
}

/* Inputs and Forms */
.form-control {
    background-color: var(--bg-muted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.form-control:focus {
    background-color: var(--bg) !important;
    border-color: var(--primary) !important;
    color: var(--text-accented) !important;
}

/* Tables */
.table, .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
    color: var(--text) !important;
}

.table td, .table th {
    border-color: var(--border) !important;
}

/* Headings and Links */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-accented) !important;
}

a {
    color: var(--primary);
}
a:hover {
    color: var(--primary-lifted);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-muted) !important;
    border-color: var(--border) !important;
}

.dropdown-item {
    color: var(--text) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-lifted) !important;
    color: var(--text-accented) !important;
}

.announcements .announcement article {
  margin-bottom:1rem;
  padding:1rem;
  background-color:#1f2937;
  border-left:4px solid #ccc
}
/* =========================================
   ADDITIONAL DARK MODE OVERRIDES
   (List Groups, Sidebars, and Buttons)
========================================= */

/* Sidebar Links and List Groups */
.list-group-item {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.list-group-item:hover {
    background-color: var(--bg-muted) !important;
    color: var(--text-accented) !important;
}

/* Active Sidebar Item */
.list-group-item.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Primary Buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important; 
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
}

/* Secondary / Default Buttons */
.btn-default, .btn-secondary {
    background-color: var(--bg-muted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.btn-default:hover, .btn-secondary:hover {
    background-color: var(--bg-lifted) !important;
    color: var(--text-accented) !important;
}

/* Breadcrumbs / Top Paths */
.breadcrumb {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
}

.breadcrumb-item a {
    color: var(--primary) !important;
}

.breadcrumb-item.active {
    color: var(--text-muted) !important;
}
/* =========================================
   DATATABLES & TABLE OVERRIDES
========================================= */

/* Force table rows and cells to use dark background */
table.dataTable tbody tr, 
table.dataTable tbody td,
.table tbody tr, 
.table tbody td {
    background-color: var(--bg-lifted) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Striped rows (odd/even) */
table.dataTable.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-muted) !important;
}

/* Table Hover effect */
table.dataTable tbody tr:hover, 
table.dataTable.table-hover tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: var(--bg-accented) !important;
}

/* DataTables Pagination & Info text (Bottom of table) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important;
}

/* DataTables Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--bg-accented) !important;
    color: var(--text-accented) !important;
}

/* Fix any remaining white main body containers */
#main-body, .main-content, .content-padded {
    background-color: var(--bg) !important;
}

/* Fix table headers */
.table thead th, table.dataTable thead th {
    background-color: var(--bg-muted) !important;
    color: var(--text-accented) !important;
    border-bottom: 2px solid var(--border) !important;
}
/* =========================================
   UTILITY CLASSES, ALERTS, & TICKET FORMS
========================================= */

/* Override Bootstrap background utility classes */
.bg-white, .bg-light, .bg-color-white, .card-body {
    background-color: var(--bg-lifted) !important;
    color: var(--text) !important;
}

/* Wells and Attachment containers */
.well, .ticket-attachments-message, .file-upload {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* Textareas and form inputs (Catch-all) */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    background-color: var(--bg-muted) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

/* Markdown Editor overrides */
.md-editor > .md-header, .md-editor > .md-preview {
    background-color: var(--bg-muted) !important;
    border-color: var(--border) !important;
}

.md-editor > .md-header .btn-default {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text-accented) !important;
}

/* Alert Boxes (Info, Warning, Success, etc.) */
.alert-info, .alert-warning, .alert-success, .alert-danger, .alert {
    background-color: var(--bg-muted) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

.alert a {
    color: var(--primary) !important;
    font-weight: bold;
}