/* Lawn Care Theme */
:root {
    --lawn-green: #28a745; /* Bootstrap success green */
    --dark-green: #1d7a35;
    --light-gray: #f8f9fa;
    --primary-green: darkslategray;
    --dark-green: #198754;
    --accent-yellow: #ffc107;
    --text-dark: #333;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Body */
body {
    font-family: var(--font-family);
    font-size: 1.1rem; /* 17.6px base for mobile */
    line-height: 1.5;
    color: var(--text-dark);
/*    background-color: var(--light-gray); */
}

#logobox {
    background-color: darkseagreen;
    padding: 10px;
    border-radius: 16px;
}
/* Header */
.navbar {
    background-color: var(--primary-green) !important;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
}
.navbar-toggler {
    background-color: #28a745;
}
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: white !important;
    display: flex;
    align-items: center;
}
.navbar-brand img {
    margin-right: 10px;
}
.navbar .nav-link {
    color: white !important;
    font-weight: 500;
}
.navbar .nav-link:hover {
    color: #e0e0e0 !important;
}
#navbarNav {
    align-self: self-end;
}

.navbar.fixed-bottom {
  padding: 0.5rem 0; /* Reduce vertical padding */
  min-height: 60px; /* Ensure navbar isn’t too tall */
}

.navbar.fixed-bottom .nav-link {
  color: #333;
  padding: 0.25rem 0.5rem; /* Tighten padding */
  flex: 1; /* Equal width for each icon */
  text-align: center;
  line-height: 1.2;
}

.navbar.fixed-bottom .nav-link:hover {
  color: #007bff;
}

.navbar.fixed-bottom i {
  font-size: 1.25rem; /* Smaller than fs-4, equivalent to fs-5 */
}

.navbar.fixed-bottom small {
  font-size: 0.65rem; /* Smaller text */
  max-width: 100%; /* Prevent text overflow */
  overflow: hidden;
  text-overflow: ellipsis; /* Truncate long text */
  white-space: nowrap;
}
/* Tables */
.table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
}
.table thead th {
    background-color: var(--dark-green);
    color: white;
    border: none;
    padding: 1rem;
}
.table tbody td {
    padding: 1rem;
    vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f2f2f2;
}
.table-hover tbody tr:hover {
    background-color: #e9f7e9;
    transition: background-color 0.2s ease;
}
.table th {
    background-color: var(--dark-green);
    color: white;
    border: none;
}
.table td {
    vertical-align: middle;
}

/* Forms */
.form-control {
    border-radius: 8px;
    font-size: 1.1rem;
    padding: 10px;
    border: 1px solid #ced4da;
}
.form-check-input {
    width: 1.5rem;
    height: 1.5rem;
}
.form-label {
    font-weight: bold;
    color: var(--text-dark);
}
.form-control:focus {
    border-color: var(--lawn-green);
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}
.form-group .btn-primary {
    width: 100%; /* Full-width buttons on forms */
    max-width: 200px;
}
.mb-3 {
    margin-bottom: 1.5rem !important;
}

/* Buttons */
.btn {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px); /* Slight lift */
}
.btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1.1rem;
}
.btn-primary:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.1rem;
}
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.1rem;
}
.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.1rem;
}
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.1rem;
}
/*.btn + .btn {
    margin-left: 0.5rem;
}*/

/* Info Button */
.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.1rem;
}
.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #138496;
    transform: translateY(-2px);
}
.btn-sm-md {
    padding: 6px 12px;
    font-size: 0.9rem;
}
/* Container */
.container {
    max-width: 1200px;
    padding-bottom: 1rem;
    /*margin-top: 2rem;*/
}

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-title {
    color: var(--dark-green);
    font-weight: 600;
}
.card-body p {
    margin-bottom: 0.75rem;
}
/* Headings */
h1 {
    color: var(--dark-green);
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--lawn-green);
    padding-bottom: 0.5rem;
}

h4 {
    font-weight: 600;
}
/* Footer */
footer {
    background-color: #343a40;
    color: white;
    padding: 2rem 0;
    margin-top: 2rem;
}
footer a {
    color: #ffffff;
    text-decoration: none;
}
footer a:hover {
    color: var(--lawn-green);
}
footer .list-inline-item:not(:last-child)::after {
    content: "|";
    margin: 0 10px;
    color: #ffffff;
}

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid var(--lawn-green);
    inline-size:max-content;
}
.nav-tabs .nav-link {
    background-color: var(--light-gray); /* Light gray background for inactive tabs */
    color: var(--dark-green); /* Dark green text */
    font-weight: 500;
    border: 1px solid #dee2e6; /* Subtle border */
    border-bottom: none;
    border-radius: 6px 6px 0 0; /* Rounded top corners */
    margin-right: 4px; /* Space between tabs */
    padding: 0.75rem 1.5rem; /* Larger click area */
}
.nav-tabs .nav-link.inactive {
    background-color: var(--light-gray); /* Light gray background for inactive tabs */
    color: var(--dark-green); /* Dark green text */
    font-weight: 500;
    border: 1px solid #dee2e6; /* Subtle border */
    border-bottom: none;
    border-radius: 6px 6px 0 0; /* Rounded top corners */
    margin-right: 4px; /* Space between tabs */
    padding: 0.75rem 1.5rem; /* Larger click area */
}
.nav-tabs .nav-link.active {
    background-color: var(--lawn-green);
    color: white;
    border: 1px solid var(--lawn-green);
    border-bottom: none;
}
.nav-tabs .nav-link:hover {
    background-color: #e9f7e9; /* Light green hover */
    color: var(--dark-green);
    border: 1px solid #dee2e6;
    border-bottom: none;
}

.error-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.error-icon {
    font-size: 4rem;
    color: #dc3545; /* Bootstrap danger red */
    margin-bottom: 1rem;
}

.btn-home {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

.confirm-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}
.warning-icon {
    font-size: 4rem;
    color: #dc3545; /* Bootstrap danger red */
    margin-bottom: 1rem;
}

.subtask-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.subtask-input {
    flex: 1;
}
.total-amount {
    font-weight: bold;
    color: #198754;
}
 
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .content {
	padding-bottom: 60px;
    }
    .navbar-brand {
        font-size: 1.2rem;
    }
    .navbar-brand img {
        height: 24px;
    }
    .table {
        font-size: 0.9rem;
    }
    .btn-group {
        flex-wrap: wrap; /* Stack buttons on small screens */
    }
    .btn {
        margin-bottom: 0.5rem;
    }
    footer {
	padding: 1rem 0; /* Consistent with py-3 in template */
    }

    footer .list-inline-item {
	margin: 0 0.5rem; /* Spacing between links */
    }

    footer .list-inline-item a {
	font-size: 0.9rem; /* Slightly smaller for mobile */
	padding: 0.5rem; /* Touch-friendly */
    }
}

@media (max-width: 576px) {
    .container {
        padding: 15px;
    }
    .btn :not(btn-lnk){
        width: 100%;
        margin-bottom: 10px;
    }
    .form-control {
        font-size: 1rem;
    }
      footer .list-inline-item {
    margin-bottom: 0.5rem; /* Space between stacked links */
  }
  footer .list-inline-item a {
    font-size: 0.85rem; /* Even smaller for small screens */
  }
  footer p {
    font-size: 0.8rem; /* Smaller copyright text */
  }
}

/* Ensure no overflow on very small screens */
@media (max-width: 360px) {
  .navbar.fixed-bottom i {
    font-size: 1rem; /* Even smaller icons for tiny screens */
  }
  .navbar.fixed-bottom small {
    font-size: 0.6rem;
  }
}