/* Custom styles for Forest Fire Detection System */

/* Define CSS Variables for Theme Colors */
:root {
    --color-primary: #385738;
    /* Deep Forest Green */
    --color-secondary: #4a6f4a;
    /* Muted Forest Green */
    --color-accent: #e57373;
    /* Muted Red/Orange for Alerts */
    --color-background-light: #f0f4f8;
    /* Light Blue-Gray */
    --color-background-dark: #1f2937;
    /* Dark Gray (for footer/nav elements) */
    --color-text-dark: #1f2937;
    /* Dark text for readability */
    --color-text-light: #f9fafb;
    /* Light text for dark backgrounds */
    --color-card-background: #ffffff;
    /* White */
    --color-border: #d1d5db;
    /* Light Gray Border */
}

/* Apply base styles using variables */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    /* Default background */
}

/* Forest-themed background for login page */
.bg-forest {
    background-image: url('../images/forest-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay for better text readability on background image */
.bg-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    /* Slightly darker overlay */
    position: relative;
}

.bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    /* Match overlay color */
    z-index: -1;
    /* Place behind content */
}


/* Node Card Styling */
.node-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 0.75rem;
    /* rounded-lg */
    overflow: hidden;
    background-color: var(--color-card-background);
    border: 1px solid var(--color-border);
    display: flex;
    /* Use flexbox for internal layout */
    flex-direction: column;
    /* Stack content vertically */
}

.node-card:hover {
    transform: translateY(-5px);
    /* Slightly lift the card on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Add a shadow */
}

.node-card-header {
    padding: 1.5rem;
    /* p-6 */
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.node-card-body {
    padding: 1.5rem;
    /* p-6 */
    flex-grow: 1;
    /* Allow body to take up available space */
}

.node-card-footer {
    padding: 1rem 1.5rem;
    /* px-6 py-4 */
    background-color: #f9fafb;
    /* gray-50 */
    border-top: 1px solid var(--color-border);
}


/* Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    /* Adjust as needed */
    width: 100%;
    margin-top: 1.5rem;
    /* mt-6 */
    padding: 1.5rem;
    /* p-6 */
    background-color: var(--color-card-background);
    border-radius: 0.75rem;
    /* rounded-lg */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    /* shadow-md */
}

/* Alert Status Colors (adjusted to theme) */
.alert-normal {
    background-color: rgba(34, 197, 94, 0.15);
    /* Green with more opacity */
    color: rgb(21, 128, 61);
    /* Darker Green */
    font-weight: 600;
    /* font-semibold */
}

.alert-warning {
    background-color: rgba(234, 179, 8, 0.2);
    /* Yellow/Orange with more opacity */
    color: rgb(161, 98, 7);
    /* Darker Yellow/Orange */
    font-weight: 600;
    /* font-semibold */
}

.alert-emergency {
    background-color: rgba(239, 68, 68, 0.2);
    /* Red with more opacity */
    color: rgb(185, 28, 28);
    /* Darker Red */
    font-weight: 600;
    /* font-semibold */
}

/* Table Styling (Applying theme to existing Tailwind classes) */
/* This section adds some custom touches to the default Tailwind table styles */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background-color: var(--color-background-light);
    /* Light background for headers */
    color: var(--color-text-dark);
    font-weight: 600;
    /* font-semibold */
    text-align: left;
    padding: 0.75rem 1.5rem;
    /* px-6 py-3 */
    border-bottom: 1px solid var(--color-border);
}

td {
    padding: 1rem 1.5rem;
    /* px-6 py-4 */
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-dark);
}

tr:last-child td {
    border-bottom: none;
}

/* Striped rows for readability */
tbody tr:nth-child(odd) {
    background-color: #f9fafb;
    /* gray-50 */
}

/* Pagination Styling (Refining existing Tailwind classes) */
.pagination-container {
    @apply bg-white/90 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-lg shadow-lg;
}

.pagination-info {
    @apply flex-1 flex justify-between sm:hidden;
}

.pagination-info a {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50;
}

.pagination-desktop {
    @apply hidden sm:flex-1 sm:flex sm:items-center sm:justify-between;
}

.pagination-desktop>div:first-child {
    @apply flex items-center;
}

.pagination-desktop>div:last-child {
    @apply relative z-0 inline-flex rounded-md shadow-sm -space-x-px;
}

.pagination-desktop a,
.pagination-desktop span {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700;
}

.pagination-desktop a:hover {
    @apply bg-gray-50;
}

.pagination-desktop span {
    @apply text-gray-500;
    /* Disabled/current page text */
}

.pagination-desktop a.active {
    @apply z-10 bg-green-100 border-green-500 text-green-600;
    /* Active page style */
}

.pagination-desktop a:first-child {
    @apply rounded-l-md;
}

.pagination-desktop a:last-child {
    @apply rounded-r-md;
}

/* Forest-themed background pattern (Optional subtle pattern) */
/* .bg-pattern {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url('../images/forest-pattern.png'); /* Assume you have a subtle forest pattern image */
/* background-size: cover; */
/* background-repeat: repeat; */
/*} */

/* Additional styles for specific components can be added here */