/* --- UNIVERSAL STYLES --- */
/* These apply to everything, like the font and removing default margins */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5; /* Light grey background for the whole app */
    margin: 0;
}

/* Common style for form inputs */
input {
    padding: 12px;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Common style for buttons */
button {
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

button:hover {
    background-color: #0056b3;
}


/* --- STYLES *ONLY* FOR THE LOGIN/SIGNUP PAGE --- */

/* A new parent container for login.html to center everything vertically and horizontally */
.auth-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 100vh;
}

.form {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding: 2rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form h2 {
    margin-top: 0;
    text-align: center;
    color: #333;
}

.error-message {
    color: red;
    font-size: 12px;
    height: 15px;
    text-align: center;
}


/* --- STYLES *ONLY* FOR THE DASHBOARD PAGE --- */

.dashboard-container {
    /* Make the dashboard container itself take up the whole screen */
    width: 100vw;
    height: 100vh;
    display: flex; 
    flex-direction: column;
    box-sizing: border-box; /* Ensures padding and borders are included in the width/height */
}

.dashboard-header {
    background-color: white;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0; /* Prevents header from shrinking */
    height: 60px; /* Give it a fixed height */
}

#farm-name-header {
    font-size: 1.5rem;
    color: #333;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.dashboard-grid {
    flex-grow: 1; /* This is the key that makes the grid fill the remaining space */
    display: grid;
    grid-template-columns: 2fr 1fr; /* The two-column layout */
    gap: 1.5rem;
    padding: 1.5rem;
    overflow: hidden; /* Important to prevent double scrollbars */
}

.widget {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.widget h2 {
    text-align: left;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
}

.sidebar-widgets {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto; /* Allow this sidebar to scroll if its content gets too long */
}

.placeholder-map {
    width: 100%;
    height: 100%;
    background-color: #e9e9e9;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 1.5rem;
    flex-grow: 1;
}

.glance-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    text-align: center;
}

.stat .value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #3880ff; /* A blue that matches Ionic's default */
}

.stat .label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
}

.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- WEATHER WIDGET STYLES --- */
.weather-display {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.weather-display img {
    width: 80px;
    height: 80px;
}

.weather-display .temp {
    font-size: 2.5rem;
    font-weight: bold;
}

.weather-display .desc {
    text-transform: capitalize;
    color: #666;
}

/* --- NEW APP CONTAINER & SIDEBAR STYLES --- */

/* This new container will hold the sidebar and content side-by-side */
.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.sidebar {
    width: 240px; /* Fixed width for the sidebar */
    background-color: #2c3e50; /* A dark, professional color */
    color: white;
    display: flex;
    flex-direction: column; /* Stack the header and nav list vertically */
    flex-shrink: 0; /* Prevent the sidebar from shrinking */
}

/*
========================================
  SIDEBAR HEADER STYLES (Definitive Fix)
========================================
*/

/* Main container for the logo and app name */
.nav-header {
    display: flex;
    align-items: center;       /* Vertically align icon and text */
    height: 60px;              /* Fixed height for alignment with the main app header */
    padding: 0 1.5rem;         /* Horizontal spacing */
    border-bottom: 1px solid #34495e;
    flex-shrink: 0;
    /* REMOVED overflow: hidden; -- this was the primary cause of the bug */
}

/* The leaf icon */
.nav-header .fa-leaf {
    font-size: 1.6rem;
    color: #1abc9c;
    margin-right: 12px;
    /* Add a transition to make its movement smooth */
    transition: margin 0.3s ease;
}

/* The "FarmOptix" h2 text */
.nav-header h2 {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
    margin: 0;
    white-space: nowrap; /* Prevent text from wrapping */
    /* Add a fade-out transition */
    opacity: 1;
    transition: opacity 0.2s ease;
}


/*
========================================
  COLLAPSED STATE for Sidebar Header
========================================
*/

/* When the sidebar is collapsed... */
.sidebar.collapsed .nav-header {
    justify-content: center; /* ...center its contents horizontally. */
    padding: 0; /* ...remove the side padding so centering is perfect. */
}

/* ...fade out and hide ONLY the h2 text. */
.sidebar.collapsed .nav-header h2 {
    opacity: 0;
    display: none;
}

/* ...remove the right margin from the icon so it can be truly centered. */
.sidebar.collapsed .nav-header .fa-leaf {
    margin-right: 0;
}

/*
========================================
  DEFINITIVE OVERRIDE FOR COLLAPSED LOGO
========================================
*/

/* This rule forcefully makes the leaf icon visible when the sidebar is collapsed */
.sidebar.collapsed .nav-header .fa-leaf {
    display: inline-block !important; /* Force it to be visible */
    visibility: visible !important; /* Force it to be visible */
    opacity: 1 !important; /* Force it to be visible */
}

/* This rule forcefully hides only the text */
.sidebar.collapsed .nav-header h2 {
    display: none !important;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.nav-list a {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: #bdc3c7; /* A lighter grey for the text */
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.nav-list a:hover {
    background-color: #34495e; /* A slightly lighter background on hover */
    color: white;
}

/* Style for the currently active page link */
.nav-list a.active {
    background-color: #007bff; /* Blue to match our buttons */
    color: white;
    font-weight: bold;
}

.nav-list a i {
    width: 30px; /* Give icons a fixed width to align text perfectly */
    font-size: 1.1rem;
    margin-right: 10px;
}

/* This is the new container for our dashboard, map, and widgets */
.main-content-area {
    flex-grow: 1; /* This is the key: it tells this div to fill all remaining space */
    display: flex; /* So that its child (dashboard-container) can be full height */
    overflow-y: auto; /* Allow the main content area to scroll if it gets too long */
}

/* --- ADJUSTED DASHBOARD STYLES --- */

/* We remove the fixed 100vw/100vh from the dashboard itself, as its parent now controls the size */
.dashboard-container {
    width: 100%; /* Fill its parent, the main-content-area */
    /* Remove height: 100vh */
}

/* --- NEW COLLAPSIBLE SIDEBAR STYLES --- */

/* Style for the toggle button and its wrapper */
.sidebar-toggle-wrapper {
    margin-top: auto; /* This is a magic trick that pushes the button to the bottom */
    padding: 1rem;
    border-top: 1px solid #34495e; /* Separator line */
    text-align: right;
}

.sidebar-toggle {
    background-color: transparent;
    border: 1px solid #566573;
    color: #bdc3c7;
    border-radius: 50%; /* Makes it a perfect circle */
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    line-height: 32px; /* Vertically centers the icon */
    text-align: center;
}

.sidebar-toggle:hover {
    background-color: #34495e;
    color: white;
}

/* We will control everything by adding a ".collapsed" class to the sidebar */

/* Animate the width change for a smooth transition */
.sidebar {
    transition: width 0.3s ease;
}

/* --- STYLES FOR WHEN THE SIDEBAR IS COLLAPSED --- */

/* When sidebar has the .collapsed class... */
.sidebar.collapsed {
    width: 80px; /* Shrink the sidebar width */
}

/* ...hide the nav header text and logo icon */
.sidebar.collapsed .nav-header h2,
.sidebar.collapsed .nav-header .fa-leaf {
    display: none;
}

/* ...hide the text spans in the nav list */
.sidebar.collapsed .nav-list span {
    display: none;
}

/* ...center the nav list items */
.sidebar.collapsed .nav-list a {
    justify-content: center;
}

/* ...remove the extra margin from the icons when the text is gone */
.sidebar.collapsed .nav-list a i {
    margin-right: 0;
}

/* ...hide the toggle wrapper text and align the button differently if we had text */
.sidebar.collapsed .sidebar-toggle-wrapper {
    text-align: center;
}

/* ...flip the toggle button's arrow icon */
.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}