/* Dark Mode Styles */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3a3a3a;
    --dark-text-primary: #f0f0f0;
    --dark-text-secondary: #c0c0c0;
    --dark-text-muted: #888888;
    --dark-border: #404040;
    --dark-link: #4db8ff;
    --dark-link-hover: #80ccff;
    --dark-success: #5cb85c;
    --dark-danger: #d9534f;
    --dark-warning: #f0ad4e;
    --dark-info: #5bc0de;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    background: transparent;
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    margin-left: 1rem;
}

.dark-mode-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Dark mode classes */
body.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

body.dark-mode .header {
    background-color: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode .navbar-light .navbar-brand {
    filter: brightness(0.9);
}

body.dark-mode .navbar-light .navbar-nav .nav-link {
    color: var(--dark-text-primary);
}

body.dark-mode .navbar-light .navbar-nav .nav-link:hover,
body.dark-mode .navbar-light .navbar-nav .nav-link:focus {
    color: var(--dark-link-hover);
}

body.dark-mode .navbar-light .navbar-nav .active > .nav-link {
    color: var(--dark-link);
}

body.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode .dropdown-item {
    color: var(--dark-text-primary);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-link);
}

body.dark-mode .dropdown-divider {
    border-top-color: var(--dark-border);
}

/* Cards and panels */
body.dark-mode .card,
body.dark-mode .form-card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-mode .card-header {
    background-color: var(--dark-bg-tertiary);
    border-bottom-color: var(--dark-border);
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-link);
    color: var(--dark-text-primary);
    box-shadow: 0 0 0 0.25rem rgba(77, 184, 255, 0.25);
}

body.dark-mode .form-control[readonly],
body.dark-mode .form-control:disabled {
    background-color: var(--dark-bg-primary);
    opacity: 0.7;
}

body.dark-mode .form-label {
    color: var(--dark-text-secondary);
}

/* Tables */
body.dark-mode .table {
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.04);
}

body.dark-mode .table-bordered > :not(caption) > * {
    border-color: var(--dark-border);
}

body.dark-mode th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

/* Buttons */
body.dark-mode .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

body.dark-mode .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

body.dark-mode .btn-secondary {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .btn-secondary:hover {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-mode .btn-outline-primary {
    color: var(--dark-link);
    border-color: var(--dark-link);
}

body.dark-mode .btn-outline-primary:hover {
    background-color: var(--dark-link);
    border-color: var(--dark-link);
    color: #fff;
}

/* Alerts */
body.dark-mode .alert {
    border: 1px solid transparent;
}

body.dark-mode .alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.3);
    color: #5cb85c;
}

body.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
    color: #d9534f;
}

body.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.3);
    color: #f0ad4e;
}

body.dark-mode .alert-info {
    background-color: rgba(23, 162, 184, 0.2);
    border-color: rgba(23, 162, 184, 0.3);
    color: #5bc0de;
}

/* Badges */
body.dark-mode .badge {
    font-weight: 500;
}

/* Pagination */
body.dark-mode .page-link {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .page-link:hover {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-link);
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--dark-link);
    border-color: var(--dark-link);
}

/* Modal */
body.dark-mode .modal-content {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--dark-border);
}

body.dark-mode .close {
    color: var(--dark-text-primary);
    opacity: 0.8;
}

/* Section backgrounds */
body.dark-mode .about-section {
    background-color: var(--dark-bg-primary);
}

body.dark-mode .banner_outer {
    background-color: var(--dark-bg-secondary);
}

body.dark-mode .footer-section {
    background-color: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
}

/* Links */
body.dark-mode a {
    color: var(--dark-link);
}

body.dark-mode a:hover {
    color: var(--dark-link-hover);
}

/* Custom elements */
body.dark-mode .section-title {
    color: var(--dark-text-primary);
}

body.dark-mode .form-section {
    border-bottom-color: var(--dark-border);
}

body.dark-mode .invoice-item {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode .subscription-line {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
}

/* Dark mode toggle button styling */
body.dark-mode .dark-mode-toggle {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .dark-mode-toggle:hover {
    background: var(--dark-bg-secondary);
}

/* Additional dark mode overrides for specific components */
body.dark-mode .bg-light {
    background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .text-dark {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .text-muted {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .border {
    border-color: var(--dark-border) !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .border-top {
    border-top-color: var(--dark-border) !important;
}

body.dark-mode hr {
    border-color: var(--dark-border);
    opacity: 0.5;
}

/* Code blocks */
body.dark-mode pre,
body.dark-mode code {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

/* Scrollbar styling for dark mode */
body.dark-mode::-webkit-scrollbar {
    width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--dark-bg-tertiary);
    border-radius: 6px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Additional text visibility improvements */
body.dark-mode p,
body.dark-mode span:not(.badge),
body.dark-mode div,
body.dark-mode li {
    color: var(--dark-text-primary);
}

body.dark-mode small {
    color: var(--dark-text-secondary);
}

/* Headers and titles */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dark-text-primary);
}

/* Lists */
body.dark-mode ul li,
body.dark-mode ol li {
    color: var(--dark-text-primary);
}

/* Ensure all text in sections is visible */
body.dark-mode .about-section,
body.dark-mode .about-section * {
    color: var(--dark-text-primary);
}

/* Banner and content areas */
body.dark-mode .banner-content,
body.dark-mode .content-box,
body.dark-mode .service-content,
body.dark-mode .team-content {
    color: var(--dark-text-primary);
}

/* Ensure badges keep their colors */
body.dark-mode .badge {
    color: #fff !important;
}

/* Fix for specific text elements */
body.dark-mode .text-primary {
    color: var(--dark-link) !important;
}

body.dark-mode .text-secondary {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-success {
    color: var(--dark-success) !important;
}

body.dark-mode .text-danger {
    color: var(--dark-danger) !important;
}

body.dark-mode .text-warning {
    color: var(--dark-warning) !important;
}

body.dark-mode .text-info {
    color: var(--dark-info) !important;
}

body.dark-mode .text-light {
    color: var(--dark-text-primary) !important;
}

/* Ensure activity time and other muted elements are readable */
body.dark-mode .activity-time {
    color: var(--dark-text-muted);
}

/* Fix for text in dark backgrounds becoming invisible */
body.dark-mode .text-white {
    color: var(--dark-text-primary) !important;
}

/* Navbar text fix */
body.dark-mode .navbar-light .navbar-text {
    color: var(--dark-text-primary);
}

/* Make sure placeholder text is visible */
body.dark-mode ::placeholder {
    color: var(--dark-text-muted);
    opacity: 1;
}

body.dark-mode ::-webkit-input-placeholder {
    color: var(--dark-text-muted);
}

body.dark-mode ::-moz-placeholder {
    color: var(--dark-text-muted);
}

body.dark-mode :-ms-input-placeholder {
    color: var(--dark-text-muted);
}

body.dark-mode :-moz-placeholder {
    color: var(--dark-text-muted);
}