/**
 * Dark Mode Color Configuration
 * Universal color settings for Jiraani app
 */

:root {
    /* Background Colors - Pure Black Theme */
    --bg-primary: #000000;        /* Pure black - Main background */
    --bg-secondary: #0a0a0a;      /* Almost black - Cards, panels */
    --bg-tertiary: #1a1a1a;       /* Dark gray - Hover states */

    /* Text Colors */
    --text-primary: #f5f5f5;      /* Light gray - Main text */
    --text-secondary: #d4d4d4;    /* Medium light gray - Secondary text */
    --text-muted: #a3a3a3;        /* Muted gray - Muted text */

    /* Border Colors */
    --border-primary: #262626;    /* Very dark gray - Main borders */
    --border-secondary: #404040;  /* Dark gray - Lighter borders */

    /* Accent Colors */
    --accent-blue: #3b82f6;       /* Blue 500 - Primary accent */
    --accent-blue-hover: #2563eb; /* Blue 600 - Hover state */
    --accent-green: #10b981;      /* Emerald 500 - Success */
    --accent-red: #ef4444;        /* Red 500 - Danger */
    --accent-yellow: #f59e0b;     /* Amber 500 - Warning */

    /* Component Specific */
    --navbar-bg: #000000;         /* Pure black - same as background */
    --card-bg: #0a0a0a;           /* Almost black */
    --dropdown-bg: #0a0a0a;       /* Almost black */
    --input-bg: #1a1a1a;          /* Dark gray */

    /* Map Container */
    --map-border: #404040;        /* Dark gray - Makes map stand out */
    --map-shadow: rgba(0, 0, 0, 0.8);
}

/* Apply dark mode globally */
body {
    font-family: 'Gabriel Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Background utility class */
.bg-background {
    background-color: var(--bg-secondary) !important; /* Almost black - for panels/cards */
}

/* Responsive padding for mobile */
@media (max-width: 768px) {
    body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Navbar styling */
header {
    background-color: var(--navbar-bg) !important;
    border-bottom-color: var(--border-primary) !important;
}

header a {
    color: var(--text-primary) !important;
}

header a:hover {
    color: var(--accent-blue) !important;
}

/* Card styling */
.bg-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

/* Dropdown styling */
.bg-layer {
    background-color: var(--input-bg) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

.bg-layer:hover {
    background-color: var(--bg-tertiary) !important;
}

.bg-dropdown {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--border-primary) !important;
}

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

.bg-dropdown-item-hover:hover,
.hover\:bg-dropdown-item-hover:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Map container - No border, clean look */
#map {
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    background: var(--bg-secondary);
}

/* Buttons */
button {
    transition: all 0.2s ease;
}

/* Links */
a {
    transition: color 0.2s ease;
}

/* Active navigation */
.text-primary-active {
    color: var(--accent-blue) !important;
}

/* Remove vertical divider border */
.md\:border-r {
    border: none !important;
}

/* Keep navbar bottom border */
header.border-b {
    border-bottom: 1px solid var(--border-primary) !important;
}

/* Borders */
.border-gray-200 {
    border-color: var(--border-primary) !important;
}

/* Text colors */
.text-foreground {
    color: var(--text-primary) !important;
}

.text-muted-foreground-1 {
    color: var(--text-muted) !important;
}

/* SVG icons */
svg {
    color: var(--text-secondary);
}

/* Modal/Overlay styling */
.hs-overlay {
    z-index: 9999 !important;
}

/* Force modal animation target to be visible when overlay is open */
.hs-overlay:not(.hidden) .hs-overlay-animation-target {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Modal dimensions - vertical rectangle */
#hs-report-crime-modal .hs-overlay-animation-target {
    max-width: 420px !important;
    width: 100% !important;
}

.bg-overlay {
    background-color: #1a1a1a !important; /* Dark gray - visible against black */
}

.border-overlay-line {
    border-color: var(--border-primary) !important;
}

.border-overlay-header {
    border-color: var(--border-primary) !important;
}

.border-overlay-footer {
    border-color: var(--border-primary) !important;
}

/* Surface (close button, etc.) */
.bg-surface {
    background-color: #262626 !important; /* Very dark gray */
    border-color: var(--border-primary) !important;
}

.border-surface-line {
    border-color: var(--border-primary) !important;
}

.text-surface-foreground {
    color: var(--text-primary) !important;
}

.bg-surface-hover,
.hover\:bg-surface-hover:hover {
    background-color: #404040 !important;
}

.bg-surface-focus,
.focus\:bg-surface-focus:focus {
    background-color: #404040 !important;
}

/* Layer (Cancel button, etc.) */
.text-layer-foreground {
    color: var(--text-primary) !important;
}

.border-layer-line {
    border-color: var(--border-primary) !important;
}

.hover\:bg-layer-hover:hover {
    background-color: var(--bg-tertiary) !important;
}

.focus\:bg-layer-focus:focus {
    background-color: var(--bg-tertiary) !important;
}

/* Primary (Submit/Next buttons) */
.bg-primary {
    background-color: var(--accent-blue) !important;
}

.border-primary-line {
    border-color: var(--accent-blue-hover) !important;
}

.text-primary-foreground {
    color: #ffffff !important;
}

.hover\:bg-primary-hover:hover {
    background-color: var(--accent-blue-hover) !important;
}

.focus\:bg-primary-focus:focus {
    background-color: var(--accent-blue-hover) !important;
}

.focus\:border-primary-focus:focus {
    border-color: var(--accent-blue) !important;
}

.focus\:ring-primary-focus:focus {
    --tw-ring-color: var(--accent-blue) !important;
}

/* Navbar navigation */
.bg-navbar {
    background-color: var(--navbar-bg) !important;
}

.border-navbar-line {
    border-color: var(--border-primary) !important;
}

.text-navbar-nav-foreground {
    color: var(--text-secondary) !important;
}

.hover\:text-primary-hover:hover {
    color: var(--accent-blue) !important;
}

.focus\:text-primary-focus:focus {
    color: var(--accent-blue) !important;
}

/* Material Design Select Dropdown */
.material-select-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.material-select {
    width: 100%;
    padding: 24px 40px 8px 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--border-secondary);
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s ease;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
}

.material-select:focus {
    border-bottom-color: var(--accent-blue);
}

.material-select:valid {
    border-bottom-color: var(--accent-blue);
}

.material-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px 16px;
}

.material-select-label {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    pointer-events: none;
    transition: all 0.3s ease;
    background-color: transparent;
    font-weight: 500;
}

.material-select:focus + .material-select-label,
.material-select:valid + .material-select-label {
    color: var(--accent-blue);
}

.material-select-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
}

.material-select:focus ~ .material-select-line {
    width: 100%;
}

/* Validation colors */
.border-teal-500 {
    border-color: #14b8a6 !important;
}

.focus\:border-teal-500:focus {
    border-color: #14b8a6 !important;
}

.focus\:ring-teal-500:focus {
    --tw-ring-color: #14b8a6 !important;
}

.text-teal-600 {
    color: #0d9488 !important;
}

.border-red-500 {
    border-color: #ef4444 !important;
}

.focus\:border-red-500:focus {
    border-color: #ef4444 !important;
}

.focus\:ring-red-500:focus {
    --tw-ring-color: #ef4444 !important;
}

.text-red-600 {
    color: #dc2626 !important;
}

/* Textarea scrollbar */
.bg-scrollbar-track {
    background-color: transparent !important;
}

.bg-scrollbar-thumb {
    background-color: var(--border-secondary) !important;
}

/* Scrollbar styling (optional but nice) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-secondary);
}