/* Dark Teal Theme for 409 Backend Webapp */
/* Color Palette:
   Primary teal: #42a9ac
   Light teal: #c1f6f7
   Medium teal: #52aaa5
   Dark teal: #1a5557
   Dark grey background: #1a1a1a
   Light text: #f8f9fa
*/

/* Import Manrope font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');

/* Root variables for theme */
:root.dark-teal-theme {
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #f8f9fa;
    --bs-primary: #42a9ac;
    --bs-primary-rgb: 66, 169, 172;
    --bs-secondary: #52aaa5;
    --bs-light: #c1f6f7;
    --bs-dark: #1a5557;
    --bs-border-color: #2d2d2d;
    --bs-border-radius: 0.375rem;
}

/* Apply theme to html element when active */
html.dark-teal-theme {
    font-family: 'Manrope', sans-serif !important;
}

body.dark-teal-theme {
    background-color: #1a1a1a !important;
    color: #f8f9fa !important;
    font-family: 'Manrope', sans-serif !important;
}

/* Main content area background */
.dark-teal-theme .main-content {
    background-color: #1a1a1a !important;
}

/* Container backgrounds */
.dark-teal-theme .container,
.dark-teal-theme .container-fluid {
    background-color: transparent !important;
}

/* Typography */
.dark-teal-theme h1,
.dark-teal-theme h2,
.dark-teal-theme h3,
.dark-teal-theme h4,
.dark-teal-theme h5,
.dark-teal-theme h6 {
    font-weight: 600;
    color: #f8f9fa;
}

/* Cards and containers */
.dark-teal-theme .card {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(66, 169, 172, 0.15), 0 2px 4px rgba(66, 169, 172, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dark-teal-theme .card:hover {
    box-shadow: 0 6px 16px rgba(66, 169, 172, 0.25), 0 3px 6px rgba(66, 169, 172, 0.15);
    transform: translateY(-2px);
}

.dark-teal-theme .card-header {
    background-color: #1a5557;
    border-bottom-color: #3d3d3d;
    color: #c1f6f7 !important;
}

.dark-teal-theme .card-body {
    color: #f8f9fa !important;
}

.dark-teal-theme .card-title {
    color: #c1f6f7 !important;
}

.dark-teal-theme .card-text {
    color: #e9ecef !important;
}

/* Buttons */
.dark-teal-theme .btn-primary {
    background-color: #42a9ac;
    border-color: #42a9ac;
    color: #ffffff;
    transition: all 0.3s ease;
}

.dark-teal-theme .btn-primary:hover,
.dark-teal-theme .btn-primary:focus {
    background-color: #389ea1;
    border-color: #389ea1;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(66, 169, 172, 0.3);
}

.dark-teal-theme .btn-light {
    background-color: #c1f6f7;
    border-color: #c1f6f7;
    color: #1a5557;
    transition: all 0.3s ease;
}

.dark-teal-theme .btn-light:hover,
.dark-teal-theme .btn-light:focus {
    background-color: #b0e5e6;
    border-color: #b0e5e6;
    color: #1a5557;
}

.dark-teal-theme .btn-secondary {
    background-color: #52aaa5;
    border-color: #52aaa5;
    transition: all 0.3s ease;
}

/* Navigation */
.dark-teal-theme .navbar {
    background: linear-gradient(135deg, #1a5557 0%, #42a9ac 100%) !important;
    border-bottom: 2px solid #52aaa5;
}

.dark-teal-theme .navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
}

.dark-teal-theme .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: color 0.3s ease;
}

.dark-teal-theme .nav-link:hover {
    color: #c1f6f7 !important;
}

/* Sidebar */
.dark-teal-theme .sidebar {
    /* Use client-specific color if defined, otherwise use teal gradient */
    background: linear-gradient(135deg, 
        var(--sidebar-bg-color, #42a9ac) 0%, 
        var(--sidebar-active-bg, #1a5557) 100%);
    border-right-color: #3d3d3d;
    box-shadow: 2px 0 8px rgba(66, 169, 172, 0.2);
}

.dark-teal-theme .sidebar .nav-link {
    color: var(--sidebar-text-color, #f8f9fa);
    transition: all 0.3s ease;
}

.dark-teal-theme .sidebar .nav-link:hover {
    background-color: var(--sidebar-hover-bg, rgba(193, 246, 247, 0.15));
    color: var(--sidebar-hover-color, #c1f6f7);
    border-radius: 0.375rem;
    box-shadow: 0 2px 6px rgba(193, 246, 247, 0.2);
}

.dark-teal-theme .sidebar .nav-link.active {
    background-color: var(--sidebar-active-bg, rgba(193, 246, 247, 0.15));
    color: var(--sidebar-active-text, #c1f6f7);
    border-radius: 0.375rem;
    box-shadow: 0 2px 6px rgba(193, 246, 247, 0.2);
    border-left: 3px solid var(--sidebar-active-border, #c1f6f7);
}

/* Tables */
.dark-teal-theme .table {
    color: #f8f9fa;
    border-color: #3d3d3d;
}

.dark-teal-theme .table thead th {
    background-color: #1a5557;
    border-color: #3d3d3d;
    color: #c1f6f7;
}

.dark-teal-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #252525;
}

.dark-teal-theme .table-hover > tbody > tr:hover > * {
    background-color: #2d2d2d;
}

/* Forms */
.dark-teal-theme .form-control,
.dark-teal-theme .form-select {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #f8f9fa;
}

.dark-teal-theme .form-control::placeholder {
    color: #8a9ba8;
}

.dark-teal-theme .form-control:focus,
.dark-teal-theme .form-select:focus {
    background-color: #2d2d2d;
    border-color: #42a9ac;
    color: #f8f9fa;
    box-shadow: 0 0 0 0.25rem rgba(66, 169, 172, 0.25);
}

.dark-teal-theme .form-label {
    color: #c1f6f7;
    font-weight: 600;
}

/* Input groups with icons */
.dark-teal-theme .input-group {
    color: #f8f9fa;
}

.dark-teal-theme .input-group > .form-control,
.dark-teal-theme .input-group > .form-select {
    color: #f8f9fa;
}

/* Date input styling */
.dark-teal-theme input[type="date"],
.dark-teal-theme input[type="datetime-local"],
.dark-teal-theme input[type="time"] {
    color: #f8f9fa !important;
    background-color: #2d2d2d !important;
}

.dark-teal-theme input[type="date"]::-webkit-calendar-picker-indicator,
.dark-teal-theme input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
}

/* Badges */
/* Badges */
.dark-teal-theme .badge {
    transition: all 0.3s ease;
}

.dark-teal-theme .badge.bg-primary {
    background-color: #42a9ac !important;
    color: #ffffff !important;
}

.dark-teal-theme .badge.bg-success {
    background-color: #52aaa5 !important;
    color: #ffffff !important;
}

.dark-teal-theme .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.dark-teal-theme .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #1a1a1a !important;
}

.dark-teal-theme .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #1a1a1a !important;
}

.dark-teal-theme .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* Ensure all badges have readable text */
.dark-teal-theme .badge,
.dark-teal-theme .client-badge-link {
    color: #ffffff !important;
}

/* Fix for any badges in links */
.dark-teal-theme a .badge {
    color: #ffffff !important;
}

/* Alerts */
.dark-teal-theme .alert {
    border-radius: 0.375rem;
    border-color: #3d3d3d;
}

.dark-teal-theme .alert-info {
    background-color: rgba(66, 169, 172, 0.2);
    border-color: #42a9ac;
    color: #c1f6f7;
}

.dark-teal-theme .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
    color: #ff6b7a;
}

.dark-teal-theme .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
    color: #ffd454;
}

.dark-teal-theme .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: #198754;
    color: #75f3a4;
}

.dark-teal-theme .alert-primary {
    background-color: rgba(66, 169, 172, 0.15);
    border-color: #42a9ac;
    color: #c1f6f7;
}

/* Bootstrap contextual backgrounds */
.dark-teal-theme .bg-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

.dark-teal-theme .bg-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
}

.dark-teal-theme .bg-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
}

.dark-teal-theme .bg-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
}

/* Text colors for contextual states */
.dark-teal-theme .text-danger {
    color: #ff6b7a !important;
}

.dark-teal-theme .text-warning {
    color: #ffd454 !important;
}

.dark-teal-theme .text-success {
    color: #75f3a4 !important;
}

.dark-teal-theme .text-info {
    color: #6dd5ed !important;
}

/* Modals */
.dark-teal-theme .modal-content {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    box-shadow: 0 8px 24px rgba(66, 169, 172, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-teal-theme .modal-header {
    background-color: #1a5557;
    border-bottom-color: #3d3d3d;
}

.dark-teal-theme .modal-footer {
    border-top-color: #3d3d3d;
}

/* Dropdowns */
.dark-teal-theme .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    box-shadow: 0 4px 12px rgba(66, 169, 172, 0.15), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dark-teal-theme .dropdown-item {
    color: #f8f9fa;
    transition: all 0.3s ease;
}

.dark-teal-theme .dropdown-item:hover,
.dark-teal-theme .dropdown-item:focus {
    background-color: #42a9ac;
    color: #ffffff;
}

/* Pagination */
.dark-teal-theme .pagination .page-link {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #42a9ac;
    transition: all 0.3s ease;
}

.dark-teal-theme .pagination .page-link:hover {
    background-color: #42a9ac;
    border-color: #42a9ac;
    color: #ffffff;
}

.dark-teal-theme .pagination .page-item.active .page-link {
    background-color: #42a9ac;
    border-color: #42a9ac;
}

/* Progress bars */
.dark-teal-theme .progress {
    background-color: #2d2d2d;
}

.dark-teal-theme .progress-bar {
    background-color: #42a9ac;
}

/* Tooltips */
.dark-teal-theme .tooltip-inner {
    background-color: #42a9ac;
}

/* Links */
.dark-teal-theme a {
    color: #52aaa5;
    transition: color 0.3s ease;
}

.dark-teal-theme a:hover {
    color: #42a9ac;
}

/* Breadcrumb */
.dark-teal-theme .breadcrumb {
    background-color: #2d2d2d;
}

.dark-teal-theme .breadcrumb-item.active {
    color: #c1f6f7;
}

/* List groups */
.dark-teal-theme .list-group-item {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(66, 169, 172, 0.08);
}

.dark-teal-theme .list-group-item:hover {
    background-color: #3d3d3d;
    box-shadow: 0 3px 6px rgba(66, 169, 172, 0.12);
}

.dark-teal-theme .list-group-item strong {
    color: #c1f6f7 !important;
}

.dark-teal-theme .list-group-item small {
    color: #b0e5e6 !important;
}

/* Ensure all paragraph text is readable */
.dark-teal-theme p {
    color: #e9ecef !important;
}

/* Headings in cards */
.dark-teal-theme .card h1,
.dark-teal-theme .card h2,
.dark-teal-theme .card h3,
.dark-teal-theme .card h4,
.dark-teal-theme .card h5,
.dark-teal-theme .card h6 {
    color: #c1f6f7 !important;
}

/* Span elements */
.dark-teal-theme span {
    color: inherit;
}

/* Strong/bold text */
.dark-teal-theme strong,
.dark-teal-theme b {
    color: #c1f6f7 !important;
}

/* Alerts */
.dark-teal-theme .alert {
    border-radius: 0.375rem;
    border-color: #3d3d3d;
    box-shadow: 0 2px 6px rgba(66, 169, 172, 0.1);
}

/* Tables with shadow */
.dark-teal-theme .table-responsive {
    box-shadow: 0 2px 8px rgba(66, 169, 172, 0.1);
    border-radius: 0.375rem;
}

/* Well/Panel style containers */
.dark-teal-theme .well,
.dark-teal-theme .panel,
.dark-teal-theme .bg-light {
    background-color: #2d2d2d !important;
    box-shadow: 0 2px 6px rgba(66, 169, 172, 0.1);
}

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: all 0.3s ease;
    border-radius: 0.375rem;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(180deg);
}

/* Smooth transitions for all interactive elements */
.dark-teal-theme button,
.dark-teal-theme a,
.dark-teal-theme .btn,
.dark-teal-theme .nav-link,
.dark-teal-theme .dropdown-item {
    transition: all 0.3s ease;
}

/* Chart.js and graph text styling */
.dark-teal-theme canvas {
    /* Charts will inherit text color from parent */
    color: #f8f9fa;
}

/* Chart legends and labels */
.dark-teal-theme .chartjs-render-monitor {
    color: #f8f9fa !important;
}

/* Any divs containing charts */
.dark-teal-theme .chart-container,
.dark-teal-theme [class*="chart"] {
    color: #f8f9fa;
}

/* SVG text elements (for some chart libraries) */
.dark-teal-theme svg text {
    fill: #f8f9fa !important;
}

/* Chart titles and descriptions */
.dark-teal-theme .chart-title,
.dark-teal-theme .chart-description,
.dark-teal-theme canvas + div,
.dark-teal-theme canvas ~ * {
    color: #f8f9fa !important;
}

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

.dark-teal-theme ::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark-teal-theme ::-webkit-scrollbar-thumb {
    background: #42a9ac;
    border-radius: 5px;
}

.dark-teal-theme ::-webkit-scrollbar-thumb:hover {
    background: #52aaa5;
}

/* Text colors */
.dark-teal-theme .text-muted {
    color: #c1f6f7 !important;
}

.dark-teal-theme .text-primary {
    color: #42a9ac !important;
}

.dark-teal-theme .text-secondary {
    color: #52aaa5 !important;
}

.dark-teal-theme .text-white {
    color: #f8f9fa !important;
}

.dark-teal-theme .text-dark,
.dark-teal-theme .text-black {
    color: #e9ecef !important;
}

/* Small text */
.dark-teal-theme small,
.dark-teal-theme .small {
    color: #c1f6f7 !important;
}

/* Icons - make them more visible */
.dark-teal-theme i,
.dark-teal-theme .fas,
.dark-teal-theme .far,
.dark-teal-theme .fab,
.dark-teal-theme .bi {
    color: inherit;
}

/* Calendar and date picker icons */
.dark-teal-theme .input-group-text {
    background-color: #42a9ac;
    border-color: #42a9ac;
    color: #ffffff !important;
}

.dark-teal-theme .input-group-text i {
    color: #ffffff !important;
}

/* Date filtering buttons and icons */
.dark-teal-theme .btn .fas,
.dark-teal-theme .btn .far,
.dark-teal-theme .btn i {
    color: inherit !important;
}

.dark-teal-theme .btn-outline-secondary {
    border-color: #52aaa5;
    color: #c1f6f7 !important;
}

.dark-teal-theme .btn-outline-secondary:hover {
    background-color: #52aaa5;
    border-color: #52aaa5;
    color: #ffffff !important;
}

.dark-teal-theme .btn-outline-secondary i {
    color: inherit !important;
}

/* Border utilities */
.dark-teal-theme .border {
    border-color: #3d3d3d !important;
}

/* Background utilities */
.dark-teal-theme .bg-light {
    background-color: #2d2d2d !important;
}

.dark-teal-theme .bg-white {
    background-color: #252525 !important;
}

/* Fix for any remaining white/gray text issues */
.dark-teal-theme .text-gray,
.dark-teal-theme .text-gray-600,
.dark-teal-theme .text-gray-700,
.dark-teal-theme .text-gray-800 {
    color: #c1f6f7 !important;
}

/* Ensure labels are visible */
.dark-teal-theme label {
    color: #c1f6f7 !important;
}

/* Time/date badges */
.dark-teal-theme .badge {
    transition: all 0.3s ease;
}

.dark-teal-theme .badge.bg-light {
    background-color: #52aaa5 !important;
    color: #ffffff !important;
}

.dark-teal-theme .badge.text-dark {
    color: #ffffff !important;
}

/* Fix for any divs with gray text */
.dark-teal-theme div {
    color: inherit;
}

/* Override any inline styles that might set white or gray text */
.dark-teal-theme [style*="color: white"],
.dark-teal-theme [style*="color: #fff"],
.dark-teal-theme [style*="color: gray"],
.dark-teal-theme [style*="color: grey"] {
    color: #c1f6f7 !important;
}

/* Fix for inline styled alerts (like dashboard user info) */
.dark-teal-theme .alert[style*="background-color"] {
    background-color: rgba(66, 169, 172, 0.2) !important;
    border-color: #42a9ac !important;
    color: #f8f9fa !important;
}

.dark-teal-theme .alert[style*="background-color"] small {
    color: #c1f6f7 !important;
}

.dark-teal-theme .alert[style*="background-color"] strong {
    color: #c1f6f7 !important;
}

/* Specifically fix the success-colored alert on dashboard */
.dark-teal-theme .alert[style*="#d4edda"],
.dark-teal-theme .alert[style*="#155724"] {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: #198754 !important;
    color: #f8f9fa !important;
}

/* Logo upload drop zone styling for dark theme */
.dark-teal-theme #logo-drop-zone {
    background-color: rgba(66, 169, 172, 0.1) !important;
    border-color: #42a9ac !important;
}

.dark-teal-theme #logo-drop-zone .text-primary {
    color: #c1f6f7 !important;
}

.dark-teal-theme #logo-drop-zone .text-dark {
    color: #f8f9fa !important;
}

.dark-teal-theme #logo-drop-zone .text-secondary {
    color: #b0b0b0 !important;
}

.dark-teal-theme #logo-drop-zone i.text-primary {
    color: #42a9ac !important;
}