/* ==================================

  GLOBAL & BASE STYLES (Modern Reset)

==================================

*/

body {

    /* DARK THEME: Dark background */

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #1b1b1b; /* Very dark grey background */

    color: #e2e8f0; /* Light text for readability */

    line-height: 1.6;

}



header {

    /* DARK THEME: Header remains dark/image-focused */

    background-color: #007bff; 

    color: white; 

    padding: 25px 20px;

    text-align: center;

    /* Adjusted shadow for dark mode */

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); 

    

    /* === Background Image and Overlay Settings === */

    background-image: 

        /* Darker Gradient Overlay for better contrast */

        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 

        url('image.jpg'); 

        

    background-size: cover;             

    background-position: center center; 

    background-repeat: no-repeat;       

    min-height: 150px;                 

}



header h1 {

    font-size: 3.2em;

    margin: 0;

    white-space: nowrap; 

    color: white;

}



/* === SRI LANKAN FLAG COLORS (Applied to Text Only) === */



header h1 span {

    display: inline;

    padding: 0;

    margin: 0 2px;

    font-weight: 900;

    

    /* Text Shadow adjusted for dark background */

    text-shadow:

1px 1px 1px #000000,

        -1px -1px 0 #333333; /* Darker secondary shadow for contrast */

    

    background: none;

    border: none;

    box-shadow: none;

}



.flag-lanka {

    color: #ff7f00; /* Saffron/Orange */

}



.flag-relief {

    color: #04e06b; /* Green */

}



.flag-connect {

    color: #d80000; /* Maroon/Red */

}



/* Adjust header P tag color */

header p {

    color: #cccccc; 

    margin-top: 10px;

}



main {

    max-width: 1300px;

    margin: 30px auto;

    padding: 0 20px;

}



/* ==================================

  NEW: LANGUAGE SWITCHER STYLES

==================================

*/

.language-selector {

    display: flex;

    justify-content: center;

    gap: 5px; /* Small gap between buttons */

    padding: 10px 0;

    margin: 10px auto;

    max-width: 200px;

}



.language-selector button {

    /* Override global button margin */

    margin-top: 0;

    padding: 8px 15px;

    

    /* Ensure equal width/height for a uniform look */

    flex-grow: 1; 

    height: 40px; 

    

    /* Default dark mode styling for inactive button */

    background-color: #333333; /* Darker than the body */

    color: #cccccc;

    border: 1px solid #4a4a4a;

    font-weight: 500;

}



.language-selector button.active {

    /* Highlight the selected language */

    background-color: #ff7f00; /* Use your main accent color (Orange) */

    color: white;

    font-weight: 600;

    border-color: #ff7f00;

    box-shadow: 0 0 5px rgba(255, 127, 0, 0.5);

}



.language-selector button:hover:not(.active) {

    background-color: #4a4a4a; /* Subtle hover effect for inactive buttons */

    color: #ffffff;

}



/* ==================================

  MODE SWITCHER STYLES

==================================

*/

.mode-switcher {

    display: flex;

    justify-content: center;

    max-width: 1300px;

    margin: 20px auto 0;

    padding: 0 20px;

    gap: 10px;

}



.mode-switcher button {

    /* DARK THEME: Base nav button style */

    background-color: #333333;

    color: #01d845;

    border: 1px solid #00c25a;

    padding: 10px 20px;

    font-weight: 500;

    flex-grow: 1;

    max-width: 300px;

    margin-top: 0;

}



.mode-switcher button.active {

    /* DARK THEME: Active button remains bright */

    background-color: #00c25a;

    color: white;

    border-color: #00c25a;

    font-weight: 600;

}



.mode-switcher button:hover:not(.active) {

    /* DARK THEME: Hover state - CHANGED to BLACK and made more specific */

    /* Target inactive buttons specifically to avoid global orange conflict */

    background-color: #000000;

    color: #01d845; /* Ensure text color remains the bright green */

    transform: none;

}



.mode-switcher button.active:hover {

    background-color: #008d42;

    border-color: #00c25a;

}



.hidden {

    display: none !important;

}



.content-mode {

    display: grid;

    gap: 30px;

    grid-template-columns: 1fr;

}



/* ==================================

  SECTION HEADINGS

==================================

*/

h2 {

    /* DARK THEME: Headings */

    border-bottom: 2px solid #333333; 

    padding-bottom: 12px;

    margin-top: 25px;

    margin-bottom: 25px;

    color: #e2e8f0; 

    font-weight: 600;

    font-size: 1.8em;

}



/* --- Form/Filter Section Containers --- */

#submission-form-section, #report-form-section, .filter-container {

    /* DARK THEME: Card/Form container background */

    background-color: #2b2b2b;

    color: #e2e8f0;

    padding: 20px;

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Stronger shadow in dark mode */

}



/* Dashboard section wrapper is now only for content */

#dashboard-section {

    background: none;

    padding: 0;

    box-shadow: none;

}



/* --- Filter Container Styling --- */

.filter-container {

    margin-bottom: 0;

}



.filter-container label {

    font-weight: 600; 

    color: #e2e8f0; /* Light text */

}



#district-filter {

    /* DARK THEME: Select input */

    background-color: #3d3d3d;

    color: #e2e8f0;

    border: 1px solid #4a4a4a;

    width: 100%; 

    padding: 10px; 

    border-radius: 6px; 

}





/* ==================================

  CARD & DASHBOARD STYLING

==================================

*/



#requests-dashboard {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 20px;

}



.request-card {

    /* DARK THEME: Request card background */

    padding: 20px;

    border-radius: 12px;

    background-color: #2b2b2b;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); 

    transition: transform 0.2s ease-in-out;

    display: flex;

    flex-direction: column;

    border: 1px solid #3d3d3d; /* Subtle border for separation */

}



.request-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.5);

}



.request-card h3 {

    /* DARK THEME: Card heading */

    color: #ffffff;

    font-size: 1.5em;

    margin-top: 8px;

    margin-bottom: 10px;

}



.request-card p {

    /* DARK THEME: Card text */

    font-size: 0.95em;

    color: #b0b0b0;

    margin: 5px 0;

}



.request-card p strong {

    color: #ffffff;

}



/* Ensure the main action button takes the full width at the bottom */

.request-card > button:not(.copy-button) {

    margin-top: auto; 

    width: 100%;

}





/* ==================================

  STATUS TAGS & BUTTONS

==================================

*/

.status-tag {

    display: inline-block;

    padding: 5px 12px;

    border-radius: 9999px;

    font-weight: 700;

    font-size: 0.75em;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.status-unverified { 

    /* Remains red/light on dark background */

    background-color: #3d1c1c; /* Darker red background */

    color: #ff8f8f; /* Lighter red text */

    border: 1px solid #4a2828;

}



.status-in-contact { 

    /* Remains yellow/orange on dark background */

    background-color: #3d341c; /* Darker yellow background */

    color: #fff0a8; /* Lighter yellow text */

    border: 1px solid #4a4128;

}



button {

    /* General button base style */

    background-color: #000000; 

    color: white;

    border: none;

    padding: 10px 18px;

    border-radius: 6px;

    cursor: pointer;

    font-weight: 600;

    font-size: 1em;

    margin-top: 15px;

    transition: background-color 0.2s, transform 0.1s;

}



button:hover:not(:disabled) {

    color: #ffffff;

    background-color: #ff7f00; /* Use orange accent on hover */

    transform: translateY(-1px);

}



button:disabled {

    background-color: #4a4a4a;

    color: #999999;

    cursor: not-allowed;

}



/* Form inputs (Dark mode styling) */

input[type="text"], 

input[type="tel"],

input[type="number"], 

textarea,

select {

    /* DARK THEME: Form input background/text */

    background-color: #3d3d3d;

    color: #e2e8f0;

    width: 100%;

    padding: 12px;

    margin-bottom: 15px;

    border: 1px solid #4a4a4a;

    border-radius: 6px;

    box-sizing: border-box;

    font-size: 1em;

    transition: border-color 0.2s, box-shadow 0.2s;

}



input::placeholder, textarea::placeholder {

    color: #888888; /* Light gray placeholder text */

}



input:focus, textarea:focus, select:focus {

    border-color: #4299e1;

    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); 

    outline: none;

}



/* Use primary red for form submission buttons (The submit button color) */

#submission-form button, #report-form button {

    width: 100%; 

    background-color: #dd0000; 

}



#submission-form button:hover, #report-form button button:hover {

    background-color: #9f0000;

}



/* --- COPY BUTTON STYLING (Secondary Action) --- */

.copy-button {

    /* DARK THEME: Secondary copy button */

    background-color: #3d3d3d !important;

    color: #cccccc !important;

    border: 1px solid #4a4a4a !important;

    padding: 6px 10px !important;

    font-size: 0.8em !important;

    font-weight: 500 !important;

    margin-top: 0 !important;

    width: auto !important;

    transition: background-color 0.2s;

}



.copy-button:hover {

    background-color: #4a4a4a !important;

    transform: none !important;

}



.request-card a[href^="tel:"] {

    color: #64b5f6; /* Light blue link color in dark mode */

}





/* ==================================

  NEW: HOW TO USE BUTTON & MODAL

==================================

*/

#how-to-use-btn {

    /* --- LIQUID GLASS EFFECT --- */

    background: rgba(255, 100, 121, 0.15); /* Semi-transparent white background */

    backdrop-filter: blur(5px);           /* The key blur effect */

    -webkit-backdrop-filter: blur(5px);   /* Safari compatibility */

    border: 1px solid rgba(255, 255, 255, 0.3); /* Light, subtle border */

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */

    

    /* --- GENERAL STYLES (Kept from original) --- */

    color: white; /* Text must remain light */

    padding: 8px 15px;

    font-size: 0.9em;

    margin-top: 15px;

    display: inline-block;

    transition: background-color 0.3s, border-color 0.3s, transform 0.1s;

}



#how-to-use-btn:hover {

    /* Makes the glass look "wet" or "activated" */

    background: rgba(255, 255, 255, 0.3); /* Slightly less transparent on hover */

    border: 1px solid rgba(255, 255, 255, 0.5); 

    transform: translateY(-1px); /* Subtle lift */

}



/* Modal Background */

.modal {

    position: fixed; 

    z-index: 10;

    left: 0;

    top: 0;

    width: 100%; 

    height: 100%; 

    overflow: auto; 

    background-color: rgba(0,0,0,0.85); /* Slightly darker overlay for deep contrast */

}



/* Modal Content Box */

.modal-content {

    /* DARK THEME: Modal content card */

    background-color: #252525;

    color: #e2e8f0;

    margin: 5% auto;

    padding: 20px;

    border-radius: 12px;

    width: 90%; 

    max-width: 700px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.6);

    position: relative;

    border: 1px solid #4a4a4a;

}



/* Close Button */

.close-button {

    color: #b0b0b0;

    float: right;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    line-height: 1;

}



.close-button:hover,

.close-button:focus {

    color: #ffffff;

    text-decoration: none;

    cursor: pointer;

}



/* Instruction list styling */

#modal-instructions ol {

    padding-left: 20px;

    line-height: 1.8;

}



#modal-instructions li strong {

    color: #4299e1; /* Light blue accent for highlights */

}



/* ==================================

  RESPONSIVENESS (Media Queries)

==================================

*/



/* 1. Tablet and Desktop Layout (768px and up) */

@media (min-width: 768px) {

    /* ... (Layout remains the same) ... */



    #dashboard-section {

        max-height: 80vh; 

        overflow-y: auto; 

        padding-right: 10px; 

    }



    #filter-controls,

    #report-form-section {

        padding-bottom: 20px; 

    }

}



/* 2. Smaller Mobile Screens (max-width 480px) */

@media (max-width: 480px) {

    header h1 {

        font-size: 1.8em;

    }



    main {

        margin: 15px auto;

        padding: 0 10px;

    }



    h2 {

        font-size: 1.5em;

        margin-top: 30px;

    }

    

    .request-card {

        padding: 15px;

    }

    

    .request-card a[href^="tel:"] {

        font-weight: 600;

        color: #64b5f6; /* Keep light blue */

    }

    

    .mode-switcher {

        flex-direction: column;

        gap: 5px;

    }



    .mode-switcher button {

        max-width: none;

    }
	
	/* ==================================
   FOOTER CONTACT INFO
================================== */