/* pwa-app/css/style.css */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
}

header {
    background-color: #3498db;
    color: white;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.5em;
}

#auth-status {
    font-size: 0.9em;
}
#auth-status button {
    margin-left: 10px;
    padding: 5px 8px;
    cursor: pointer;
    /* Use specific styles if needed */
}

/* --- NEW NAVIGATION STYLES --- */
#main-nav {
    background-color: #ecf0f1;
    padding: 0.5em 1em;
    border-bottom: 2px solid #bdc3c7;
    display: flex; /* Arrange buttons horizontally */
    gap: 10px; /* Add space between buttons */
}

.nav-button {
    padding: 0.6em 1.2em;
    border: none;
    background-color: #bdc3c7; /* Default background */
    color: #2c3e50;
    cursor: pointer;
    border-radius: 5px 5px 0 0; /* Rounded top corners */
    font-size: 0.95em;
    transition: background-color 0.2s ease;
}

.nav-button:hover {
    background-color: #cacfd2;
}

.nav-button.active-tab {
    background-color: #fff; /* Active tab matches section background */
    color: #3498db;
    font-weight: bold;
    border-bottom: 2px solid #fff; /* Overlap section border */
    margin-bottom: -2px; /* Pull up slightly */
}
/* --- END NAVIGATION STYLES --- */


main {
    padding: 1em;
}



/* --- CONTEXT DISPLAY STYLES --- */
#context-display-area {
    padding: 0.75em 1.2em;
    background-color: #eaf2f8; /* Light blue background */
    border-bottom: 1px solid #d4e6f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95em;
    color: #154360;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 10px;
}

#context-display-area #context-text {
    font-weight: bold;
}

#context-display-area #clear-focus-btn {
    padding: 0.3em 0.8em;
    font-size: 0.85em;
    background-color: #aed6f1;
    color: #154360;
    border: 1px solid #85c1e9;
    cursor: pointer; /* Ensure cursor changes */
}
#context-display-area #clear-focus-btn:hover {
    background-color: #85c1e9;
}

/* --- Button Styles --- */
.set-focus-btn {
    background-color: #76d7c4;
    border: 1px solid #48c9b0;
    color: #145a32;
    margin-left: 5px; /* Add some space */
}
.set-focus-btn:hover {
    background-color: #48c9b0;
}

/* Style for payment actions wrapper */
.payment-actions {
    margin-top: 5px;
}
.payment-actions button {
    margin-right: 5px; /* Space between action buttons */
}



/* --- NEW SECTION DISPLAY LOGIC --- */
.content-section {
    background-color: #fff;
    padding: 1.5em;
    margin-bottom: 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: none; /* Hide sections by default */
}

.content-section.active-section {
    display: block; /* Show only the active section */
}
/* --- END SECTION DISPLAY LOGIC --- */


/* Existing section styles adjusted slightly */
section h2 { /* Use the section wrapper class now */
    color: #2c3e50;
    margin-top: 0;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

h3 {
    color: #34495e;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background-color: #ecf0f1;
    padding: 0.8em 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    font-size: 0.95em;
}

li button {
    margin-left: 10px;
    padding: 3px 6px;
    font-size: 0.8em;
    cursor: pointer;
    background-color: #dfe4ea; /* Slightly different default button */
    border: 1px solid #ccc;
    color: #333;
    border-radius: 3px;
}
li button:hover {
    background-color: #ced6e0;
}

.add-form {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #ecf0f1;
}

.add-form label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
}

.add-form input[type="text"],
.add-form input[type="number"],
.add-form input[type="date"], /* Added date type */
.add-form input[type="email"], /* Added email type */
.add-form input[type="tel"],   /* Added tel type */
.add-form input[type="datetime-local"],
.add-form select,
.add-form textarea {
    width: 95%; /* Adjust as needed */
    max-width: 400px; /* Optional max width */
    padding: 0.7em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}
.add-form textarea {
    min-height: 60px;
}
/* Style checkbox label differently */
.add-form label[for="lease-is-active"] {
    display: inline-block; /* Align checkbox and text */
    margin-bottom: 1em;
    font-weight: normal;
}
.add-form input[type="checkbox"] {
    width: auto; /* Reset width for checkbox */
    margin-right: 5px;
    vertical-align: middle;
}


.add-form button[type="submit"] {
    background-color: #2ecc71;
    color: white;
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
.add-form button[type="submit"]:hover {
    background-color: #27ae60;
}

.feedback {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #27ae60; /* Success color */
}

.error {
    color: #e74c3c; /* Error color */
    font-weight: bold;
}

hr {
    border: none;
    border-top: 1px solid #ecf0f1;
    margin: 2em 0;
}

footer {
    text-align: center;
    margin-top: 2em;
    padding: 1em;
    font-size: 0.8em;
    color: #7f8c8d;
}

/* Payment Notes Reminder */
.reminder {
    color: #e67e22;
    font-size: 0.9em;
    font-style: italic;
    padding: 0.3em 0.6em;
    background-color: #fef9e7;
    border: 1px solid #f8c471;
    border-radius: 4px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* General Buttons */
button {
     background-color: #3498db;
     color: white;
     padding: 0.6em 1em;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 0.9em;
     margin-right: 5px; /* Add some spacing */
     vertical-align: middle; /* Align nicely with text/inputs */
}

/* Refund Button */
.refund-btn {
    background-color: #e74c3c;
    color: white;
    font-weight: bold;
    border: 2px solid #c0392b;
    transition: all 0.2s ease;
}

.refund-btn:hover {
    background-color: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Refund Modal */
.refund-modal {
    font-family: sans-serif;
}

.refund-dialog h3 {
    margin-top: 0;
    color: #e74c3c;
}

.refund-dialog label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.refund-dialog input,
.refund-dialog textarea {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.refund-dialog small {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.refund-dialog button {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.refund-dialog button[type="button"] {
    background-color: #95a5a6;
    color: white;
}

.refund-dialog button[type="button"]:hover {
    background-color: #7f8c8d;
}
button:hover {
     background-color: #2980b9;
}
button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}
/* Override general button style specifically for nav buttons if needed */
#main-nav .nav-button {
     margin-right: 0; /* Reset margin from general button rule */
     border-radius: 5px 5px 0 0;
     background-color: #bdc3c7;
     color: #2c3e50;
     font-weight: normal;
}
#main-nav .nav-button.active-tab {
     background-color: #fff;
     color: #3498db;
     font-weight: bold;
     border-bottom: 2px solid #fff;
     margin-bottom: -2px;
}
#main-nav .nav-button:hover:not(.active-tab) {
    background-color: #cacfd2;
}


#auth-prompt {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#auth-prompt input {
     padding: 10px;
     margin-right: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
}