*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    display:flex;
    font-family:Arial, sans-serif;
    background:#f5f7f9;
}

.sidebar{
    width:240px;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background:linear-gradient(180deg,#0b5d2a,#0f6d33,#0d4f24);
    color:#fff;
    overflow-y:auto;
}

.sidebar h2{
    margin-bottom:20px;
}
.sidebar ul{
    list-style:none;
}

.sidebar li{
    margin-bottom:4px;
}
.sidebar a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    margin:6px 12px;
    border-radius:12px;
    color:#d7f5dd;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:all .3s ease;
}

.sidebar a:hover{
    background:rgba(255,255,255,0.10);
    transform:translateX(5px);
}

.sidebar a.active{
    background:#22c55e;
    color:#fff;
    box-shadow:0 6px 18px rgba(34,197,94,.35);
}

.main-content{
    margin-left:240px;
    flex:1;
}

.header{
    background:#ffffff;
    height:64px;
    padding:24px;
    display:flex;
    align-items:right;
    justify-content:space-between;
    border-bottom:1px solid #e5e7eb;
}

.banner{
    position: relative;
    overflow: hidden;
    border-radius:20px;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.banner img{
    width:100%;
    height:220px;
    object-fit:none;
}

.banner::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(20,83,45,0.78) 0%,
        rgba(20,83,45,0.55) 25%,
        rgba(20,83,45,0.25) 50%,
        rgba(20,83,45,0.05) 75%,
        rgba(20,83,45,0) 100%
    );
    z-index:1;
}

.content{
    padding:24px;
    background:#f8faf8;
}

.card{
    background:#ffffff;
    padding:18px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
    margin-bottom:18px;
}

.section-title{
    font-family:'Inter',sans-serif;
    font-size:24px;
    font-weight:700;
    color:#0f8b3d;
    letter-spacing:-0.3px;
    margin-bottom:18px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:20px;
}

.span-25{
    grid-column:span 3;
}

.span-50{
    grid-column:span 6;
}

.span-75{
    grid-column:span 9;
}

.span-100{
    grid-column:span 12;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:500;
    color:#475569;
    text-transform:uppercase;
    letter-spacing:0.6px;
}

input,
select{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid #d9e2ec;
    border-radius:10px;
    background:#fff;

    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:500;
    color:#1e293b;

    transition:.25s;
}

input:focus,
select:focus{
    border-color:#22c55e;
    box-shadow:0 0 0 3px rgba(34,197,94,0.12);
    outline:none;
}

.save-btn{
    background:#15803d;
    color:white;
    border:none;
    padding:12px 28px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:0.25s ease;
}

.save-btn:hover{
    background:#166534;
    transform:translateY(-1px);
}
.main-layout{
    display:grid;
    grid-template-columns:3fr 1.25fr;
    gap:22px;
    align-items:start;
}

.summary-card{
    position:sticky;
    top:20px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    min-height:auto;
    padding:18px;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.05);
}

.summary-card h3{
    color:#0b7a33;
    font-size:20px;
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:1px solid #e5e7eb;
}

.summary-card p{
    margin-bottom:22px;
    padding-bottom:12px;
    border-bottom:1px solid #edf2f7;
}

.summary-card strong{
    font-family:'Inter',sans-serif;
    font-size:12px;
    color:#94a3b8;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;

}
.summary-area{
    width:100%;
}

.form-area{
    width:100%;
}
.banner-content{
    position:absolute;
    left:28px;
    bottom:28px;
    z-index:2;
    color:white;
}

.banner-content p{
    font-size:14px;
    margin-bottom:8px;
}

.banner-content h1{
    font-family:'Inter',sans-serif;
    font-size:42px;
    font-weight:700;
    letter-spacing:-0.5px;
}

.banner-content span{
    font-size:24px;
    font-weight:500;
}

.season-bar{
    display:flex;
    align-items:center;
    gap:30px;
}

.season-item{
    display:flex;
    align-items:center;
    gap:12px;
}

.season-item label{
    font-size:14px;
    font-weight:600; 
    color:#64748b;
}

.season-item select,
.season-item input{
    width:120px;
    height:44px;
}

.logo-section{
    padding:25px 20px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.logo-section h2{
    font-size:34px;
    font-weight:700;
}

.logo-section p{
    font-size:13px;
    color:#c8e6c9;
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.version-badge{
    background:#dcfce7;
    color:#15803d;
    padding:8px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.sidebar i{
    width:22px;
    font-size:18px;
    text-align:center;
}

.form-group{
    display:flex;
    flex-direction:column;
    flex:0 0 auto;
}


.required{
    color:#dc2626;
    font-weight:700;
    margin-left:2px;
}

input::placeholder{
    font-family:'Inter',sans-serif;
    font-size:15px;
    color:#94a3b8;
}

select{
    color:#374151;
}

/* Searchable dropdown (Choices.js) */
.choices{
    margin-bottom:0;
}

.choices__inner{
    min-height:46px !important;
    border:1px solid #d9e2ec !important;
    border-radius:10px !important;
    background:#fff !important;

    font-family:'Inter',sans-serif !important;
    font-size:16px !important;
    font-weight:500 !important;
    color:#1e293b !important;

    display:flex;
    align-items:center;
}

.choices__list--single{
    padding:0 8px !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded]{
    border-radius:10px;
    background-color: #ffffff !important;
    z-index: 10000 !important;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item{
    font-family:'Inter',sans-serif !important;
    font-size:15px !important;
    font-weight:500 !important;
    color:#334155 !important;
    padding:12px 14px !important;
}

.choices__input{
    font-family:'Inter',sans-serif !important;
    font-size:15px !important;
}

.choices__placeholder{
    color:#94a3b8 !important;
    font-size:15px !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted{
    background:#e9f8ee !important;
    color:#15803d !important;
}

.button-group{
    display:flex;
    justify-content:flex-end;
    gap:15px;
    margin-top:25px;
}

.reset-btn{
    background:#f1f5f9;
    color:#334155;
    border:1px solid #cbd5e1;
    padding:12px 28px;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
}

.reset-btn:hover{
    background:#e2e8f0;
}

.save-btn{
    background:#16a34a;
    color:#fff;
    border:none;
    padding:12px 30px;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
}

.next-btn{
    background:#2563eb;
    color:white;
    border:none;
    padding:12px 28px;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
}

.next-btn:hover{
    background:#1d4ed8;
}
.summary-card span{
    font-family:'Inter',sans-serif;
    display:block;
    margin-top:6px;
    font-size:18px;
    font-weight:600;
    color:#1f2937;
}

.summary-card{
    position:sticky;
    top:20px;
    width:100%;
    min-height:760px;
}

.form-group input,
.form-group select{
    font-family:'Inter', sans-serif;
    font-size:18px;
    font-weight:500;
    color:#1e293b;
}

.form-group select option:first-child{
    color:#94a3b8;
    font-weight:500;
}

/* ===========================
   Plot Registration
=========================== */

.workflow{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.step{
    padding:8px 16px;
    border:1px solid #d1d5db;
    border-radius:20px;
    color:#64748b;
    font-size:15px;
    font-weight:600;
    background:#f8fafc;
}

.step.completed{
    background:#16a34a;
    color:#fff;
    border-color:#16a34a;
}

.step.active{
    background:#dcfce7;
    color:#15803d;
    border:1px solid #16a34a;
}

/* ==========================
   GIS MAP
========================== */

.map-box{
    height:500px;
    width:100%;
    border:1px solid #d9e2ec;
    border-radius:12px;
    overflow:hidden;
}

.map-box h2{

    color:#15803d;

    font-size:28px;

}

.map-box p{

    color:#64748b;

    margin-top:10px;

}

.map-info{

    text-align:center;

    flex:1;

}

.map-info label{

    color:#64748b;

    font-size:14px;

}

.map-info h3{

    color:#15803d;

    margin-top:10px;

    font-size:24px;

}



#farmer{
    height:46px;
    font-size:16px;
}

.form-area .card{
    width:100%;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
}

.form-card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    text-align:center;
    text-decoration:none;
    color:#333;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    transition:.3s;
}

.form-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.form-card i{
    font-size:40px;
    color:#2e7d32;
    margin-bottom:15px;
}

.form-card h3{
    margin-bottom:10px;
}

.form-card p{
    color:#777;
}

.workflow-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:20px;

    overflow-x:auto;

    padding-bottom:10px;

}

.workflow-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:70px;

}

.workflow-step span{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#E5E7EB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

}

.workflow-step p{

    margin-top:8px;

    font-size:12px;

    text-align:center;

}

.workflow-line{

    flex:1;

    height:3px;

    background:#E5E7EB;

}

.workflow-step.completed span{

    background:#16A34A;

    color:#fff;

}

.workflow-step.active span{

    background:#F59E0B;

    color:#fff;

}

.workflow{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:center;

}

.step{

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    border:1px solid #D6DCE5;

    background:#F8FAFC;

    color:#64748B;

}

.step.completed{

    background:#16A34A;

    color:white;

    border:none;

}

.step.active{

    background:#E8F7EC;

    color:#16A34A;

    border:1px solid #16A34A;

}


/* =========================================================
   FIELD INSPECTION TOGGLE
========================================================= */

.inspection-tabs{
    display:flex;
    align-items:center;
    gap:30px;
}

.inspection-option{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    color:#475569;
    user-select:none;
    transition: color 0.25s ease;
}

.inspection-option input[type="radio"]{
    display:none;
}

.custom-dot{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:#475569;
    transition:background-color 0.25s ease;
}

.tab-label{
    transition:color 0.25s ease;
}

.inspection-option input[type="radio"]:checked ~ .custom-dot{
    background-color:#16a34a;
}

.inspection-option input[type="radio"]:checked ~ .tab-label{
    color:#1e293b;
}


/* ==========================================
   HARVEST REVENUE CARDS
========================================== */

.revenue-card{

    flex:1;

    background:#ffffff;

    border:1px solid #dfe7ef;

    border-radius:12px;

    padding:18px;

    min-height:90px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:0 2px 8px rgba(0,0,0,0.05);

}

.revenue-card h4{

    margin:0 0 8px;

    font-size:14px;

    font-weight:600;

    color:#6b7280;

}

.revenue-card h2{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#16A34A;

}



/* ==========================================
   MULTI SELECT
========================================== */

.multi-select{

    position:relative;

    width:100%;

}

.multi-select-header{

    border:2px solid #1db954;

    border-radius:12px;

    background:#fff;

    padding:12px 15px;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

}

.multi-select-header:hover{

    border-color:#198754;

}

.multi-select-body{

    position:absolute;

    top:105%;

    left:0;

    width:100%;

    background:#fff;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    display:none;

    max-height:220px;

    overflow-y:auto;

    z-index:999;

}

.multi-option{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 15px;

    cursor:pointer;

    font-size:14px;

}

.multi-option:hover{

    background:#f5f5f5;

}

.multi-option input{

    width:18px;

    height:18px;

}

.arrow{

    transition:.3s;

}

.multi-select.active .arrow{

    transform:rotate(180deg);

}



.farmer-info-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.farmer-info-group {
    flex: 1;
    min-width: 220px;
}

.farmer-info-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
}

.farmer-info-group select,
.farmer-info-group input:not(.choices__input) {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d8dee5;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Custom Dropdown Multi-Select */
.select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 46px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    transition: 0.25s;
    user-select: none;
    box-sizing: border-box;
}
.select-box:hover {
    border-color: #22c55e;
}
.multi-select.active .select-box {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.dropdown-content {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #d9e2ec;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: none;
    max-height: 220px;
    overflow-y: auto;
    z-index: 999;
    box-sizing: border-box;
    padding: 6px 0;
}
.multi-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    transition: background 0.2s ease;
}
.multi-option:hover {
    background: #f4fbf7;
}
.multi-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #16a34a;
    cursor: pointer;
}
.multi-option label {
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    color: #334155;
}

/* Premium Textarea Styling */
textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    transition: .25s;
    resize: vertical;
}
textarea:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
    outline: none;
}

/* File Upload Area Zone */
.file-upload-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.file-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background-color: #f8fafc;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    box-sizing: border-box;
}
.file-upload-box:hover {
    border-color: #22c55e;
    background-color: #f4fbf7;
}
.file-upload-box .cloud-icon {
    font-size: 26px;
    color: #94a3b8;
    margin-bottom: 8px;
    transition: color 0.25s ease;
}
.file-upload-box:hover .cloud-icon {
    color: #16a34a;
}
.file-upload-box .upload-text {
    font-size: 15px;
    color: #475569;
    font-weight: 500;
}

/* Hide label for calculated cents field */
.form-group:has(#calculated_cents) label {
    visibility: hidden !important;
}

#calculated_cents {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    cursor: not-allowed !important;
}

/* ==========================================
   CROP TABS & HARVESTING CROP SELECTOR
========================================== */
.crop-tabs-container {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}
.crop-tabs-title {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.crop-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.crop-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    user-select: none;
}
.crop-tab:hover {
    background: #f3f4f6;
    color: #1f2937;
    transform: translateY(-1px);
}
.crop-tab.active {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
    transform: translateY(-1px);
}
.crop-tab-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 9999px;
    text-transform: uppercase;
}
.crop-tab-status.pending {
    background: #fef3c7;
    color: #d97706;
}
.crop-tab-status.draft {
    background: #dbeafe;
    color: #2563eb;
}
.crop-tab-status.submitted {
    background: #d1fae5;
    color: #059669;
}
.crop-tab.active .crop-tab-status.pending {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.crop-tab.active .crop-tab-status.draft {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.crop-tab.active .crop-tab-status.submitted {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}