/* Redcliff Municipality Fault Reporting System - Custom Styles */

/* Global Styles - Calm and Professional Color Scheme */
:root {
    --primary-color: #4a5568;
    --secondary-color: #718096;
    --success-color: #38a169;
    --warning-color: #d69e2e;
    --danger-color: #e53e3e;
    --info-color: #3182ce;
    --light-color: #f7fafc;
    --dark-color: #2d3748;
    --border-radius: 0.375rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --transition: all 0.15s ease-in-out;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #2d3748;
    background-color: #f7fafc;
}

/* Ensure text contrast for all elements */
.text-dark {
    color: #2d3748 !important;
}

.text-light {
    color: #f7fafc !important;
}

.text-muted {
    color: #718096 !important;
}

/* Card text colors - ensure proper contrast */
.card {
    color: #2d3748 !important;
    background-color: #fff;
    border: 1px solid #e2e8f0;
}

.card-header {
    color: #2d3748 !important;
    background-color: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
}

.card-body {
    color: #2d3748 !important;
    background-color: #fff;
}

/* Colored cards with proper text contrast */
.card.bg-primary {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.card.bg-primary .card-body {
    color: #fff !important;
}

.card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3, .card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6 {
    color: #fff !important;
}

.card.bg-primary p, .card.bg-primary small {
    color: #fff !important;
}

.card.bg-success {
    color: #fff !important;
    background-color: var(--success-color) !important;
}

.card.bg-success .card-body {
    color: #fff !important;
}

.card.bg-success h1, .card.bg-success h2, .card.bg-success h3, .card.bg-success h4, .card.bg-success h5, .card.bg-success h6 {
    color: #fff !important;
}

.card.bg-success p, .card.bg-success small {
    color: #fff !important;
}

.card.bg-info {
    color: #fff !important;
    background-color: var(--info-color) !important;
}

.card.bg-info .card-body {
    color: #fff !important;
}

.card.bg-info h1, .card.bg-info h2, .card.bg-info h3, .card.bg-info h4, .card.bg-info h5, .card.bg-info h6 {
    color: #fff !important;
}

.card.bg-info p, .card.bg-info small {
    color: #fff !important;
}

.card.bg-warning {
    color: #2d3748 !important;
    background-color: var(--warning-color) !important;
}

.card.bg-warning .card-body {
    color: #2d3748 !important;
}

.card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3, .card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6 {
    color: #2d3748 !important;
}

.card.bg-warning p, .card.bg-warning small {
    color: #2d3748 !important;
}

.card.bg-danger {
    color: #fff !important;
    background-color: var(--danger-color) !important;
}

.card.bg-danger .card-body {
    color: #fff !important;
}

.card.bg-danger h1, .card.bg-danger h2, .card.bg-danger h3, .card.bg-danger h4, .card.bg-danger h5, .card.bg-danger h6 {
    color: #fff !important;
}

.card.bg-danger p, .card.bg-danger small {
    color: #fff !important;
}

.card.bg-secondary {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
}

.card.bg-secondary .card-body {
    color: #fff !important;
}

.card.bg-secondary h1, .card.bg-secondary h2, .card.bg-secondary h3, .card.bg-secondary h4, .card.bg-secondary h5, .card.bg-secondary h6 {
    color: #fff !important;
}

.card.bg-secondary p, .card.bg-secondary small {
    color: #fff !important;
}

.card.bg-dark {
    color: #fff !important;
}

.card.bg-dark .card-body {
    color: #fff !important;
}

.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3, .card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6 {
    color: #fff !important;
}

.card.bg-dark p, .card.bg-dark small {
    color: #fff !important;
}

/* Table text colors */
.table {
    color: #2d3748;
}

.table th {
    color: #2d3748;
    background-color: #f7fafc;
}

.table td {
    color: #2d3748;
}

/* Badge text colors with proper contrast */
.badge {
    color: #fff;
}

.badge.bg-light {
    color: #2d3748 !important;
}

.badge.bg-warning {
    color: #2d3748 !important;
}

.badge.bg-info {
    color: #fff !important;
}

.badge.bg-primary {
    color: #fff !important;
}

.badge.bg-success {
    color: #fff !important;
}

.badge.bg-danger {
    color: #fff !important;
}

.badge.bg-secondary {
    color: #fff !important;
}

.badge.bg-dark {
    color: #fff !important;
}

/* Button text colors */
.btn-light {
    color: #2d3748;
}

.btn-outline-light {
    color: #f7fafc;
}

.btn-outline-light:hover {
    color: #2d3748;
}

/* Dropdown text colors */
.dropdown-menu {
    color: #2d3748;
    background-color: #fff;
}

.dropdown-item {
    color: #2d3748;
}

.dropdown-item:hover {
    color: #2d3748;
    background-color: #f7fafc;
}

/* Navbar text colors */
.navbar-dark .navbar-nav .nav-link {
    color: #f7fafc !important;
}

.navbar-dark .navbar-brand {
    color: #f7fafc !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #2d3748 !important;
}

.navbar-light .navbar-brand {
    color: #2d3748 !important;
}

/* Footer text colors */
footer {
    color: #f7fafc;
}

/* Custom styling for professional appearance */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #2d3748;
    border-color: #2d3748;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #2d3748;
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Professional alert styling */
.alert {
    border-radius: 0.5rem;
    border: none;
    padding: 1rem 1.25rem;
}

.alert-primary {
    background-color: #e6f3ff;
    color: var(--primary-color);
}

.alert-success {
    background-color: #e6fffa;
    color: var(--success-color);
}

.alert-info {
    background-color: #e6f7ff;
    color: var(--info-color);
}

.alert-warning {
    background-color: #fefcbf;
    color: #744210;
}

.alert-danger {
    background-color: #fed7d7;
    color: var(--danger-color);
}

/* Soft shadows for depth */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.card-header {
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Professional form styling */
.form-control {
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(74, 85, 104, 0.25);
}

/* Navbar styling for professional look */
.navbar {
    background-color: var(--primary-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Logo styling */
.navbar-logo {
    height: 40px;
    width: auto;
    max-width: 40px;
    object-fit: contain;
    border-radius: 4px;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.25rem;
    text-decoration: none;
}

.navbar-text {
    color: #fff !important;
    margin: 0;
    font-weight: 600;
}

/* Authentication logo styling */
.auth-logo {
    height: 80px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Alert text colors with proper contrast */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
}

.alert-info {
    color: #0c5460;
    background-color: #cce8f4;
}

/* Text colors for different backgrounds */
.bg-primary, .bg-success, .bg-info, .bg-danger, .bg-secondary, .bg-dark {
    color: #fff !important;
}

.bg-warning, .bg-light {
    color: #212529 !important;
}

/* Ensure form elements have proper contrast */
.form-control {
    color: #212529;
    background-color: #fff;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
}

.form-select {
    color: #212529;
    background-color: #fff;
}

.form-select:focus {
    color: #212529;
    background-color: #fff;
}

/* Hero section text */
.hero-section {
    color: #fff !important;
}

.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6 {
    color: #fff !important;
}

.hero-section p, .hero-section small {
    color: #fff !important;
}

/* Timeline text colors */
.timeline-item {
    color: #212529;
}

/* Modal text colors */
.modal-content {
    color: #212529;
    background-color: #fff;
}

.modal-header {
    color: #212529;
    background-color: #f8f9fa;
}

.modal-body {
    color: #212529;
    background-color: #fff;
}

.modal-footer {
    color: #212529;
    background-color: #f8f9fa;
}

/* Navigation */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    pointer-events: none;
}

/* Cards */
.card {
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    background-color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    color: #212529 !important;
}

.card-body {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Override for regular cards to ensure dark text */
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) {
    color: #212529 !important;
}

.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) .card-body {
    color: #212529 !important;
}

.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) .card-header {
    color: #212529 !important;
}

.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) h1,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) h2,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) h3,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) h4,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) h5,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) h6 {
    color: #212529 !important;
}

.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) p,
.card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-danger):not(.bg-secondary):not(.bg-dark):not(.bg-warning) small {
    color: #212529 !important;
}

/* Force all regular white cards to have dark text - Most specific rules */
.card,
.card *,
.card .card-body,
.card .card-body *,
.card .card-header,
.card .card-header *,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card p, .card small, .card span, .card div, .card a,
.card td, .card th, .card tbody, .card tr,
.card .text-muted,
.card .small,
.card .mb-0,
.card .mb-1,
.card .mb-2,
.card .mb-3,
.card .fw-bold,
.card .text-center,
.card .py-3 {
    color: #212529 !important;
}

/* Bootstrap utility class overrides for cards */
.card .text-white {
    color: #212529 !important;
}

.card .text-light {
    color: #212529 !important;
}

/* Override only for specifically colored cards */
.card.bg-primary, 
.card.bg-primary *,
.card.bg-primary .card-body,
.card.bg-primary .card-body *,
.card.bg-primary .card-header,
.card.bg-primary .card-header *,
.card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3, 
.card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
.card.bg-primary p, .card.bg-primary small, .card.bg-primary span, 
.card.bg-primary div, .card.bg-primary a,
.card.bg-primary td, .card.bg-primary th, .card.bg-primary tbody, .card.bg-primary tr,
.card.bg-primary .text-muted,
.card.bg-primary .small,
.card.bg-primary .mb-0,
.card.bg-primary .mb-1,
.card.bg-primary .mb-2,
.card.bg-primary .mb-3,
.card.bg-primary .fw-bold,
.card.bg-primary .text-center,
.card.bg-primary .py-3 {
    color: #fff !important;
}

.card.bg-success, 
.card.bg-success *,
.card.bg-success .card-body,
.card.bg-success .card-body *,
.card.bg-success .card-header,
.card.bg-success .card-header *,
.card.bg-success h1, .card.bg-success h2, .card.bg-success h3, 
.card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
.card.bg-success p, .card.bg-success small, .card.bg-success span, 
.card.bg-success div, .card.bg-success a,
.card.bg-success td, .card.bg-success th, .card.bg-success tbody, .card.bg-success tr,
.card.bg-success .text-muted,
.card.bg-success .small,
.card.bg-success .mb-0,
.card.bg-success .mb-1,
.card.bg-success .mb-2,
.card.bg-success .mb-3,
.card.bg-success .fw-bold,
.card.bg-success .text-center,
.card.bg-success .py-3 {
    color: #fff !important;
}

.card.bg-info, 
.card.bg-info *,
.card.bg-info .card-body,
.card.bg-info .card-body *,
.card.bg-info .card-header,
.card.bg-info .card-header *,
.card.bg-info h1, .card.bg-info h2, .card.bg-info h3, 
.card.bg-info h4, .card.bg-info h5, .card.bg-info h6,
.card.bg-info p, .card.bg-info small, .card.bg-info span, 
.card.bg-info div, .card.bg-info a,
.card.bg-info td, .card.bg-info th, .card.bg-info tbody, .card.bg-info tr,
.card.bg-info .text-muted,
.card.bg-info .small,
.card.bg-info .mb-0,
.card.bg-info .mb-1,
.card.bg-info .mb-2,
.card.bg-info .mb-3,
.card.bg-info .fw-bold,
.card.bg-info .text-center,
.card.bg-info .py-3 {
    color: #fff !important;
}

.card.bg-danger, 
.card.bg-danger *,
.card.bg-danger .card-body,
.card.bg-danger .card-body *,
.card.bg-danger .card-header,
.card.bg-danger .card-header *,
.card.bg-danger h1, .card.bg-danger h2, .card.bg-danger h3, 
.card.bg-danger h4, .card.bg-danger h5, .card.bg-danger h6,
.card.bg-danger p, .card.bg-danger small, .card.bg-danger span, 
.card.bg-danger div, .card.bg-danger a,
.card.bg-danger td, .card.bg-danger th, .card.bg-danger tbody, .card.bg-danger tr,
.card.bg-danger .text-muted,
.card.bg-danger .small,
.card.bg-danger .mb-0,
.card.bg-danger .mb-1,
.card.bg-danger .mb-2,
.card.bg-danger .mb-3,
.card.bg-danger .fw-bold,
.card.bg-danger .text-center,
.card.bg-danger .py-3 {
    color: #fff !important;
}

.card.bg-secondary, 
.card.bg-secondary *,
.card.bg-secondary .card-body,
.card.bg-secondary .card-body *,
.card.bg-secondary .card-header,
.card.bg-secondary .card-header *,
.card.bg-secondary h1, .card.bg-secondary h2, .card.bg-secondary h3, 
.card.bg-secondary h4, .card.bg-secondary h5, .card.bg-secondary h6,
.card.bg-secondary p, .card.bg-secondary small, .card.bg-secondary span, 
.card.bg-secondary div, .card.bg-secondary a,
.card.bg-secondary td, .card.bg-secondary th, .card.bg-secondary tbody, .card.bg-secondary tr,
.card.bg-secondary .text-muted,
.card.bg-secondary .small,
.card.bg-secondary .mb-0,
.card.bg-secondary .mb-1,
.card.bg-secondary .mb-2,
.card.bg-secondary .mb-3,
.card.bg-secondary .fw-bold,
.card.bg-secondary .text-center,
.card.bg-secondary .py-3 {
    color: #fff !important;
}

.card.bg-dark, 
.card.bg-dark *,
.card.bg-dark .card-body,
.card.bg-dark .card-body *,
.card.bg-dark .card-header,
.card.bg-dark .card-header *,
.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3, 
.card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6,
.card.bg-dark p, .card.bg-dark small, .card.bg-dark span, 
.card.bg-dark div, .card.bg-dark a,
.card.bg-dark td, .card.bg-dark th, .card.bg-dark tbody, .card.bg-dark tr,
.card.bg-dark .text-muted,
.card.bg-dark .small,
.card.bg-dark .mb-0,
.card.bg-dark .mb-1,
.card.bg-dark .mb-2,
.card.bg-dark .mb-3,
.card.bg-dark .fw-bold,
.card.bg-dark .text-center,
.card.bg-dark .py-3 {
    color: #fff !important;
}

.card.bg-warning, 
.card.bg-warning *,
.card.bg-warning .card-body,
.card.bg-warning .card-body *,
.card.bg-warning .card-header,
.card.bg-warning .card-header *,
.card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3, 
.card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6,
.card.bg-warning p, .card.bg-warning small, .card.bg-warning span, 
.card.bg-warning div, .card.bg-warning a,
.card.bg-warning td, .card.bg-warning th, .card.bg-warning tbody, .card.bg-warning tr,
.card.bg-warning .text-muted,
.card.bg-warning .small,
.card.bg-warning .mb-0,
.card.bg-warning .mb-1,
.card.bg-warning .mb-2,
.card.bg-warning .mb-3,
.card.bg-warning .fw-bold,
.card.bg-warning .text-center,
.card.bg-warning .py-3 {
    color: #212529 !important;
}

/* Force visibility for all card content */
.card, .card * {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Special rules for table elements in cards */
.card table, .card tbody, .card tr, .card td, .card th {
    display: table !important;
}

.card tbody {
    display: table-row-group !important;
}

.card tr {
    display: table-row !important;
}

.card td, .card th {
    display: table-cell !important;
}

/* Utility class for forcing black text - use as inline style helper */
.force-black-text,
.force-black-text *,
.force-black-text h1,
.force-black-text h2,
.force-black-text h3,
.force-black-text h4,
.force-black-text h5,
.force-black-text h6,
.force-black-text p,
.force-black-text div,
.force-black-text span,
.force-black-text small,
.force-black-text td,
.force-black-text th,
.force-black-text .badge,
.force-black-text .text-muted {
    color: #212529 !important;
}

/* Inline style equivalent for direct application */
[style*="color: #212529"] {
    color: #212529 !important;
}

/* Buttons */
.btn {
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Forms */
.form-control, .form-select {
    border-radius: var(--border-radius);
    transition: var(--transition);
    min-width: 300px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
    padding: 0.75rem 1rem;
}

/* Login form specific styling */
.card .form-control,
.card .form-select {
    min-width: 350px;
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Ensure login forms have consistent input sizing */
.col-md-6 .form-control,
.col-lg-4 .form-control {
    width: 100%;
    min-width: 320px;
}

/* Alerts */
.alert {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--box-shadow);
}

.alert-dismissible .btn-close {
    padding: 0.75rem 1rem;
}

/* Badges */
.badge {
    border-radius: var(--border-radius);
    font-size: 0.75em;
}

/* Tables */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.table th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Progress Bars */
.progress {
    height: 8px;
    border-radius: var(--border-radius);
    background-color: #e9ecef;
}

.progress-bar {
    border-radius: var(--border-radius);
}

/* Pagination */
.pagination .page-link {
    border-radius: var(--border-radius);
    margin: 0 2px;
    border: 1px solid #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Modal */
.modal-content {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Dropdown */
.dropdown-menu {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

/* Custom Components */
.avatar-sm {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 2px solid #fff;
    z-index: 1;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item.completed::before {
    background-color: var(--success-color);
}

.timeline-item.pending::before {
    background-color: var(--warning-color);
}

.timeline-item.cancelled::before {
    background-color: var(--danger-color);
}

/* Status Badges */
.badge.bg-submitted {
    background-color: #6c757d !important;
}

.badge.bg-assigned {
    background-color: #17a2b8 !important;
}

.badge.bg-in_progress {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.badge.bg-resolved {
    background-color: #28a745 !important;
}

.badge.bg-closed {
    background-color: #343a40 !important;
}

.badge.bg-rejected {
    background-color: #dc3545 !important;
}

/* Priority Indicators */
.priority-high {
    border-left: 4px solid var(--danger-color);
}

.priority-medium {
    border-left: 4px solid var(--warning-color);
}

.priority-low {
    border-left: 4px solid var(--info-color);
}

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Section backgrounds fix */
.features-section {
    background-color: #f8f9fa !important;
}

.categories-section {
    background-color: #f8f9fa !important;
}

.testimonials-section {
    background-color: #fff !important;
}

.contact-section {
    background-color: #f8f9fa !important;
}

.how-it-works-section {
    background-color: #fff !important;
}

/* Ensure all cards are visible */
.card, .feature-card, .category-card, .testimonial-card, .step-card {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section .display-4 {
        font-size: 2rem;
    }
    
    .hero-section .h3 {
        font-size: 1.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding: 0.5rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .btn-group-vertical .btn {
        margin-bottom: 0.25rem;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .btn,
    .pagination,
    .modal,
    .dropdown-menu {
        display: none !important;
    }
    
    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }
    
    body {
        background-color: #fff !important;
        color: #000 !important;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn:focus,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Enhanced Hero Section */
.hero-section {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.text-gradient {
    background: linear-gradient(45deg, #ffd700, #ffed4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Floating Background Shapes */
.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 20s infinite linear;
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    top: 60%;
    left: 80%;
    animation-delay: -5s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    top: 80%;
    left: 20%;
    animation-delay: -10s;
}

.shape-4 {
    width: 40px;
    height: 40px;
    top: 30%;
    left: 70%;
    animation-delay: -15s;
}

.shape-5 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 50%;
    animation-delay: -20s;
}

/* Hero Content Styles */
.hero-logo {
    height: 120px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-logo-section {
    margin-bottom: 2rem;
}

.hero-content .badge {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 25px;
}

.hero-stats .stat-item {
    padding: 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    margin-bottom: 1rem;
}

.hero-buttons .btn {
    font-weight: 600;
    transition: all 0.3s ease;
    border-width: 2px;
}

.hero-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.hero-features .feature-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

/* Feature Cards */
.feature-card {
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff !important;
    border: 1px solid #e9ecef !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 200px;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.feature-card .card-body {
    padding: 2rem !important;
}

.feature-icon .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    position: relative;
    overflow: hidden;
}

.feature-icon .icon-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover .icon-circle::before {
    opacity: 1;
}

/* Step Cards */
.step-card {
    position: relative;
    padding: 2rem;
    border-radius: 20px;
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s ease;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 250px;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.step-card h5 {
    color: #212529 !important;
}

.step-card p {
    color: #6c757d !important;
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.step-illustration svg {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* Category Cards */
.category-card {
    transition: all 0.3s ease;
    border-radius: 15px;
    cursor: pointer;
    border: 2px solid #e9ecef !important;
    background-color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 120px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: #667eea !important;
}

.category-card .category-icon {
    margin-bottom: 0.75rem;
}

.category-card h6 {
    color: #212529 !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.category-card p {
    color: #6c757d !important;
    font-size: 0.875rem;
    text-align: center;
}

.category-icon {
    transition: transform 0.3s ease;
}

.category-card:hover .category-icon {
    transform: scale(1.2);
}

/* Testimonial Cards */
.testimonial-card {
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #fff !important;
    border: 1px solid #e9ecef !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    z-index: 1;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.testimonial-card .card-body {
    position: relative;
    z-index: 2;
    background-color: #fff !important;
    color: #212529 !important;
}

.author-avatar .avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stars i {
    font-size: 1.1rem;
    margin-right: 2px;
}

/* Contact Section */
.contact-item {
    padding: 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateX(5px);
}

.contact-icon .icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid2" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="white" stroke-width="1" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid2)"/></svg>');
    pointer-events: none;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(5deg); }
    66% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation Classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll[data-animation="fadeInUp"] {
    animation: fadeInUp 0.8s ease forwards;
}

.animate-on-scroll[data-animation="fadeInRight"] {
    animation: fadeInRight 0.8s ease forwards;
}

.floating-icon {
    animation: float 3s ease-in-out infinite;
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

.pulse {
    animation: pulse 2s infinite;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .hero-section {
        min-height: 80vh;
    }
    
    .hero-content .display-3 {
        font-size: 2.5rem;
    }
    
    .hero-stats .row {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .feature-card {
        margin-bottom: 2rem;
    }
    
    .step-card {
        margin-bottom: 3rem;
    }
    
    .category-card {
        margin-bottom: 1rem;
    }
    
    .contact-item {
        margin-bottom: 1rem;
    }
    
    .floating-shapes {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-content .display-3 {
        font-size: 2rem;
    }
    
    .hero-stats .stat-item {
        padding: 0.5rem;
    }
    
    .feature-icon .icon-circle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .category-card {
        padding: 1rem;
    }
    
    .testimonial-card {
        padding: 1.5rem;
    }
}

/* Print Styles */
@media print {
    .hero-section,
    .floating-shapes,
    .cta-section,
    .testimonials-section {
        background: white !important;
        color: black !important;
    }
    
    .btn,
    .floating-icon,
    .shape {
        display: none !important;
    }
    
    .feature-card,
    .testimonial-card,
    .category-card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}

/* Accessibility Improvements */
.btn:focus,
.card:focus,
.category-card:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating-shapes,
    .floating-icon {
        animation: none !important;
    }
}

/* Utility Classes */
.text-primary-dark {
    color: #0056b3 !important;
}

.bg-primary-light {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

.border-primary-light {
    border-color: rgba(0, 123, 255, 0.3) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-md {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

/* Dashboard Specific */
.dashboard-card {
    transition: var(--transition);
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
}

.stat-card {
    text-align: center;
    padding: 1.5rem;
}

.stat-card h3 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-card p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Charts */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    margin: 0.25rem 0.5rem;
}

.chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 0.5rem;
}

/* File Upload */
.file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background-color: rgba(0, 123, 255, 0.05);
}

.file-upload-area.dragover {
    border-color: var(--primary-color);
    background-color: rgba(0, 123, 255, 0.1);
}

.file-list {
    max-height: 200px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.file-item-icon {
    width: 32px;
    height: 32px;
    margin-right: 0.5rem;
}

.file-item-info {
    flex: 1;
}

.file-item-name {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.file-item-size {
    font-size: 0.875rem;
    color: #6c757d;
}

.file-item-remove {
    color: var(--danger-color);
    cursor: pointer;
    transition: var(--transition);
}

.file-item-remove:hover {
    color: #c82333;
}

/* Search and Filter */
.search-filter-section {
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.filter-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-group .form-group {
    flex: 1;
    min-width: 200px;
}

/* Mobile Responsive Fixes */
@media (max-width: 768px) {
    .filter-group {
        flex-direction: column;
    }
    
    .filter-group .form-group {
        min-width: 100%;
    }
    
    .table-responsive {
        border-radius: var(--border-radius);
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        border-radius: var(--border-radius);
        margin-bottom: 0.25rem;
    }
}

/* Text color inheritance for all elements */
.text-white {
    color: #fff !important;
}

.text-black {
    color: #212529 !important;
}

/* Ensure proper text color inheritance */
* {
    color: inherit;
}

/* Override for specific elements that need different colors */
.card .text-light {
    color: #f8f9fa !important;
}

.card .text-white {
    color: #fff !important;
}

.card .text-muted {
    color: #6c757d !important;
}

.card.bg-primary .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.card.bg-success .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.card.bg-info .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.card.bg-danger .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.card.bg-secondary .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.card.bg-dark .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #4dabf7;
        --secondary-color: #868e96;
        --success-color: #51cf66;
        --warning-color: #ffd43b;
        --danger-color: #ff6b6b;
        --info-color: #22b8cf;
        --light-color: #343a40;
        --dark-color: #f8f9fa;
    }
    
    body {
        background-color: #1a1a1a;
        color: #f8f9fa;
    }
    
    .card {
        background-color: #2d3436;
        border-color: #636e72;
        color: #f8f9fa;
    }
    
    .card-header {
        background-color: #636e72;
        color: #f8f9fa;
    }
    
    .card-body {
        background-color: #2d3436;
        color: #f8f9fa;
    }
    
    .table {
        background-color: #2d3436;
        color: #f8f9fa;
    }
    
    .table th {
        background-color: #636e72;
        color: #f8f9fa;
    }
    
    .table td {
        color: #f8f9fa;
    }
    
    .form-control,
    .form-select {
        background-color: #2d3436;
        border-color: #636e72;
        color: #f8f9fa;
    }
    
    .form-control:focus,
    .form-select:focus {
        background-color: #2d3436;
        border-color: var(--primary-color);
        color: #f8f9fa;
    }
    
    .modal-content {
        background-color: #2d3436;
        color: #f8f9fa;
    }
    
    .modal-header {
        background-color: #636e72;
        color: #f8f9fa;
    }
    
    .modal-body {
        background-color: #2d3436;
        color: #f8f9fa;
    }
    
    .modal-footer {
        background-color: #636e72;
        color: #f8f9fa;
    }
    
    .dropdown-menu {
        background-color: #2d3436;
        border-color: #636e72;
        color: #f8f9fa;
    }
    
    .dropdown-item {
        color: #f8f9fa;
    }
    
    .dropdown-item:hover {
        background-color: #636e72;
        color: #f8f9fa;
    }
}