/* =========================================================
   ROHIT GIS APPS
   SITE SURVEY
========================================================= */


* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

    min-height: 100%;

}


/* =========================================================
   BODY
========================================================= */

body {

    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #0f2027,
            #203a43,
            #2c5364
        );

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

}


/* =========================================================
   MAIN CARD
========================================================= */

.box {

    background: #ffffff;

    width: 100%;

    max-width: 440px;

    padding: 18px;

    border-radius: 18px;

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

}


/* =========================================================
   HEADER
========================================================= */

.app-header {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

}


.header-icon {

    width: 43px;

    height: 43px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #005bea,
            #00c6fb
        );

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.app-header h2 {

    margin: 0;

    color: #0b3c5d;

    font-size: 19px;

}


.header-subtitle {

    color: #6b7280;

    font-size: 12px;

    margin-top: 2px;

}



/* =========================================================
   SITE FIELDS TOOLBAR
========================================================= */

.site-fields-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    margin: 8px 0 10px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #f7fafc;
}

.site-fields-title {
    color: #0b3c5d;
    font-size: 13px;
    font-weight: 700;
}

.site-fields-subtitle {
    color: #6b7280;
    font-size: 10px;
    margin-top: 2px;
}

.field-add-btn {
    width: auto;
    margin: 0;
    padding: 8px 10px;
    white-space: nowrap;
}

.field-manager {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #cfe0ef;
    border-radius: 12px;
    background: #f8fbff;
}

.field-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #0b3c5d;
}

.icon-close {
    width: auto;
    margin: 0;
    padding: 4px 8px;
    background: transparent;
    color: #52616b;
    border: 0;
}

.field-manager-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.field-manager-grid label,
.required-check {
    display: block;
    color: #0b3c5d;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.required-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
}

.required-check input {
    width: auto;
    margin: 0;
}

.field-manager-status {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
}

.field-manager-status.success { color: #18733c; }
.field-manager-status.error { color: #842029; }

/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {

    margin-top: 12px;

    margin-bottom: 7px;

    color: #0b3c5d;

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   FIELD GROUP
========================================================= */

.field-group {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-bottom: 8px;

}


/* =========================================================
   DYNAMIC FIELD
========================================================= */

.dynamic-field {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.dynamic-field.full {

    grid-column:
        span 2;

}


.dynamic-field label {

    color: #0b3c5d;

    font-size: 12px;

    font-weight: 700;

}


.required {

    color: #dc3545;

}


.dynamic-field input,
.dynamic-field textarea,
.dynamic-field select {

    width: 100%;

    padding: 9px;

    font-size: 13px;

    border-radius: 8px;

    border: 1px solid #cccccc;

    background: #ffffff;

    color: #1f2937;

}


.dynamic-field textarea {

    min-height: 70px;

    resize: vertical;

}


.dynamic-field input:focus,
.dynamic-field textarea:focus,
.dynamic-field select:focus {

    outline: none;

    border-color: #0077b6;

    box-shadow:
        0 0 0 2px
        rgba(0,119,182,.08);

}


/* =========================================================
   LOADING
========================================================= */

.loading {

    grid-column:
        span 2;

    padding: 12px;

    border-radius: 8px;

    background: #eef2f7;

    color: #52616b;

    text-align: center;

    font-size: 13px;

}


/* =========================================================
   BUTTON
========================================================= */

button {

    width: 100%;

    padding: 11px;

    margin-top: 7px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #005bea,
            #00c6fb
        );

    transition: .2s;

}


button:hover {

    transform:
        translateY(-1px);

}


button:disabled {

    opacity: .55;

    cursor: not-allowed;

    transform: none;

}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

button.secondary {

    background:
        #4b5563;

    color: #ffffff;

}


/* =========================================================
   SUCCESS BUTTON
========================================================= */

button.success {

    background:
        linear-gradient(
            135deg,
            #1e7e34,
            #28a745
        ) !important;

    color: #ffffff;

}


/* =========================================================
   NEW SURVEY BUTTON
========================================================= */

#newSiteBtn {

    display: none;

    background:
        linear-gradient(
            135deg,
            #005bea,
            #00c6fb
        );

    color: #ffffff;

}


/* =========================================================
   VIDEO
========================================================= */

#video {

    width: 100%;

    max-height: 300px;

    object-fit: cover;

    border-radius: 12px;

    display: none;

    margin-top: 7px;

    background: #000000;

}


/* =========================================================
   PHOTO PREVIEW
========================================================= */

#photoPreview {

    width: 100%;

    max-height: 260px;

    object-fit: contain;

    border-radius: 12px;

    display: none;

    margin-top: 7px;

    background: #f2f2f2;

}


/* =========================================================
   GPS INFO
========================================================= */

.gps-info {

    margin-top: 7px;
    padding: 9px;
    border-radius: 8px;
    background: #eef2f7;
    color: #52616b;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;

}

.gps-main-status {
    text-align: center;
    font-weight: 700;
    margin-bottom: 7px;
}

.gps-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    font-size: 11px;
}

.gps-details div {
    padding: 3px 0;
}

.gps-details span {
    font-weight: 600;
    color: #0b3c5d;
}

#locationBtn.gps-active {
    background: linear-gradient(135deg, #1e7e34, #28a745);
}

#locationBtn.gps-refining {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

#locationBtn.gps-error {
    background: linear-gradient(135deg, #b91c1c, #dc3545);
}

.gps-stop-btn {
    margin-top: 6px;
    background: #374151 !important;
}

.gps-stop-btn:hover {
    background: #1f2937 !important;
}

.gps-info.gps-good {
    border-left: 4px solid #1e7e34;
}

.gps-info.gps-warning {
    border-left: 4px solid #d97706;
}

.gps-info.gps-error {
    border-left: 4px solid #b91c1c;
}

.gps-quality-note {
    margin-top: 5px;
    font-size: 10px;
    color: #6b7280;
    text-align: center;
}

@media (max-width: 600px) {

    .site-fields-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .field-add-btn {
        width: 100%;
    }

    .field-manager-grid {
        grid-template-columns: 1fr;
    }


    .gps-details {
        grid-template-columns: 1fr;
    }

}

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

#mapDiv {

    width: 100%;

    height: 0;

    margin-top: 8px;

    border-radius: 12px;

    overflow: hidden;

    transition:
        height .3s;

}


/* =========================================================
   OFFLINE COUNT
========================================================= */

#offlineCount {

    margin-top: 8px;

    padding: 7px;

    text-align: center;

    border-radius: 8px;

    background: #fff3cd;

    color: #856404;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   OFFLINE LIST
========================================================= */

#offlineList {

    display: none;

    font-size: 12px;

    border-radius: 10px;

    border: 1px solid #dddddd;

    margin-top: 8px;

    padding: 8px;

    max-height: 180px;

    overflow: auto;

    background: #fafafa;

}


.offline-record {

    padding: 8px;

    margin-bottom: 6px;

    border-radius: 8px;

    background: #ffffff;

    border: 1px solid #dddddd;

    line-height: 1.6;

}


/* =========================================================
   STATUS
========================================================= */

#status {

    margin-top: 8px;

    padding: 8px;

    min-height: 32px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

    text-align: center;

    background: #eef2f7;

    color: #52616b;

}


#status.success {

    background: #e8f7ee;

    color: #18733c;

}


#status.error {

    background: #f8d7da;

    color: #842029;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .site-fields-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .field-add-btn {
        width: 100%;
    }

    .field-manager-grid {
        grid-template-columns: 1fr;
    }


    body {

        padding: 8px;

        align-items: flex-start;

    }


    .box {

        margin-top: 5px;

        padding: 14px;

        border-radius: 15px;

    }


    .field-group {

        grid-template-columns:
            1fr;

    }


    .dynamic-field.full {

        grid-column:
            auto;

    }


    .loading {

        grid-column:
            auto;

    }


    .app-header h2 {

        font-size: 17px;

    }

}