.editbtn {
    border-radius: 25px;
    background-color: #4E2310;
    color: white;
    border: 1px solid #4E2310;
    font-size: 0.9rem;
    margin-left: 10px;
    cursor: pointer;
}
.deploybtn {
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.2);
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    margin-left: 10px;
    cursor: pointer;
}
.editbtn {
    border-radius: 25px;
    background-color: #199EF3;
    color: white;
    border: 1px solid #199EF3;
    font-size: 0.9rem;
    margin-left: 10px;
    cursor: pointer;
}
.Deletebtn {
    border-radius: 25px;
    background-color: #FF0000;
    color: white;
    /* padding: 6px 9px;*/
    border: 1px solid #FF0000;
    font-size: 0.9rem;
    margin-left: 10px;
    cursor: pointer;
    /*    margin-left: 10px;
    padding: 6px 12px;
    background-color: #28a745;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;*/
}

.remove-option-btn {
    background-color: #dc3545; /* Bootstrap danger red */
    color: #fff;
    border: none;
    width: 2.9rem;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background-color 0.2s ease;
}

    .remove-option-btn:hover {
        background-color: #c82333;
    }

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }



/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 10px 8px;
        transition: 0.3s;
        font-size: 17px;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 3px;
    border: 1px solid #ccc;
    border-top: none;
}



/*Welcome page stop odk*/

/* welcome.css */

.welcome-page {
    background: linear-gradient(to bottom right, #f5f7fa, #c3cfe2);
    min-height: 90vh;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    animation: fadeIn 1s ease-in-out;
}

    .welcome-page img {
        width: 120px;
        height: 120px;
        margin-bottom: 1.5rem;
        border-radius: 20%;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        transition: transform 0.4s ease;
    }

        .welcome-page img:hover {
            transform: scale(1.05);
        }

    .welcome-page h1 {
        font-size: 2.5rem;
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .welcome-page p {
        font-size: 1.2rem;
        color: #555;
        max-width: 600px;
        margin-bottom: 2rem;
    }

    .welcome-page a {
        display: inline-block;
        background-color: #007BFF;
        color: #fff;
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 30px;
        text-decoration: none;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .welcome-page a:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 600px) {
    .welcome-page h1 {
        font-size: 2rem;
    }

    .welcome-page p {
        font-size: 1rem;
    }
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 6vh;
}

.modal {
    background-color: #ffffff;
    color: #333;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    width: 92%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideDownFade 0.3s ease-out;
}

    .modal h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .modal input[type="text"] {
        width: 100%;
        padding: 0.75rem;
        margin-bottom: 1.25rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 8px;
        transition: border-color 0.3s ease;
    }

        .modal input[type="text"]:focus {
            outline: none;
            border-color: #007bff;
        }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

    .modal-actions button {
        padding: 0.6rem 1.5rem;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s;
    }

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

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}






.mecbik-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(100, 100, 100, 0.6); /* Gray with opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}
.Mecbik-input {
    width: 100%;
    min-height: 130px; /* Enough for 500+ words if typed continuously */
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical; /* Allow user to resize vertically if needed */
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
    background-color: #fefefe;
    line-height: 1.6;
    overflow-y: auto;
}

/* Centered modal container */
.mecbik-modal {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    min-width: 720px;
    max-width: 700vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: fadeScaleIn 0.3s ease;
}

/* Basic animation */
@keyframes fadeScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mecbik-button {
    padding: 0.7rem 1.4rem;
    background-color: #0078d7;
    
    color: #fff;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    margin: 2rem 2.2rem 2rem 0.5rem;
}

    .mecbik-button.cancel {
        background-color: #6c757d;
    }


/* ---------- Form Builder Enhancements ---------- */

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.project-title {
    font-size: 1.4rem;
    padding: 0.6rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 40%;
}

.project-desc {
    font-size: 1rem;
    padding: 0.6rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 55%;
    resize: vertical;
    margin-left: 1rem;
}

.button-save, .button-cancel {
    padding: 0.6rem 1.2rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    margin-left: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

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

.button-cancel {
    background-color: #6c757d;
}

    .button-cancel:hover {
        background-color: #5a6268;
    }

.toolbar {
    display: flex;
    gap: 1rem;
    padding: 1rem 2rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.toolbar-button {
    background-color: #0078d7;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .toolbar-button:hover {
        background-color: #005bb5;
    }

.question-box {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    gap: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.question-input {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.add-question-btn {
    background-color: #28a745;
    color: white;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

    .add-question-btn:hover {
        background-color: #218838;
    }

.type-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(100, 100, 100, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-popup {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 700px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.type-button {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .type-button:hover {
        background-color: #e6e6e6;
    }

.form-field-box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 1rem 2rem;
    margin: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.field-label {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.option-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.option-chip {
    background-color: #e9ecef;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #333;
}

.add-option-btn {
    padding: 0.4rem 0.8rem;
    background-color: #007bff;
    color: white;
    border: none;
    width: 8.0rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
}

    .add-option-btn:hover {
        background-color: #0056b3;
    }
.option-text {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #007bff;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    margin-bottom: 0.5rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .option-text:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }
.option-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.csv-download-link {
    display: inline-block;
    margin-top: 6px;
    color: #007bff;
    text-decoration: none;
}

    .csv-download-link:hover {
        text-decoration: underline;
    }






/* ===============================
   Sidebar "Create New" Button
   =============================== */

/* ===============================
   Sidebar Green "New" Button
   =============================== */

.sidebar-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    max-width: 150px;
    height: 38px;
    padding: 0 16px;
    margin: 8px 0 16px 0;
    background-color: #4E2310;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
    .sidebar-create-btn:hover {
        background-color: #3b190b;
        box-shadow: 0 6px 14px rgba(78, 35, 16, 0.28);
    }

    .sidebar-create-btn:active {
        transform: scale(0.96);
    }


.second-sidebarwide .sidebar-create-btn {
    margin-left: 0;
}

@media (max-width: 1024px) {
    .sidebar-create-btn {
        max-width: 100%;
    }
}

/* ===============================
   ODK Theme Buttons And Line Icons
   =============================== */

:root {
    --odk-primary: var(--sares-green, #7A8C2E);
    --odk-primary-hover: var(--sares-green-dark, #5E6D20);
    --odk-primary-soft: var(--sares-green-soft, #EEF2DC);
    --odk-sidebar: var(--sares-green-deep, #4E2310);
    --odk-text: var(--sares-ink-2, #3D4B44);
    --odk-muted: var(--sares-muted, #6B7B74);
    --odk-border: var(--sares-line, #E2E8E5);
    --odk-surface: var(--sares-surface, #ffffff);
    --odk-neutral: var(--surface-alt, #f7f9fb);
    --odk-neutral-hover: var(--sares-green-soft, #EEF2DC);
    --odk-danger: var(--sares-clay, #4E2310);
    --odk-danger-soft: #F8EDE6;
    --odk-radius: var(--radius-sm, 8px);
}

a,
.btn-link {
    color: var(--odk-primary) !important;
}

.btn-primary {
    color: #ffffff !important;
    background-color: var(--odk-primary) !important;
    border-color: var(--odk-primary) !important;
}

.previewbtn,
.deploybtn,
.editbtn,
.sharebtn,
.savebtn,
.Deletebtn,
.button-save,
.button-cancel,
.toolbar-button,
.add-question-btn,
.delete-question-btn,
.remove-choice-btn,
.add-option-btn,
.condition-clear-btn,
.mecbik-button,
.sidebar-create-btn,
.button-primary,
.button-secondary,
.email-action,
.message-action,
.gps-button,
.edit-button,
.login-button,
.form-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 36px !important;
    border-radius: var(--odk-radius) !important;
    padding: 8px 12px !important;
    margin: 2px 4px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.08s ease !important;
}

.previewbtn .material-icons-round,
.deploybtn .material-icons-round,
.editbtn .material-icons-round,
.sharebtn .material-icons-round,
.savebtn .material-icons-round,
.Deletebtn .material-icons-round,
.button-save .material-icons-round,
.button-cancel .material-icons-round,
.toolbar-button .material-icons-round,
.add-question-btn .material-icons-round,
.delete-question-btn .material-icons-round,
.remove-choice-btn .material-icons-round,
.add-option-btn .material-icons-round,
.condition-clear-btn .material-icons-round,
.mecbik-button .material-icons-round,
.sidebar-create-btn .material-icons-round,
.button-primary .material-icons-round,
.button-secondary .material-icons-round,
.email-action .material-icons-round,
.message-action .material-icons-round,
.gps-button .material-icons-round,
.edit-button .material-icons-round,
.login-button .material-icons-round,
.form-button .material-icons-round,
.csv-download-link .material-icons-round,
h3 > .material-icons-round {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.previewbtn,
.editbtn,
.sharebtn,
.button-secondary,
.condition-clear-btn {
    background: var(--odk-surface) !important;
    color: var(--odk-text) !important;
    border: 1px solid var(--odk-border) !important;
}

.previewbtn:hover,
.editbtn:hover,
.sharebtn:hover,
.button-secondary:hover,
.condition-clear-btn:hover {
    background: var(--odk-neutral) !important;
    border-color: #c8d3dc !important;
}

.deploybtn,
.savebtn,
.button-save,
.add-question-btn,
.add-option-btn,
.mecbik-button,
.sidebar-create-btn,
.button-primary,
.gps-button,
.edit-button,
.login-button,
.form-button,
.email-action {
    background: var(--odk-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--odk-primary) !important;
}

.deploybtn:hover,
.savebtn:hover,
.button-save:hover,
.add-question-btn:hover,
.add-option-btn:hover,
.mecbik-button:hover,
.sidebar-create-btn:hover,
.button-primary:hover,
.gps-button:hover,
.edit-button:hover,
.login-button:hover,
.form-button:hover,
.email-action:hover {
    background: var(--odk-primary-hover) !important;
    border-color: var(--odk-primary-hover) !important;
}

.Deletebtn,
.delete-question-btn,
.remove-choice-btn {
    background: var(--odk-danger-soft) !important;
    color: var(--odk-danger) !important;
    border: 1px solid #f0b8c1 !important;
}

.Deletebtn:hover,
.delete-question-btn:hover,
.remove-choice-btn:hover {
    background: #ffe4e8 !important;
    border-color: #e59aa6 !important;
}

.message-action,
.button-cancel,
.mecbik-button.cancel {
    background: var(--odk-neutral) !important;
    color: var(--odk-text) !important;
    border: 1px solid var(--odk-border) !important;
}

.message-action:hover,
.button-cancel:hover,
.mecbik-button.cancel:hover {
    background: var(--odk-neutral-hover) !important;
}

.toolbar-button {
    background: var(--odk-surface) !important;
    color: var(--odk-text) !important;
    border: 1px solid var(--odk-border) !important;
}

.toolbar-button:hover {
    background: var(--odk-primary-soft) !important;
    border-color: #b9d8ce !important;
    color: var(--odk-primary-hover) !important;
}

.button-cancel {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
}

.csv-download-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--odk-primary) !important;
    font-weight: 800 !important;
}

/* ===============================
   ODK Form Builder Question Cards
   =============================== */

.builder-workspace {
    max-width: 1280px;
    margin: 18px auto 64px;
    padding: 0 24px;
}

.empty-builder-state {
    border: 1px dashed #b9c4ce;
    background: #fff;
    border-radius: 8px;
    padding: 36px;
    text-align: center;
    color: #52616f;
}

.empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #27333d;
    margin-bottom: 6px;
}

.empty-subtitle {
    font-size: 14px;
}

.question-card {
    background: #fff;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05);
    overflow: hidden;
}

.question-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #f5f8fa;
    border-bottom: 1px solid #dce3ea;
}

.question-number {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: #52616f;
}

.question-type-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F8EDE6;
    color: #4E2310;
    font-size: 13px;
    font-weight: 700;
}

.delete-question-btn,
.remove-choice-btn {
    border: 1px solid #d3394c;
    background: #fff;
    color: #b42334;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
}

.delete-question-btn:hover,
.remove-choice-btn:hover {
    background: #fff1f3;
}

.question-main-grid,
.field-settings-grid,
.advanced-rules-grid {
    display: grid;
    gap: 14px;
}

.question-main-grid {
    grid-template-columns: minmax(280px, 2fr) minmax(220px, 1fr) minmax(220px, 1fr) 220px;
    padding: 18px;
    align-items: end;
}

.field-settings-grid {
    grid-template-columns: 2fr 1fr 1.4fr;
}

.advanced-rules-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.field-control label,
.section-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #4c5967;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.field-control input,
.field-control select,
.option-line input {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #bcc7d1;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #1f2933;
}

.field-control input:focus,
.field-control select:focus,
.option-line input:focus {
    outline: 2px solid rgba(78, 35, 16, 0.18);
    border-color: #4E2310;
}

.question-toggles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.toggle-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5df;
    border-radius: 999px;
    background: #fff;
    color: #3e4c59;
    font-weight: 700;
    white-space: nowrap;
}

.question-section {
    padding: 0 18px 18px;
}

.section-title {
    margin-top: 4px;
}

.choice-editor {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #fbfcfd;
}

.option-line {
    display: grid;
    grid-template-columns: 34px minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.option-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    background: #eef2f5;
    color: #52616f;
    font-weight: 800;
    font-size: 13px;
}

.add-option-btn {
    justify-self: start;
    padding: 9px 14px;
    background-color: #4E2310;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 800;
}

.condition-section {
    border-top: 1px solid #edf1f4;
}

.condition-builder {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(120px, 0.6fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid #cfe0d8;
    border-radius: 8px;
    background: #f7fbf9;
}

.condition-operator input {
    background: #eef6f2;
    color: #48645a;
    font-weight: 700;
}

.condition-empty {
    min-height: 40px;
    display: flex;
    align-items: center;
    color: #52616f;
    font-size: 14px;
}

.condition-clear-btn {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5df;
    border-radius: 6px;
    background: #fff;
    color: #3e4c59;
    cursor: pointer;
    font-weight: 800;
}

.condition-clear-btn:hover {
    background: #f2f5f7;
}

.condition-summary {
    margin-top: 8px;
    color: #52616f;
    font-size: 13px;
}

.condition-summary code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #eef2f5;
    color: #1f2933;
}

.advanced-section {
    padding-top: 2px;
    background: #fcfdfe;
}

@media (max-width: 1100px) {
    .question-main-grid,
    .field-settings-grid,
    .advanced-rules-grid,
    .condition-builder {
        grid-template-columns: 1fr 1fr;
    }

    .question-toggles {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .builder-workspace {
        padding: 0 12px;
    }

    .question-main-grid,
    .field-settings-grid,
    .advanced-rules-grid,
    .condition-builder,
    .option-line {
        grid-template-columns: 1fr;
    }

    .option-index {
        display: none;
    }
}

/* Final compact action pass: grid buttons show icons only, hover uses title attributes. */
.custom-institution,
.records-table td:last-child,
.response-table td:last-child,
.form-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.custom-institution .previewbtn,
.custom-institution .deploybtn,
.custom-institution .editbtn,
.custom-institution .sharebtn,
.custom-institution .Deletebtn,
.records-table td:last-child .previewbtn,
.records-table td:last-child .editbtn,
.records-table td:last-child .Deletebtn,
.response-table td:last-child .previewbtn,
.form-table td:last-child .email-action,
.form-table td:last-child .message-action {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
}

.custom-institution .previewbtn .material-icons-round,
.custom-institution .deploybtn .material-icons-round,
.custom-institution .editbtn .material-icons-round,
.custom-institution .sharebtn .material-icons-round,
.custom-institution .Deletebtn .material-icons-round,
.records-table td:last-child .previewbtn .material-icons-round,
.records-table td:last-child .editbtn .material-icons-round,
.records-table td:last-child .Deletebtn .material-icons-round,
.response-table td:last-child .previewbtn .material-icons-round,
.form-table td:last-child .email-action .material-icons-round,
.form-table td:last-child .message-action .material-icons-round {
    font-size: 18px !important;
}

.question-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.question-header-main > .material-icons-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid var(--odk-border);
    border-radius: var(--odk-radius);
    background: #ffffff;
    color: var(--odk-primary);
    font-size: 18px;
}

.question-header-label {
    margin-top: 3px;
    color: var(--odk-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.question-header-actions .question-type-badge {
    margin-top: 0;
}

.reorder-question-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--odk-border);
    border-radius: var(--odk-radius);
    background: #ffffff;
    color: var(--odk-text);
    cursor: pointer;
}

.reorder-question-btn:hover:not(:disabled) {
    background: var(--odk-neutral);
}

.reorder-question-btn:disabled {
    opacity: 0.38;
    cursor: default;
}

.reorder-question-btn .material-icons-round {
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 720px) {
    .question-card-header {
        align-items: flex-start;
    }

    .question-header-actions {
        gap: 6px;
    }

    .question-header-label {
        white-space: normal;
    }
}

/* ===============================
   Professional Data Tables
   =============================== */

.custom-table,
.records-table-wrapper,
.response-table-wrapper,
.form-table {
    width: 100% !important;
    border: 1px solid var(--odk-border) !important;
    border-radius: 8px !important;
    background: var(--odk-surface) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
}

.custom-table {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
}

.custom-row {
    display: grid !important;
    grid-template-columns: 34px minmax(70px, 0.45fr) minmax(260px, 2fr) minmax(160px, 1fr) minmax(170px, 0.85fr) minmax(170px, 1fr);
    align-items: center !important;
    gap: 14px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #edf1f4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.custom-row:last-child {
    border-bottom: 0 !important;
}

.custom-row:hover {
    background: #f7fbf9 !important;
}

.custom-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 !important;
    accent-color: var(--odk-primary);
}

.custom-column,
.custom-phone,
.custom-institution {
    min-width: 0;
    color: var(--odk-text) !important;
    font-size: 14px !important;
}

.custom-phone {
    text-align: left !important;
    color: var(--odk-muted) !important;
    font-weight: 700 !important;
}

.custom-name {
    display: inline-block;
    max-width: 100%;
    color: var(--odk-text) !important;
    font-size: 15px;
    font-weight: 900 !important;
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-name:hover {
    color: var(--odk-primary) !important;
}

.custom-job,
.muted {
    color: var(--odk-muted) !important;
    font-size: 13px !important;
    line-height: 1.35;
}

.records-table,
.response-table,
.form-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

.records-table thead,
.response-table thead,
.form-table thead {
    background: #f7f9fb !important;
}

.records-table th,
.response-table th,
.form-table th {
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--odk-border) !important;
    color: #4c5967 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.records-table td,
.response-table td,
.form-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #edf1f4 !important;
    color: var(--odk-text) !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

.records-table tbody tr:last-child td,
.response-table tbody tr:last-child td,
.form-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.records-table tbody tr:hover,
.response-table tbody tr:hover,
.form-table tbody tr:hover {
    background: #f7fbf9 !important;
}

.records-table strong,
.response-table strong,
.form-table strong {
    color: var(--odk-text);
    font-weight: 900;
}

.records-table code,
.response-table code,
.form-table code {
    display: inline-block;
    max-width: 260px;
    padding: 5px 8px !important;
    border: 1px solid #d8e2ea;
    border-radius: 6px;
    background: #f6f8fa !important;
    color: #344054 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.status-chip,
.question-type-badge {
    border: 1px solid #b9d8ce;
}

.custom-institution,
.records-table td:last-child,
.response-table td:last-child,
.form-table td:last-child {
    min-width: 120px;
}

@media (max-width: 1100px) {
    .custom-table {
        overflow-x: auto !important;
    }

    .custom-row {
        grid-template-columns: 34px 80px 280px 160px 120px 190px;
        min-width: 900px;
    }

    .records-table-wrapper,
    .response-table-wrapper {
        overflow-x: auto !important;
    }

    .records-table,
    .response-table,
    .form-table {
        min-width: 820px;
    }
}

/* ===============================
   ODK Blazor Dashboard Shell Polish
   =============================== */
:root {
    --odk-dash-green: #4E2310;
    --odk-dash-green-dark: #3b190b;
    --odk-dash-blue: #126bb6;
    --odk-dash-ink: #17231c;
    --odk-dash-muted: #607268;
    --odk-dash-line: #dce8df;
    --odk-dash-bg: #F7F3EE;
    --odk-dash-card: #ffffff;
    --odk-dash-soft: #F8EDE6;
    --odk-dash-shadow: 0 14px 34px rgba(15, 70, 34, .08);
}

.odk-shell {
    min-height: 100vh !important;
    background: var(--odk-dash-bg) !important;
}

.odk-topbar {
    min-height: 64px !important;
    background: linear-gradient(90deg, #0d612b, #11823d) !important;
    box-shadow: 0 10px 30px rgba(11, 85, 41, .16) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}

.brand-lockup strong {
    color: #ffffff !important;
    letter-spacing: .01em !important;
}

.brand-lockup span {
    color: rgba(255,255,255,.78) !important;
}

.topbar-actions a {
    color: rgba(255,255,255,.9) !important;
    border: 1px solid transparent !important;
    transition: background-color .16s ease, border-color .16s ease, transform .12s ease !important;
}

.topbar-actions a:hover {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.odk-shell .sidethinbar {
    background: #0e3f20 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.08) !important;
}

.odk-shell .sidethinbar button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.74) !important;
    background: rgba(255,255,255,.04) !important;
    transition: background-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.odk-shell .sidethinbar button .oi,
.odk-shell .sidebar-item .oi,
.odk-shell .sidebar-create-btn .oi,
.dashboard-action .oi,
.table-action-button .oi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.15em !important;
    height: 1.15em !important;
    font-size: 16px !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

.odk-shell .sidethinbar button:hover {
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.2) !important;
    transform: translateY(-1px) !important;
}

.odk-shell .sidethinbar button.active {
    background: #ffffff !important;
    color: var(--odk-dash-green) !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

.odk-shell .second-sidebarwide {
    background: #ffffff !important;
    border-right: 1px solid var(--odk-dash-line) !important;
    box-shadow: 8px 0 28px rgba(15, 70, 34, .04) !important;
}

.odk-shell .sidebar-create-btn {
    width: 100% !important;
    border-radius: 8px !important;
    background: var(--odk-dash-green) !important;
    border: 1px solid var(--odk-dash-green) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(15, 122, 58, .18) !important;
    transition: background-color .16s ease, transform .12s ease, box-shadow .16s ease !important;
}

.odk-shell .sidebar-create-btn:hover {
    background: var(--odk-dash-green-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(15, 122, 58, .24) !important;
}

.odk-shell .sidebar-section-title {
    color: #73827a !important;
    letter-spacing: .08em !important;
}

.odk-shell .sidebar-item {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    color: #2f4438 !important;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease !important;
}

.odk-shell .sidebar-item:hover {
    background: #f0f8f3 !important;
    border-color: #cce6d4 !important;
    color: var(--odk-dash-green-dark) !important;
    transform: translateX(2px) !important;
}

.odk-shell .sidebar-item-active {
    background: #e8f6ee !important;
    border-color: #b8dfc5 !important;
    color: var(--odk-dash-green-dark) !important;
    box-shadow: inset 3px 0 0 var(--odk-dash-green) !important;
}

.odk-shell .badge {
    background: #dff1e5 !important;
    color: var(--odk-dash-green-dark) !important;
    font-weight: 900 !important;
}

.bodylayout {
    background: var(--odk-dash-bg) !important;
    padding: 24px !important;
}

.dashboard-page,
.report-page,
.map-workspace,
.submissions-dashboard-page {
    width: 100% !important;
    max-width: 1680px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 18px !important;
    color: var(--odk-dash-ink) !important;
}

.page-heading,
.dashboard-panel,
.metric-tile,
.map-header,
.map-shell,
.map-summary-grid > div,
.report-header,
.project-list-panel,
.project-data-panel,
.form-response-section {
    border: 1px solid var(--odk-dash-line) !important;
    border-radius: 8px !important;
    background: var(--odk-dash-card) !important;
    box-shadow: var(--odk-dash-shadow) !important;
}

.page-heading,
.map-header,
.report-header {
    padding: 22px 24px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbf9) !important;
}

.page-heading span,
.report-eyebrow,
.map-eyebrow {
    color: var(--odk-dash-green) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

.page-heading h1,
.page-heading h2,
.map-header h1,
.report-header h2 {
    margin: 4px 0 8px !important;
    color: var(--odk-dash-ink) !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.page-heading p,
.panel-title-row p,
.map-subtitle,
.report-header p {
    color: var(--odk-dash-muted) !important;
    margin: 0 !important;
}

.dashboard-hero-panel,
.report-header,
.map-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.dashboard-metrics,
.map-summary-grid,
.selected-analysis-summary,
.summary-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
}

.metric-tile,
.map-summary-grid > div,
.selected-analysis-summary div,
.summary-pill-grid div {
    position: relative !important;
    overflow: hidden !important;
    min-height: 104px !important;
    padding: 18px !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.metric-tile::after,
.map-summary-grid > div::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -30px;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: rgba(15, 122, 58, .09);
}

.metric-tile:hover,
.map-summary-grid > div:hover,
.dashboard-panel:hover {
    border-color: #c2e0cc !important;
    box-shadow: 0 18px 42px rgba(15, 70, 34, .11) !important;
}

.metric-tile:hover,
.map-summary-grid > div:hover {
    transform: translateY(-2px) !important;
}

.metric-tile span,
.map-summary-grid span,
.selected-analysis-summary span,
.summary-pill-grid span {
    color: var(--odk-dash-muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.metric-tile strong,
.map-summary-grid strong,
.selected-analysis-summary strong,
.summary-pill-grid strong {
    display: block !important;
    margin-top: 8px !important;
    color: var(--odk-dash-green-dark) !important;
    font-size: clamp(24px, 2.2vw, 36px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.dashboard-grid-two,
.submission-review-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.dashboard-panel {
    padding: 20px !important;
    min-width: 0 !important;
}

.panel-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.panel-title-row h2,
.dashboard-panel h2 {
    color: var(--odk-dash-ink) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

.dashboard-select {
    min-height: 40px !important;
    min-width: 260px !important;
    border: 1px solid #cbded1 !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    background: #fff !important;
    color: var(--odk-dash-ink) !important;
}

.trend-chart {
    width: 100% !important;
    height: 250px !important;
    border: 1px solid #dce8df !important;
    border-radius: 8px !important;
    background:
        linear-gradient(to right, rgba(220,232,223,.7) 1px, transparent 1px) 0 0 / 20% 100%,
        linear-gradient(to bottom, rgba(220,232,223,.75) 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(180deg, #f9fcfa, #ffffff) !important;
    overflow: visible !important;
}

.trend-chart polyline {
    filter: drop-shadow(0 4px 6px rgba(15, 122, 58, .22));
}

.trend-chart circle {
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 3px 5px rgba(15, 70, 34, .18));
}

.chart-axis-labels {
    display: flex !important;
    justify-content: space-between !important;
    color: var(--odk-dash-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-top: 10px !important;
}

.analytics-bar {
    display: grid !important;
    grid-template-columns: minmax(120px, 220px) minmax(120px, 1fr) 64px !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 11px !important;
}

.analytics-bar span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #35483c !important;
    font-weight: 800 !important;
}

.analytics-bar div {
    height: 13px !important;
    border-radius: 999px !important;
    background: #edf4ef !important;
    box-shadow: inset 0 0 0 1px rgba(15, 70, 34, .04) !important;
    overflow: hidden !important;
}

.analytics-bar i {
    display: block !important;
    height: 100% !important;
    min-width: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #4E2310, #A8832A) !important;
    box-shadow: 0 4px 9px rgba(78, 35, 16, .22) !important;
}

.analytics-bar b {
    color: var(--odk-dash-green-dark) !important;
    font-size: 13px !important;
    text-align: right !important;
}

.compact-bar {
    grid-template-columns: minmax(90px, 160px) minmax(120px, 1fr) 48px !important;
}

.distribution-block {
    padding: 12px !important;
    margin-bottom: 10px !important;
    border: 1px solid #edf4ef !important;
    border-radius: 8px !important;
    background: #fbfdfb !important;
}

.distribution-block strong,
.mini-heading {
    color: var(--odk-dash-green-dark) !important;
    font-weight: 900 !important;
}

.dashboard-action-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 14px !important;
}

.dashboard-action {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    min-height: 92px !important;
    padding: 16px !important;
    border: 1px solid var(--odk-dash-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--odk-dash-ink) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease !important;
}

.dashboard-action > .material-icons-round {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #e8f6ee !important;
    color: var(--odk-dash-green) !important;
    font-size: 20px !important;
    line-height: 38px !important;
}

.dashboard-action:hover {
    transform: translateY(-2px) !important;
    border-color: #b8dfc5 !important;
    background: #f8fcf9 !important;
    box-shadow: 0 16px 34px rgba(15, 70, 34, .10) !important;
}

.dashboard-action:hover > .material-icons-round {
    background: var(--odk-dash-green) !important;
    color: #fff !important;
}

.dashboard-action b,
.dashboard-action small {
    display: block !important;
}

.dashboard-action b {
    color: var(--odk-dash-ink) !important;
    font-size: 15px !important;
}

.dashboard-action small {
    margin-top: 5px !important;
    color: var(--odk-dash-muted) !important;
    line-height: 1.35 !important;
}

.dashboard-table-wrap,
.project-response-table-wrap {
    width: 100% !important;
    overflow: auto !important;
    border: 1px solid #e5eee8 !important;
    border-radius: 8px !important;
}

.odk-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.odk-table th,
.odk-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #e5eee8 !important;
    text-align: left !important;
    vertical-align: top !important;
}

.odk-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background: #f2f8f4 !important;
    color: #3c4e43 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.odk-table tbody tr:hover,
.selected-row td {
    background: #f5fbf7 !important;
}

.severity-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: capitalize !important;
}

.severity-pill.error { background: #fee4e2 !important; color: #b42318 !important; }
.severity-pill.warning { background: #fff3cd !important; color: #8a5a00 !important; }
.severity-pill.info { background: #e7f1ff !important; color: #175cd3 !important; }

.submission-detail-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.submission-detail-list div {
    padding: 11px !important;
    border: 1px solid #e5eee8 !important;
    border-radius: 8px !important;
    background: #fbfdfb !important;
}

.submission-detail-list span,
.submission-detail-list strong {
    display: block !important;
}

.submission-detail-list span {
    color: var(--odk-dash-muted) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.submission-detail-list strong {
    color: var(--odk-dash-ink) !important;
    margin-top: 4px !important;
    overflow-wrap: anywhere !important;
}

.submission-json {
    max-height: 420px !important;
    overflow: auto !important;
    border: 1px solid #dce8df !important;
    border-radius: 8px !important;
    background: #112318 !important;
    color: #d9f6e4 !important;
    padding: 14px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    white-space: pre-wrap !important;
}

.button-primary,
.button-secondary,
.table-action-button,
.report-export-btn,
.map-actions button {
    transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

.button-primary:hover,
.button-secondary:hover,
.table-action-button:hover,
.report-export-btn:hover,
.map-actions button:hover {
    transform: translateY(-1px) !important;
}

@media (max-width: 1100px) {
    .dashboard-grid-two,
    .submission-review-grid,
    .report-layout,
    .map-shell {
        grid-template-columns: 1fr !important;
    }

    .dashboard-hero-panel,
    .report-header,
    .map-header,
    .panel-title-row {
        flex-direction: column !important;
    }

    .dashboard-select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 760px) {
    .bodylayout {
        padding: 14px !important;
    }

    .analytics-bar,
    .compact-bar {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .analytics-bar b {
        text-align: left !important;
    }

    .submission-detail-list {
        grid-template-columns: 1fr !important;
    }
}

/* ===============================
   Dashboard Data Pages Polish
   =============================== */
.detail-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--odk-dash-line) !important;
    border-radius: 8px !important;
    background: #f4faf6 !important;
}

.detail-tabs button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #415549 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease !important;
}

.detail-tabs button:hover {
    background: #ffffff !important;
    border-color: #cfe6d6 !important;
    color: var(--odk-dash-green-dark) !important;
    transform: translateY(-1px) !important;
}

.detail-tabs button.active {
    background: var(--odk-dash-green) !important;
    border-color: var(--odk-dash-green) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 122, 58, .18) !important;
}

.form-view-panel {
    overflow: auto !important;
    max-height: 460px !important;
    border: 1px solid #dce8df !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

.form-view-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.form-view-table th,
.form-view-table td {
    padding: 11px 13px !important;
    border-bottom: 1px solid #e6f0e9 !important;
    text-align: left !important;
    vertical-align: top !important;
}

.form-view-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background: #f1f8f4 !important;
    color: #3c4e43 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.form-view-table td:first-child {
    width: 38% !important;
    color: var(--odk-dash-green-dark) !important;
    font-weight: 900 !important;
}

.form-view-table td:last-child {
    color: #1d2c23 !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
}

.submission-json {
    max-height: 460px !important;
    border: 1px solid #183726 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Project Data */
.report-page {
    padding: 0 !important;
    background: transparent !important;
    min-height: auto !important;
}

.report-header {
    margin-bottom: 0 !important;
}

.report-layout {
    display: grid !important;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
    gap: 18px !important;
    margin-top: 0 !important;
    align-items: start !important;
}

.project-list-panel {
    padding: 12px !important;
    position: sticky !important;
    top: 88px !important;
    max-height: calc(100vh - 120px) !important;
    overflow: auto !important;
}

.project-list-title {
    padding: 8px 8px 10px !important;
    color: var(--odk-dash-muted) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

.project-list-item {
    width: 100% !important;
    display: grid !important;
    gap: 4px !important;
    padding: 12px !important;
    margin-bottom: 6px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #284235 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform .12s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.project-list-item:hover {
    transform: translateX(2px) !important;
    background: #f2fbf5 !important;
    border-color: #cbe7d3 !important;
}

.project-list-item.active {
    background: #e8f6ee !important;
    border-color: #b8dfc5 !important;
    box-shadow: inset 3px 0 0 var(--odk-dash-green) !important;
}

.project-list-item span {
    color: var(--odk-dash-ink) !important;
    font-weight: 900 !important;
}

.project-list-item small {
    color: var(--odk-dash-muted) !important;
}

.project-data-panel {
    padding: 18px !important;
    overflow: hidden !important;
}

.selected-project-summary {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 0 0 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid #e5eee8 !important;
}

.selected-project-summary h3 {
    color: var(--odk-dash-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

.form-response-section {
    margin-top: 18px !important;
    overflow: hidden !important;
}

.form-response-header {
    padding: 16px 18px !important;
    background: linear-gradient(180deg, #f9fcfa, #ffffff) !important;
    border-bottom: 1px solid #e5eee8 !important;
}

.form-response-header h4 {
    color: var(--odk-dash-ink) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.form-response-header span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #e8f6ee !important;
    color: var(--odk-dash-green-dark) !important;
    font-weight: 900 !important;
}

.project-response-table-wrap {
    max-height: 660px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.project-response-table th {
    background: #f1f8f4 !important;
    color: #3c4e43 !important;
    border-bottom-color: #dce8df !important;
}

.project-response-table td {
    border-bottom-color: #e6f0e9 !important;
}

.table-cell-content {
    max-height: 132px !important;
}

.report-empty,
.form-empty {
    border: 1px dashed #bddcc8 !important;
    background: #f8fcf9 !important;
    color: var(--odk-dash-muted) !important;
}

.report-export-btn {
    border-radius: 8px !important;
    background: var(--odk-dash-green) !important;
    border-color: var(--odk-dash-green) !important;
    box-shadow: 0 10px 22px rgba(15, 122, 58, .16) !important;
}

/* Africa Map */
.map-workspace {
    padding: 0 !important;
    background: transparent !important;
    min-height: auto !important;
}

.map-header {
    margin-bottom: 0 !important;
}

.map-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.map-actions button {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid #cfe0d5 !important;
    background: #ffffff !important;
    color: #2c4035 !important;
    font-weight: 900 !important;
}

.map-actions button:hover,
.map-actions button:focus {
    background: #e8f6ee !important;
    border-color: #add8bc !important;
    color: var(--odk-dash-green-dark) !important;
    box-shadow: 0 8px 18px rgba(15, 122, 58, .12) !important;
}

.map-summary-grid {
    margin-bottom: 0 !important;
}

.map-shell {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: calc(100vh - 300px) !important;
    align-items: stretch !important;
}

.map-panel,
.map-canvas-wrap {
    border-radius: 8px !important;
    border: 1px solid var(--odk-dash-line) !important;
    background: #ffffff !important;
    box-shadow: var(--odk-dash-shadow) !important;
}

.map-panel-header {
    padding: 18px !important;
    background: linear-gradient(180deg, #f9fcfa, #ffffff) !important;
    border-bottom: 1px solid #e5eee8 !important;
}

.map-panel-header h2 {
    color: var(--odk-dash-ink) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
}

.country-code {
    background: var(--odk-dash-green-dark) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.country-info,
.map-data-note {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.map-help {
    background: #f4faf6 !important;
    border-top: 1px solid #e5eee8 !important;
}

.map-help span {
    color: var(--odk-dash-green) !important;
    font-weight: 900 !important;
}

.map-canvas-wrap {
    min-height: 680px !important;
    overflow: hidden !important;
}

.africa-map-canvas {
    min-height: 680px !important;
    height: 100% !important;
    background: #eaf2ed !important;
}

.leaflet-container {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.leaflet-popup-content-wrapper {
    border-radius: 8px !important;
    box-shadow: 0 16px 38px rgba(15, 70, 34, .18) !important;
}

.leaflet-control-layers,
.leaflet-bar a {
    border-color: #cfe0d5 !important;
}

@media (max-width: 1100px) {
    .report-layout,
    .map-shell,
    .selected-project-summary {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .project-list-panel {
        position: static !important;
        max-height: none !important;
    }
}

@media (max-width: 760px) {
    .detail-tabs {
        width: 100% !important;
    }

    .detail-tabs button {
        flex: 1 1 0 !important;
        justify-content: center !important;
    }

    .form-view-table td:first-child {
        width: 44% !important;
    }

    .map-canvas-wrap,
    .africa-map-canvas {
        min-height: 520px !important;
    }
}

/* ===============================
   Full Workspace Responsive Layout
   Keep all ODK pages full-width like the deployed forms page
   =============================== */
html,
body,
#__next,
.odk-shell {
    width: 100% !important;
    min-width: 0 !important;
}

.odk-shell {
    grid-template-columns: 64px 244px minmax(0, 1fr) !important;
}

.bodylayout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 22px 28px !important;
    overflow-x: hidden !important;
}

.bodylayout > *,
.workspace-page,
.dashboard-page,
.odk-dashboard,
.report-page,
.map-workspace,
.submissions-dashboard-page,
.forms-workspace-page,
.team-members-page {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.workspace-page,
.dashboard-page,
.report-page,
.map-workspace,
.submissions-dashboard-page {
    display: grid !important;
    gap: 18px !important;
    align-content: start !important;
}

.page-heading,
.workspace-header,
.report-header,
.map-header,
.dashboard-panel,
.workspace-panel,
.project-data-panel,
.map-shell,
.dashboard-table-wrap,
.professional-list-table,
.custom-table {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.dashboard-metrics,
.map-summary-grid,
.workspace-header-metrics {
    width: 100% !important;
}

.dashboard-grid-two,
.submission-review-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(420px, .75fr) !important;
}

.odk-dashboard > .dashboard-grid-two:first-of-type {
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr) !important;
}

.report-layout {
    width: 100% !important;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
    align-items: start !important;
}

.project-list-panel {
    width: 100% !important;
}

.project-data-panel {
    min-width: 0 !important;
}

.selected-project-summary {
    width: 100% !important;
}

.form-response-section,
.project-response-table-wrap,
.dashboard-table-wrap {
    min-width: 0 !important;
}

.project-response-table,
.responsive-table,
.odk-table,
.professional-list-table {
    min-width: 100% !important;
}

.map-shell {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
    min-height: calc(100vh - 280px) !important;
}

.map-canvas-wrap,
.africa-map-canvas {
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100vh - 300px) !important;
}

.africa-map-canvas .leaflet-container,
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
}

.workspace-panel,
.professional-list-table,
.custom-table {
    overflow-x: auto !important;
}

.professional-list-table .custom-row:not(.custom-row-header),
.professional-list-table .custom-row-header {
    min-width: 980px !important;
}

.submission-detail-panel,
.dashboard-panel,
.project-data-panel,
.map-panel {
    min-width: 0 !important;
}

.submission-json,
.form-view-panel,
.table-cell-content {
    max-width: 100% !important;
}

@media (min-width: 1600px) {
    .bodylayout {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }

    .dashboard-metrics,
    .map-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }

    .report-layout {
        grid-template-columns: 360px minmax(0, 1fr) !important;
    }

    .map-shell {
        grid-template-columns: 390px minmax(0, 1fr) !important;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid-two,
    .submission-review-grid,
    .report-layout,
    .map-shell {
        grid-template-columns: 1fr !important;
    }

    .project-list-panel {
        position: static !important;
        max-height: none !important;
    }

    .map-canvas-wrap,
    .africa-map-canvas {
        min-height: 620px !important;
    }
}

@media (max-width: 900px) {
    .odk-shell {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    }

    .bodylayout {
        grid-column: 1 !important;
        padding: 14px !important;
        overflow-x: hidden !important;
    }

    .dashboard-hero-panel,
    .workspace-header,
    .report-header,
    .map-header,
    .selected-project-summary,
    .panel-title-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .dashboard-metrics,
    .map-summary-grid,
    .summary-pill-grid,
    .selected-analysis-summary {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .bodylayout {
        padding: 10px !important;
    }

    .page-heading,
    .workspace-header,
    .report-header,
    .map-header,
    .dashboard-panel,
    .project-data-panel {
        padding: 14px !important;
    }

    .dashboard-metrics,
    .map-summary-grid,
    .summary-pill-grid,
    .selected-analysis-summary {
        grid-template-columns: 1fr !important;
    }

    .map-canvas-wrap,
    .africa-map-canvas {
        min-height: 520px !important;
    }

    .topbar-actions {
        display: none !important;
    }
}

/* ===============================
   Project Data Header Fix
   Keep selected-project metrics compact and horizontal
   =============================== */
.report-page .project-data-panel {
    display: grid !important;
    gap: 16px !important;
}

.report-page .selected-project-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 18px !important;
    min-height: 0 !important;
    padding: 0 0 14px !important;
    margin-bottom: 0 !important;
}

.report-page .selected-project-summary > div:first-child {
    min-width: 0 !important;
}

.report-page .selected-project-summary h3 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
}

.report-page .selected-project-summary p {
    max-width: 760px !important;
    margin-top: 6px !important;
}

.report-page .summary-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(118px, 148px)) !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

.report-page .summary-pill-grid div {
    min-height: 74px !important;
    padding: 13px 14px !important;
    border-radius: 8px !important;
    background: #f8fbf9 !important;
    box-shadow: none !important;
}

.report-page .summary-pill-grid div::after {
    display: none !important;
}

.report-page .summary-pill-grid strong {
    margin: 0 0 5px !important;
    font-size: 25px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.report-page .summary-pill-grid span {
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .06em !important;
}

.report-page .form-response-section {
    margin-top: 0 !important;
}

.report-page .form-response-header {
    min-height: 0 !important;
}

.report-page .project-response-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1320px) {
    .report-page .selected-project-summary {
        grid-template-columns: 1fr !important;
    }

    .report-page .summary-pill-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
        width: 100% !important;
    }
}

@media (max-width: 720px) {
    .report-page .summary-pill-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===============================
   Submission Filters
   =============================== */
.submission-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 12px !important;
    margin: 12px 0 14px !important;
    border: 1px solid #d8ebe0 !important;
    border-radius: 8px !important;
    background: #f8fbf9 !important;
}

.submission-filter-bar label {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.submission-filter-bar label span {
    color: #425866 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.submission-filter-bar select {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 34px 8px 10px !important;
    border: 1px solid #E6D9CD !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #2A160E !important;
    font-size: 14px !important;
    outline: none !important;
}

.submission-filter-bar select:focus {
    border-color: #4E2310 !important;
    box-shadow: 0 0 0 3px rgba(78, 35, 16, .12) !important;
}

.submission-filter-bar .filter-reset-button {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .submission-filter-bar {
        grid-template-columns: 1fr !important;
    }
}

/* ===============================
   ODK Sahel Visual Polish
   Shared finishing layer for copied ODK pages.
   =============================== */
.workspace-page,
.dashboard-page,
.report-page,
.map-workspace,
.submissions-dashboard-page,
.forms-workspace-page,
.team-members-page {
    --odk-sahel-brown: #4E2310;
    --odk-sahel-brown-dark: #351407;
    --odk-sahel-green: #7A8C2E;
    --odk-sahel-green-dark: #5E6D20;
    --odk-sahel-gold: #D4A84B;
    --odk-sahel-bg: #f4f7f6;
    --odk-sahel-card: #ffffff;
    --odk-sahel-soft: #F7FAEF;
    --odk-sahel-line: #DDE7DF;
    --odk-sahel-muted: #607268;
    --odk-sahel-ink: #17231c;
}

.workspace-page .workspace-header,
.dashboard-page .page-heading,
.report-page .report-header,
.map-workspace .map-header {
    border: 1px solid var(--odk-sahel-line) !important;
    border-left: 4px solid var(--odk-sahel-green) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff, #fbfdfb) !important;
    box-shadow: 0 14px 34px rgba(23, 35, 28, .06) !important;
}

.workspace-page .workspace-eyebrow,
.dashboard-page .page-heading > div > span,
.report-page .report-eyebrow,
.map-workspace .map-eyebrow {
    color: var(--odk-sahel-green-dark) !important;
    letter-spacing: .08em !important;
}

.workspace-page .workspace-header h2,
.dashboard-page .page-heading h1,
.dashboard-page .page-heading h2,
.report-page .report-header h2,
.map-workspace .map-header h1 {
    color: var(--odk-sahel-ink) !important;
    font-weight: 900 !important;
}

.workspace-page .workspace-header p,
.dashboard-page .page-heading p,
.dashboard-page .panel-title-row p,
.report-page .report-header p,
.map-workspace .map-subtitle,
.empty-state-panel p {
    color: var(--odk-sahel-muted) !important;
}

.workspace-page .metric-card,
.dashboard-page .metric-tile,
.dashboard-page .selected-analysis-summary div,
.report-page .summary-pill-grid div,
.map-workspace .map-summary-grid > div {
    border: 1px solid var(--odk-sahel-line) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff, var(--odk-sahel-soft)) !important;
    box-shadow: none !important;
}

.workspace-page .metric-card span,
.dashboard-page .metric-tile strong,
.dashboard-page .selected-analysis-summary strong,
.report-page .summary-pill-grid strong,
.map-workspace .map-summary-grid strong {
    color: var(--odk-sahel-green) !important;
}

.workspace-page .workspace-panel,
.dashboard-page .dashboard-panel,
.report-page .project-data-panel,
.report-page .form-response-section,
.map-workspace .map-panel,
.map-workspace .map-shell,
.custom-table,
.records-table-wrapper,
.response-table-wrapper,
.dashboard-table-wrap,
.project-response-table-wrap {
    border: 1px solid var(--odk-sahel-line) !important;
    border-radius: 8px !important;
    background: var(--odk-sahel-card) !important;
    box-shadow: 0 10px 26px rgba(23, 35, 28, .04) !important;
}

.tab {
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--odk-sahel-line) !important;
    background: #FBFCF8 !important;
    padding: 10px 14px !important;
}

.tab button,
.tablinks {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #425866 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    padding: 7px 12px !important;
}

.tab button:hover,
.tab button.active,
.tablinks:hover,
.tablinks.active {
    border-color: var(--odk-sahel-line) !important;
    background: #ffffff !important;
    color: var(--odk-sahel-green-dark) !important;
}

.tab .material-icons-round,
.dashboard-action .material-icons-round,
.button-primary .material-icons-round,
.button-secondary .material-icons-round,
.previewbtn .material-icons-round,
.editbtn .material-icons-round,
.sharebtn .material-icons-round,
.deploybtn .material-icons-round,
.Deletebtn .material-icons-round,
.odk-action-btn .material-icons-round,
.odk-data-action .material-icons-round {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: 18px !important;
    line-height: 18px !important;
}

.records-table,
.response-table,
.odk-table,
.form-view-table,
.project-response-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    color: var(--odk-sahel-ink) !important;
}

.records-table th,
.records-table td,
.response-table th,
.response-table td,
.odk-table th,
.odk-table td,
.form-view-table th,
.form-view-table td,
.project-response-table th,
.project-response-table td {
    border-bottom: 1px solid #E7EEE9 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
}

.records-table th,
.response-table th,
.odk-table th,
.form-view-table th,
.project-response-table th,
.custom-row-header {
    background: #F7F9F5 !important;
    color: #425866 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.records-table tbody tr:hover,
.response-table tbody tr:hover,
.odk-table tbody tr:hover,
.form-view-table tbody tr:hover,
.project-response-table tbody tr:hover,
.custom-row:not(.custom-row-header):hover {
    background: #F8FBF9 !important;
}

.custom-table {
    display: grid !important;
    overflow-x: auto !important;
    padding: 0 !important;
}

.custom-row {
    border-bottom: 1px solid #E7EEE9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.custom-row:last-child {
    border-bottom: 0 !important;
}

.custom-name,
.records-table strong,
.response-table strong,
.odk-table strong {
    color: var(--odk-sahel-ink) !important;
    font-weight: 900 !important;
}

.custom-name:hover {
    color: var(--odk-sahel-green-dark) !important;
}

.status-chip,
.form-status,
.severity-pill.info {
    border: 1px solid rgba(122, 140, 46, .26) !important;
    background: #F2F7E8 !important;
    color: var(--odk-sahel-green-dark) !important;
}

.button-primary,
.savebtn,
.deploybtn,
.odk-data-action {
    border-color: var(--odk-sahel-green) !important;
    background: var(--odk-sahel-green) !important;
    color: #ffffff !important;
}

.button-primary:hover,
.savebtn:hover,
.deploybtn:hover,
.odk-data-action:hover {
    border-color: var(--odk-sahel-green-dark) !important;
    background: var(--odk-sahel-green-dark) !important;
}

.button-secondary,
.previewbtn,
.editbtn,
.sharebtn,
.odk-action-btn,
.table-action-button {
    border: 1px solid var(--odk-sahel-line) !important;
    background: #ffffff !important;
    color: var(--odk-sahel-brown) !important;
}

.previewbtn:hover,
.editbtn:hover,
.sharebtn:hover,
.odk-action-btn:hover,
.table-action-button:hover {
    border-color: rgba(122, 140, 46, .35) !important;
    background: #F7FAEF !important;
    color: var(--odk-sahel-green-dark) !important;
}

.Deletebtn,
.odk-action-archive {
    border-color: #F2B8B5 !important;
    background: #FFF4F2 !important;
    color: #B42318 !important;
}

.dashboard-action {
    border-color: var(--odk-sahel-line) !important;
    background: #ffffff !important;
}

.dashboard-action > .material-icons-round {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #F2F7E8 !important;
    color: var(--odk-sahel-green-dark) !important;
    font-size: 20px !important;
    line-height: 38px !important;
}

.dashboard-action:hover > .material-icons-round {
    background: var(--odk-sahel-green) !important;
    color: #ffffff !important;
}

.empty-state-panel,
.dashboard-empty-state,
.empty-panel {
    border-style: dashed !important;
    background: #FBFDFB !important;
}

.empty-state-panel > .material-icons-round {
    display: inline-grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    background: #F2F7E8 !important;
    color: var(--odk-sahel-green-dark) !important;
    font-size: 24px !important;
}