000

/* Global reset and base styles */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: #f8f9fa; color: #343a40; }

.dashboard-container { max-width: 1400px; margin: 20px auto; padding: 20px; }

/* Chart Card Styling */
.chart-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 24px;
    transition: all 0.3s ease;
}
.chart-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.chart-card h3 {
    color: #334155;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
}
.chart-card h3 i {
    margin-right: 10px;
    color: #667E06;
    font-size: 20px;
}

/* Banner Styling */
.banner {
    display: flex;
    background: linear-gradient(135deg, #667E06 0%, #94B116 100%);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 41px;
    color: white;
    box-shadow: 0 6px 18px rgba(102, 126, 6, 0.2);
    padding: 6px;
}
.banner-content { flex: 1; padding: 20px; }
.banner-content h2 { font-size: 26px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.banner-content p { font-size: 15px; opacity: 0.95; line-height: 1.6; max-width: 550px; }
.banner-image { width: 220px; display: flex; align-items: center; justify-content: center; padding-right: 10px; }
.banner-image img { max-height: 150px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }

/* ===== Stats Grid & Cards - UI Update to match image_7ee5f6.png - START ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Responsive columns */
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: #ffffff;
    border-radius: 8px; /* Standard rounded corners */
    padding: 20px;
    display: flex; /* Key for icon and text alignment */
    align-items: center; /* Vertically center icon and text block */
    box-shadow: 0 4px 8px rgba(0,0,0,0.06); /* Subtle shadow like image */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border: 1px solid #f0f0f0; /* Light border */
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 52px; /* Adjust size to match image */
    height: 52px;
    border-radius: 50%; /* Circular background for icon */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px; /* Space between icon and text */
    font-size: 22px; /* Icon size */
    color: #ffffff; /* White icon color */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Specific Icon Background Colors from image_7ee5f6.png */
.stat-icon.user-icon {
    background-color: #5D9CEC; /* Blueish */
}
.stat-icon.fertilizer-icon {
    background-color: #FFCE56; /* Yellowish */
}
.stat-icon.crops-icon {
    background-color: #4FC1E9; /* Light blue/cyan */
}
.stat-icon.machines-icon {
    background-color: #A0D468; /* Greenish */
}

.stat-info {
    display: flex;
    flex-direction: column; /* Stack title and value vertically */
    justify-content: center; /* Center text block vertically if needed, but align-items:center on .stat-card handles overall */
    flex-grow: 1; /* Allow text info to take remaining space */
}

.stat-title {
    font-size: 0.85rem; /* Smaller title text (approx 13-14px) */
    color: #777777; /* Muted gray for title */
    margin-bottom: 2px; /* Small space between title and value */
    font-weight: 500;
    line-height: 1.4;
}

.stat-value {
    font-size: 1.75rem; /* Larger value text (approx 28px) */
    font-weight: 600; /* Semibold */
    color: #333333; /* Dark gray for value */
    line-height: 1.2;
}
/* ===== Stats Grid & Cards - UI Update - END ===== */

/* Main Content Grid */
.main-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 992px) { .main-content-grid { grid-template-columns: 1fr; } }

/* Weather Widget Styling */
.weather-widget {
    background: linear-gradient(to bottom, #fdfbfb, #f6f7fb);
    border-radius: 16px; padding: 24px; margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.weather-header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
.location-name { font-weight: 600; font-size: 20px; color: #334155; }
.location-day { color: #64748b; font-size: 15px; }
.current-temp { font-size: 32px; font-weight: 700; color: #334155; }
.weather-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; margin-bottom: 20px; text-align: center; }
.metric-item { background-color: white; border-radius: 10px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.metric-icon { font-size: 18px; color: #667E06; margin-bottom: 6px; }
.metric-value { font-weight: 600; font-size: 16px; color: #334155; margin-bottom: 4px; }
.metric-label { font-size: 13px; color: #64748b; }
.sun-timeline { background-color: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sun-time { display: flex; justify-content: space-between; align-items: center; }
.sunrise, .sunset { text-align: center; flex-basis: 30%; }
.time { font-weight: 600; font-size: 15px; color: #334155; }
.label { font-size: 13px; color: #64748b; }
.sun-progress { flex: 1; margin: 0 12px; }
.progress-bar { height: 6px; background-color: #e5e7eb; border-radius: 3px; position: relative; }
.sun-position {
    position: absolute; width: 14px; height: 14px;
    background-color: #F5D020;
    border-radius: 50%; top: -4px;
    left: 0%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(245, 208, 32, 0.6);
    transition: left 1s ease-in-out;
}

/* Chart Containers and Legends */
.chart-container { height: 280px; position: relative; margin-bottom: 16px; }
.report-content { display: flex; flex-direction: column; }
.legend, .chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; margin-bottom: 6px; }
.color-indicator { width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; }
.legend-label { font-size: 13px; color: #64748b; }
.standing-crop { background-color: #4C701D; } .crop-sowing { background-color: #F5D020; } .empty-plot { background-color: #909B37; } .total { background-color: #667E06; } .consumed { background-color: #F2C401; }

/* User Details Section */
.user-details-section { padding: 20px; }
.user-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.detail-box { padding: 16px; border-radius: 10px; }
.user-status { background-color: #f3e8ff; }
.moving-status { background-color: #e0f2fe; }
.gps-status { background-color: #fef9c3; }
.detail-header { font-weight: 600; color: #334155; margin-bottom: 10px; font-size: 15px; }
.detail-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.value { font-weight: 700; }
.online, .moving, .gps-on { color: #581c87; }
.offline, .not-moving, .gps-off { color: #334155; }

/* Upcoming Week Notification */
.upcoming-week h3 i { color: #F59E0B; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; }
.day-name { font-weight: 600; margin-bottom: 10px; color: #334155; font-size: 13px; }
.day-status {
    width: 32px; height: 32px;
    border-radius: 50%; margin: 0 auto 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.day-status:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.pending { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.completed { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.on-it { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.assigned { background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); }
.status-label { font-size: 12px; color: #64748b; }

/* Current Tasks */
.current-tasks h3 i { color: #3B82F6; }
.tasks-list { display: flex; flex-direction: column; gap: 12px; }
.task-item {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    background-color: white;
}
.task-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.task-header { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.supervisor { display: inline-block; padding: 5px 10px; border-radius: 6px; color: white; font-size: 13px; font-weight: 500; }
.purple { background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); }
.green { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.orange { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.task-content { padding: 14px; font-size: 14px; color: #475569; line-height: 1.5; }

/* Report Grid (Fertilizer, Hay) */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .main-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 992px) { /* Adjusted breakpoint for stats grid to wrap sooner */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Allow more cards per row on medium screens */
    }
}
@media (max-width: 768px) {
    .report-grid { grid-template-columns: 1fr; }
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Further adjust for smaller tablets */
    }
    .stat-card { padding: 15px; } /* Adjust padding for smaller cards */
    .stat-icon { width: 44px; height: 44px; font-size: 20px; margin-right: 12px;}
    .stat-title { font-size: 0.8rem; }
    .stat-value { font-size: 1.5rem; }

.user-details-grid { grid-template-columns: 1fr; }
    .weather-metrics { grid-template-columns: repeat(2, 1fr); }
    .week-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); row-gap: 16px; }
    .banner { flex-direction: column; text-align: center; }
    .banner-image { width: 180px; margin: 16px auto 0; padding-right: 0; }
    .banner-content h2 { font-size: 22px; }
    .banner-content p { font-size: 14px; }
}
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
    .stat-card { padding: 12px 15px; }
    .stat-icon { width: 40px; height: 40px; font-size: 18px; margin-right: 10px;}
    .stat-title { font-size: 0.75rem; }
    .stat-value { font-size: 1.4rem; }

.dashboard-container { padding: 15px; }
    .chart-card { padding: 15px; }
    .chart-card h3 { font-size: 16px; }
    .current-temp { font-size: 28px; }
    .location-name { font-size: 18px; }
    .banner-content h2 { font-size: 20px; }
    .banner-image { width: 150px; }
}

/* Site Selector Specific */
.site-selector-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-selector-container > div { margin-bottom: 10px; }
#site_selector_dropdown {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    min-width: 200px;
    background-color: white;
    color: #334155;
    font-size: 14px;
}
.current-site-display span, .site-selector-container span {
    font-weight: 500;
    color: #475569;
    font-size: 14px;
}
.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.stats-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

.stat-card-summary {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .stat-card-summary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

.stat-card-summary .icon-area {
            font-size: 1.8rem; /* Larger icon */
            padding: 15px;
            border-radius: 10px;
            margin-right: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .stat-card-summary.sites .icon-area { background-color: #5E8C6A; } /* Medium Green */
        .stat-card-summary.area .icon-area { background-color: #8AB895; } /* Lighter Green */
        .stat-card-summary.production .icon-area { background-color: #A8D5BA; } /* Even Lighter Green */
        .stat-card-summary.machines .icon-area { background-color: #C9E8D4; color: #3A4D39} /* Palest Green, dark icon */

.stat-card-summary .info-area .title {
            font-size: 0.95rem;
            color: #6c757d; /* Muted text color */
            margin-bottom: 4px;
            font-weight: 500;
        }
        .stat-card-summary .info-area .value {
            font-size: 1.7rem;
            font-weight: 700;
            color: #3A4D39; /* Dark Green */
        }