textarea{
    resize: none;
}

#address{
    height: 108px;
}

#uploadPhoto{
    width: 245px;
    height: 245px;
}

.address-value {
    text-transform: uppercase;
}

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

.logo-header {
    width: 100%;
    gap: 18px;
}


.logo-item {
    width: 95px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-logo {
    display: block;
    object-fit: contain;
}

/* Santiago City */
.logo-item:first-child .header-logo {
    width: 90px !important;
    height: 90px !important;
}

/* AgriSubsidy */
.logo-item:nth-child(2) .header-logo {
    width: 110px !important;
    height: 110px !important;
}


/*==============================
        LOGIN PAGE
===============================*/

.login-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    font-family:'Source Sans Pro',sans-serif;

    background:
        linear-gradient(
            rgba(255,255,255,.65),
            rgba(255,255,255,.65)
        ),
        url("../img/bg.png.jpg") center center/cover no-repeat;
}

/*==============================
        LOGIN BOX
===============================*/

.login-box{
    width:100%;
    max-width:420px;
}

.login-box .card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
}


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

.login-card-body{
    padding:40px 35px;
    background:#fff;
}

/*==============================
        LOGO
===============================*/

.login-logo{
    margin-bottom:10px;
}

.login-logo img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:50%;
    box-shadow:0 5px 15px rgba(220,53,69,.25);
}

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

.login-box-msg{
    font-size:30px;
    font-weight:700;
    color:#087f23;
    text-align:center;
    margin-bottom:8px;
}

.login-subtitle{
    text-align:center;
    color:#6c757d;
    margin-bottom:30px;
    font-size:15px;
}

/*==============================
        INPUTS
===============================*/

.input-group {
    width: 100%;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}


/*==============================
        TEXT INPUT
===============================*/

.input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;

    height: 52px;

    padding: 0 15px;

    border: 1px solid #dee2e6;
    border-right: none;

    border-radius: 12px 0 0 12px !important;

    box-shadow: none;
    font-size: 15px;

    box-sizing: border-box;
}


/*==============================
        INPUT FOCUS
===============================*/

.input-group > .form-control:focus {
    border-color: #6c757d;

    box-shadow:
        0 0 0 0.2rem rgba(108, 117, 125, 0.15);

    outline: none;

    z-index: 2;
}


/*==============================
        INPUT APPEND
===============================*/

.input-group-append {
    display: flex;
    flex-shrink: 0;
    margin-left: 0 !important;
}


/*==============================
        ICON BOX
===============================*/

.input-group-append .input-group-text {
    width: 55px;
    min-width: 55px;
    height: 52px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #6c757d !important;
    color: #fff !important;

    border: 1px solid #6c757d !important;

    border-radius: 0 12px 12px 0 !important;

    box-sizing: border-box;
}


/*==============================
        PASSWORD EYE BUTTON
===============================*/

.input-group-append .btn {
    width: 55px;
    min-width: 55px;
    height: 52px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #6c757d !important;
    color: #fff !important;

    border: 1px solid #6c757d !important;

    border-radius: 0 12px 12px 0 !important;

    box-shadow: none !important;
}


/*==============================
        PASSWORD EYE HOVER
===============================*/

.input-group-append .btn:hover,
.input-group-append .btn:focus,
.input-group-append .btn:active {
    background: #5a6268 !important;
    color: #fff !important;

    border-color: #5a6268 !important;

    box-shadow: none !important;
}


/*==============================
        ICON
===============================*/

.input-group-text .fas,
.input-group-text .far,
.input-group-text .fa,
.input-group-append .btn .fas,
.input-group-append .btn .far,
.input-group-append .btn .fa {
    font-size: 16px;
    color: #fff !important;
}

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

.btn-primary{
    background:#36f806e2;
    border:none;
    border-radius:12px;
    height:52px;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.btn-primary:hover{
    background:#2e7d32;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(46,125,50,.25);
}

/*==============================
        LINKS
===============================*/

.text-center a{
    font-weight:600;
    text-decoration:none;
}

.text-center a:hover{
    text-decoration:underline;
}

/*==============================
        ALERT
===============================*/

.alert,
.message{
    border-radius:12px;
    font-size:14px;
}

/*==============================
        RESPONSIVE
===============================*/

@media (max-width:768px){

    .login-page{
        padding:15px;
    }

    .login-card-body{
        padding:30px 25px;
    }

    .login-logo img{
        width:75px;
        height:75px;
    }

    .login-box-msg{
        font-size:26px;
    }

}

@media (max-width:576px){

    .login-box{
        max-width:100%;
    }

    .login-card-body{
        padding:25px 20px;
    }

    .login-logo img{
        width:65px;
        height:65px;
    }

    .login-box-msg{
        font-size:24px;
    }

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

    .form-control{
        height:48px;
        font-size:14px;
    }

    .input-group-text{
        width:50px;
    }

    .btn-primary{
        height:48px;
        font-size:15px;
    }

}

@media (max-width:360px){

    .login-card-body{
        padding:20px 15px;
    }

    .login-box-msg{
        font-size:22px;
    }

}
    

/*==================================
        REGISTRATION PAGE
==================================*/

.register-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    font-family:'Source Sans Pro',sans-serif;

    background:
        linear-gradient(
            rgba(255,255,255,.60),
            rgba(255,255,255,.60)
        ),
        url("../img/bg.png.jpg") center center/cover no-repeat;
}

/* ============================================================
   REGISTRATION REQUEST REAL-TIME TIMESTAMP
   ============================================================ */
.realtime-registration-time {
    font-weight: 600;
    white-space: nowrap;
}

.exact-registration-time {
    font-size: 11px;
    margin-top: 2px;
}

/*==================================
        REGISTER BOX
==================================*/

.register-box{
    width:100%;
    max-width:450px;
    margin-top:40px;
}

.register-box .card{
    border:none;
    border-radius:16px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.register-box .card::before{
    content:"";
    display:block;
    height:5px;
    background:#087f23;
}

.register-card-body{
    padding:30px;
}

/*==================================
        LOGO
==================================*/

.register-logo{
    text-align:center;
    margin-bottom:10px;
}

.register-logo img{
    width:70px;
    height:70px;
    border-radius:50%;
    box-shadow:0 6px 15px rgba(220,53,69,.20);
}

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

.register-box-msg{
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:#087f23;
    margin-bottom:5px;
}

.register-subtitle{
    text-align:center;
    color:#6c757d;
    font-size:14px;
    margin-bottom:20px;
}

/*==================================
        LABELS
==================================*/

.register-card-body label{
    font-size:14px;
    font-weight:600;
    color:#495057;
    margin-bottom:5px;
}

/*==================================
        REGISTRATION INPUTS
==================================*/

.register-card-body .input-group {
    width: 100%;
    margin-bottom: 18px;

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}


/*==================================
        TEXT INPUT
==================================*/

.register-card-body .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;

    height: 44px;

    padding: 0 18px;

    border: 1px solid #dee2e6;
    border-right: none;

    border-radius: 8px 0 0 8px !important;

    background: #fff;

    font-size: 14px;

    box-shadow: none;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/*==================================
        INPUT FOCUS
==================================*/

.register-card-body .input-group > .form-control:focus {
    border-color: #6c757d !important;

    box-shadow:
        0 0 0 .15rem rgba(108, 117, 125, .15) !important;

    outline: none;

    z-index: 2;
}


/*==================================
        INPUT APPEND
==================================*/

.register-card-body .input-group-append {
    display: flex;
    flex-shrink: 0;

    margin-left: 0 !important;
}


/*==================================
        GREY ICON BOX
==================================*/

.register-card-body .input-group-append .input-group-text {
    width: 55px;
    min-width: 55px;

    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #565858 !important;

    color: #fff !important;

    border: 1px solid #6c757d !important;

    border-radius: 0 8px 8px 0 !important;

    box-sizing: border-box;
}


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

.register-card-body .input-group-append .btn {
    width: 55px;
    min-width: 55px;

    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #6c757d !important;

    color: #fff !important;

    border: 1px solid #6c757d !important;

    border-radius: 0 8px 8px 0 !important;

    box-shadow: none !important;

    outline: none !important;
}


/*==================================
        PASSWORD BUTTON HOVER
==================================*/

.register-card-body .input-group-append .btn:hover,
.register-card-body .input-group-append .btn:focus,
.register-card-body .input-group-append .btn:active {
    background: #6d6e6e !important;

    color: #fff !important;

    border-color: #5a6268 !important;

    box-shadow: none !important;
}


/*==================================
        ICONS
==================================*/

.register-card-body .input-group-text .fas,
.register-card-body .input-group-text .far,
.register-card-body .input-group-text .fa,

.register-card-body .input-group-append .btn .fas,
.register-card-body .input-group-append .btn .far,
.register-card-body .input-group-append .btn .fa {
    font-size: 16px;

    color: #fff !important;
}


/*==================================
        TEXTAREA
==================================*/

.register-card-body textarea.form-control {
    min-height: 90px;
    height: auto;

    border-radius: 8px !important;
}


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

.register-card-body select.form-control {
    cursor: pointer;

    border-radius: 8px !important;
}

/*==================================
        BUTTONS
==================================*/

.register-card-body .btn{
    height:44px;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}

.register-card-body .btn-primary,
.register-card-body .btn-success{
    background:#568aec;
    border:none;
}

.register-card-body .btn-primary:hover,
.register-card-body .btn-success:hover{
    background:#22cf31;
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(220,53,69,.25);
}

/*==================================
        LINKS
==================================*/

.register-card-body a{
    font-weight:600;
    text-decoration:none;
}

.register-card-body a:hover{
    text-decoration:underline;
}

/*==================================
        ALERTS
==================================*/

.register-card-body .alert,
.register-card-body .message{
    border-radius:8px;
    font-size:14px;
}

/*==================================
        SPACING
==================================*/

.register-card-body .mb-3{
    margin-bottom:15px !important;
}

.register-card-body .row{
    margin-bottom:0;
}

/*==================================
        RESPONSIVE
==================================*/

@media (max-width:768px){

    .register-box{
        max-width:550px;
    }

    .register-card-body{
        padding:25px;
    }

    .register-box-msg{
        font-size:22px;
    }

    .register-logo img{
        width:60px;
        height:60px;
    }

}

@media (max-width:576px){

    .register-page{
        padding:15px;
    }

    .register-box{
        max-width:100%;
    }

    .register-card-body{
        padding:20px;
    }

    .register-box-msg{
        font-size:20px;
    }

    .register-subtitle{
        font-size:13px;
    }

    .register-card-body .form-control,
    .register-card-body .btn{
        height:42px;
        font-size:14px;
    }

}

@media (max-width:360px){

    .register-card-body{
        padding:15px;
    }

    .register-logo img{
        width:55px;
        height:55px;
    }

    .register-box-msg{
        font-size:18px;
    }

}
/* ============================================================
   REGISTRATION INPUTS
============================================================ */

#registration-form .form-control {
    height: 48px;
}


/* ============================================================
   INVALID INPUT
============================================================ */

#registration-form .form-control.is-invalid {
    border: 1px solid #dc3545 !important;

    box-shadow:
        0 0 0 0.15rem rgba(220, 53, 69, 0.15) !important;
}


/* ============================================================
   INVALID INPUT FOCUS
============================================================ */

#registration-form .form-control.is-invalid:focus {

    border-color: #dc3545 !important;

    box-shadow:
        0 0 0 0.2rem rgba(220, 53, 69, 0.20) !important;
}


/* ============================================================
   INVALID INPUT GROUP ICON
============================================================ */

#registration-form
.input-group:has(.form-control.is-invalid)
.input-group-text {

    border-color: #dc3545 !important;

    color: #dc3545 !important;

}


/* ============================================================
   INVALID PASSWORD BUTTON
============================================================ */

#registration-form
.input-group:has(.form-control.is-invalid)
.password-toggle {

    border-color: #dc3545 !important;

    color: #dc3545 !important;

}


/* ============================================================
   REGISTRATION MODAL
============================================================ */

#registrationErrorModal .modal-content {

    border: none;

    border-radius: 12px;

    overflow: hidden;

}


#registrationErrorModal .modal-header {

    border-bottom: none;

}


#registrationErrorModal .modal-footer {

    border-top: 1px solid #eeeeee;

}


/* ===========================
   SIDEBAR
=========================== */

.main-sidebar{
    background:#ffffff !important;
    border-right:1px solid #dee2e6;
    box-shadow:3px 0 12px rgba(0,0,0,.08);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    
}
.main-sidebar .sidebar::-webkit-scrollbar{
    display: none;
}

/* ===========================
   BRAND
=========================== */

.brand-link{
    background:#087f23 !important;
    border-bottom:none;
}

.brand-link .brand-text{
    color:#ffffff !important;
    font-weight:600;
    font-size:28px;
}

.brand-image{
    border-radius:50%;
}

/* ===========================
   USER PANEL
=========================== */

.user-panel{
    border-bottom:1px solid #e9ecef;
}

.user-panel .info a{
    color:#343a40 !important;
    font-weight:600;
}

/* ===========================
   NAVIGATION
=========================== */

.nav-sidebar{
    margin-top:10px;
}

.nav-sidebar .nav-item{
    margin-bottom:4px;
}

.nav-sidebar .nav-link{
    color:#495057 !important;
    border-radius:10px;
    margin:3px 10px;
    padding:12px 15px;
    transition:all .25s ease;
}

.nav-sidebar .nav-link p{
    color:#495057 !important;
    font-weight:500;
}

.nav-sidebar .nav-icon{
    color:#6c757d !important;
    font-size:17px;
}

/* Hover */

.nav-sidebar .nav-link:hover{
    background:#f8f9fa;
}

.nav-sidebar .nav-link:hover p,
.nav-sidebar .nav-link:hover .nav-icon{
    color:#087f23 !important;
}

/* Active */

.nav-sidebar .nav-link.active{
    background:#087f23 !important;
    box-shadow:0 6px 12px rgba(220,53,69,.25);
}

.nav-sidebar .nav-link.active p,
.nav-sidebar .nav-link.active .nav-icon{
    color:#ffffff !important;
}

/* ===========================
   LOGOUT
=========================== */

.logout-link{
    color:#087f23 !important;
}

.logout-link .nav-icon,
.logout-link p{
    color:#dc3545 !important;
}

.logout-link:hover{
    background: rgba(220, 53, 69, 0.15) !important;
}

.logout-link:hover .nav-icon,
.logout-link:hover p{
    color:#fff !important;
}

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

@media(max-width:768px){

    .nav-sidebar .nav-link{
        padding:10px 15px;
    }

    .brand-link .brand-text{
        font-size:22px;
    }

}




/* ======================================
   NAVBAR DESIGN
====================================== */

.main-header {
    background: #087f23 !important;
    border-bottom: 4px solid #A8D5BA;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    height: 65px;
}

/* Navbar Links */
.main-header .nav-link {
    color: #ffffff !important;
    font-size: 18px;
    transition: all 0.3s ease;
}

/* Circular Icon Buttons */
.main-header .nav-link i {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Hover Effect */
.main-header .nav-link:hover i {
    background: rgba(255, 255, 255, 0.2);
    color: #F4F4F4;
    transform: scale(1.08);
}

/* Active Click */
.main-header .nav-link:focus {
    outline: none;
    box-shadow: none;
}

/* Space Between Right Icons */
.main-header .navbar-nav .nav-item {
    margin-left: 8px;
}

/* Left Menu Button */
.main-header .navbar-nav:first-child .nav-item {
    margin-right: 8px;
}

/* Navbar Background */
.navbar-white {
    background: #087f23 !important;
}

/* Override Bootstrap Primary */
.bg-primary {
    background: #087f23 !important;
}

/* Smooth Transition */
.main-header,
.main-header .nav-link,
.main-header .nav-link i {
    transition: all 0.3s ease;
}


/*==================
side-bar logout part
====================*/

.control-sidebar{
     background: #087f23 !important;
    width: 280px !important;
    border-left: 4px solid #A8D5BA;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.12);
}

.control-sidebar-content {
    padding: 25px !important;
}

/* Sidebar Links */

.control-sidebar-content a {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #C85C5C;
    font-size: 16px;
    font-weight: 600;

    background: #FFFFFF;
    padding: 14px 16px;
    border-radius: 12px;

    transition: all .3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* Icons */

.control-sidebar-content a i {
    width: 36px;
    height: 36px;
    line-height: 36px;

    text-align: center;

    border-radius: 50%;

    background: #FDECEC;
    color: #C85C5C;

    transition: .3s;
}

/* Hover */

.control-sidebar-content a:hover {
    background: #C85C5C;
    color: #FFFFFF;
    transform: translateX(-6px);
}

.control-sidebar-content a:hover i {
    background: #FFFFFF;
    color: #4E944F;
}

/* Space Between Menu Items */

.control-sidebar-content .mb-4 {
    margin-bottom: 18px !important;
}

/* Sidebar Scroll */

.control-sidebar::-webkit-scrollbar {
    width: 6px;
}

.control-sidebar::-webkit-scrollbar-thumb {
    background: #C85C5C;
    border-radius: 20px;
}

.control-sidebar::-webkit-scrollbar-track {
    background: transparent;
}


/* ===================
   Beneficiaries
======================*/

.content-wrapper{
    background:#F8F9FA !important;
}

.content{
    padding:20px;
}

.card{
    border:none;
    border-radius:18px;
    background:#FFFFFF;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    overflow:hidden;
}

/* Card Header */

.card-header{
    background:#FFFFFF !important;
    border-bottom:2px solid #A8D5BA;
    padding:18px 20px;
}

.card-title{
    color: #000000;
    font-size:22px;
    font-weight:700;
}


.card-tools a{
    display:flex;
    justify-content:center;
    align-items:center;

    width:38px;
    height:38px;

    border-radius:50%;

    background:#087f23;
    color:#FFFFFF !important;

    transition:.3s;
}

.card-tools a:hover{
    background:#A8D5BA;
    color:#FFFFFF !important;
    transform:rotate(90deg);
    text-decoration:none;
}

/* ============================================================
   TABLE
============================================================ */

.table {
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 0;
}


 /* ============================================================
    TABLE BASE
 ============================================================ */

.table {
    width: 100% !important;
    max-width: 100% !important;

    margin-bottom: 0;

    background: #FFFFFF;

    border-radius: 12px;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

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


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

.table thead {
    background: #087f23;
}

.table thead th {
    color: #FFFFFF;
    background: #087f23;

    border: none !important;

    font-weight: 600;
    font-size: 13px;

    text-align: center;
    vertical-align: middle;

    padding: 13px 12px;

    white-space: nowrap;

    letter-spacing: 0.2px;
}


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

.table tbody td {
    vertical-align: middle;

    padding: 12px;

    color: #343a40;

    font-size: 13px;

    border-top: 1px solid #F0F0F0;

    background: #FFFFFF;

    /*
     * Allow normal text to wrap.
     */
    white-space: normal;

    overflow-wrap: anywhere;

    word-break: normal;
}


/* ============================================================
   TABLE ROW
============================================================ */

.table tbody tr {
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ============================================================
   TABLE HOVER
============================================================ */

.table-hover tbody tr:hover {
    background: #FDF2F2;
}

.table-hover tbody tr:hover td {
    background: #FDF2F2;
}


/* ============================================================
   TABLE BORDERS
============================================================ */

.table-bordered {
    border: 1px solid #E9ECEF;
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #EEEEEE !important;
}


/* ============================================================
   TABLE RADIUS
============================================================ */

.table thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.table thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}


/* ============================================================
   KEEP HEADER ON ONE LINE
============================================================ */

.table th {
    white-space: nowrap !important;
}


/* ============================================================
   ACTION ELEMENTS
============================================================ */

.table td .badge,
.table td .btn,
.table td .btn-group,
.table td .dropdown,
.table td .dropdown-toggle {
    white-space: nowrap;
}


/* ============================================================
   RESPONSIVE TABLE CONTAINER
============================================================ */

/*
 * THIS IS THE IMPORTANT PART.
 *
 * The container controls horizontal scrolling,
 * NOT the body/page.
 */

.table-responsive {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    border-radius: 12px;

    /*
     * Prevent the table from expanding the page.
     */
    position: relative;
}


/* ============================================================
   RESPONSIVE TABLE SCROLLBAR
============================================================ */

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #F1F1F1;

    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #C8C8C8;

    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #087f23;
}


/* ============================================================
   DATATABLE WRAPPER
============================================================ */

.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.dataTables_wrapper .dataTables_scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

.dataTables_wrapper .dataTables_scrollBody {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto;
}


/* ============================================================
   DATATABLE TABLE
============================================================ */

.dataTables_wrapper table {
    width: 100%;

    margin: 0 !important;
}


/* ============================================================
   DATATABLE TOP CONTROLS
============================================================ */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 12px 0;

    margin: 0;

    display: flex;

    align-items: center;

    flex-wrap: wrap;
}


/* ============================================================
   LENGTH
============================================================ */

.dataTables_wrapper .dataTables_length {
    justify-content: flex-start;
}


/* ============================================================
   SEARCH
============================================================ */

.dataTables_wrapper .dataTables_filter {
    justify-content: flex-end;
}


/* ============================================================
   LABEL
============================================================ */

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    margin: 0;

    color: #495057;

    font-size: 13px;

    font-weight: 500;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;
}


/* ============================================================
   SEARCH INPUT
============================================================ */

.dataTables_wrapper .dataTables_filter input {
    width: 220px;

    max-width: 100%;

    height: 38px;

    margin-left: 8px;

    padding: 7px 13px;

    background: #FFFFFF;

    color: #343a40;

    font-size: 13px;

    border: 1px solid #DDDDDD;

    border-radius: 10px;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ============================================================
   SEARCH FOCUS
============================================================ */

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #087f23;

    box-shadow:
        0 0 0 3px rgba(8, 127, 35, 0.10);
}


/* ============================================================
   LENGTH SELECT
============================================================ */

.dataTables_wrapper .dataTables_length select {
    height: 38px;

    padding: 6px 30px 6px 12px;

    background: #FFFFFF;

    color: #343a40;

    font-size: 13px;

    border: 1px solid #DDDDDD;

    border-radius: 10px;

    outline: none;

    cursor: pointer;

    box-sizing: border-box;
}


/* ============================================================
   LENGTH SELECT FOCUS
============================================================ */

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #087f23;

    box-shadow:
        0 0 0 3px rgba(8, 127, 35, 0.10);
}


/* ============================================================
   DATATABLE INFO
============================================================ */

.dataTables_wrapper .dataTables_info {
    padding: 12px 0;

    color: #6C757D;

    font-size: 12px;
}


/* ============================================================
   PAGINATION
============================================================ */

.dataTables_wrapper .dataTables_paginate {
    padding: 10px 0;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;
}


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

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;

    height: 34px;

    margin: 2px !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #E1E1E1 !important;

    border-radius: 8px !important;

    background: #FFFFFF !important;

    color: #495057 !important;

    font-size: 12px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}


/* ============================================================
   PAGINATION HOVER
============================================================ */

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #FFFFFF !important;
    transform: translateY(-1px);
}


/* ============================================================
   CURRENT PAGE
============================================================ */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #087f23 !important;

    border-color: #087f23 !important;

    color: #FFFFFF !important;

    font-weight: 600;
}


/* ============================================================
   DISABLED
============================================================ */

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #F8F9FA !important;

    border-color: #E9ECEF !important;

    color: #ADB5BD !important;

    cursor: not-allowed;

    transform: none;
}


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

.table thead th:first-child {
    text-align: left;
}

.table thead th:last-child {
    text-align: center;
}


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

.table tbody td:last-child {
    text-align: center;
}


/* ============================================================
   ACTION BUTTONS
============================================================ */

.table tbody td .btn {
    border-radius: 7px;

    font-size: 12px;

    white-space: nowrap;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.table tbody td .btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.10);
}


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

.table tbody td .btn-group {
    display: inline-flex;

    flex-wrap: nowrap;
}


/* ============================================================
   IMAGES
============================================================ */

.table tbody td img {
    max-width: 100%;

    height: auto;
}


/* ============================================================
   FORM CONTROLS
============================================================ */

.table tbody td input,
.table tbody td select,
.table tbody td textarea {
    max-width: 100%;

    box-sizing: border-box;
}


/* ============================================================
   CONTAINER SAFETY
============================================================ */

.container,
.container-fluid,
.card,
.card-body {
    max-width: 100%;
}


/* ============================================================
   PREVENT PAGE HORIZONTAL SCROLL
============================================================ */

html {
    width: 100%;

    max-width: 100%;

    overflow-x: hidden;
}

body {
    width: 100%;

    max-width: 100%;

    overflow-x: hidden;
}


/* ============================================================
   BOOTSTRAP ROW FIX
============================================================ */

.dataTables_wrapper .row {
    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;
}


/* ============================================================
   BOOTSTRAP COLUMNS
============================================================ */

.dataTables_wrapper .row > [class*="col-"] {
    max-width: 100%;
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .table thead th {
        padding: 13px 14px;

        font-size: 13px;
    }

    .table tbody td {
        padding: 12px 14px;

        font-size: 13px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 240px;
    }
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1199px) and (min-width: 992px) {

    .table thead th {
        padding: 12px 10px;
    }

    .table tbody td {
        padding: 11px 10px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 200px;
    }
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;

        justify-content: flex-start;

        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 260px;

        max-width: 100%;

        margin-left: 8px;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate {
        justify-content: center;
    }
}


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

@media (max-width: 768px) {

    /* --------------------------------------------------------
       DO NOT FORCE TABLE TO 650PX
    -------------------------------------------------------- */

    .table {
        width: 100% !important;

        min-width: 0 !important;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .table thead th {
        padding: 10px 8px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       BODY
    -------------------------------------------------------- */

    .table tbody td {
        padding: 10px 8px;

        font-size: 12px;

        white-space: normal;

        overflow-wrap: anywhere;
    }


    /* --------------------------------------------------------
       TABLE RESPONSIVE
    -------------------------------------------------------- */

    .table-responsive {
        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }


    /* --------------------------------------------------------
       DATATABLE CONTROLS
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        padding: 7px 0;
    }


    /* --------------------------------------------------------
       SEARCH LABEL
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_filter label {
        width: 100%;

        display: block;
    }


    /* --------------------------------------------------------
       SEARCH INPUT
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_filter input {
        display: block;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: 38px;

        margin: 7px 0 0 0 !important;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       LENGTH LABEL
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_length label {
        width: 100%;

        display: flex;

        align-items: center;

        flex-wrap: wrap;
    }


    /* --------------------------------------------------------
       LENGTH SELECT
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_length select {
        height: 36px;

        max-width: 100%;
    }


    /* --------------------------------------------------------
       INFO
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_info {
        width: 100%;

        padding: 9px 0;

        text-align: center;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       PAGINATION
    -------------------------------------------------------- */

    .dataTables_wrapper .dataTables_paginate {
        width: 100%;

        justify-content: center;

        padding: 8px 0;

        gap: 3px;
    }


    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 31px;

        height: 31px;

        padding: 5px 7px !important;

        font-size: 11px;
    }
}


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

@media (max-width: 576px) {

    .table thead th {
        padding: 9px 7px;

        font-size: 10px;
    }

    .table tbody td {
        padding: 9px 7px;

        font-size: 11px;
    }


    .dataTables_wrapper .dataTables_filter input {
        height: 36px;

        font-size: 12px;
    }


    .dataTables_wrapper .dataTables_length select {
        height: 36px;

        font-size: 12px;
    }


    .dataTables_wrapper .dataTables_paginate {
        gap: 2px;
    }


    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 29px;

        height: 29px;

        padding: 4px 6px !important;

        border-radius: 7px !important;

        font-size: 10px;
    }
}


/* ============================================================
   VERY SMALL PHONE
============================================================ */

@media (max-width: 400px) {

    .table thead th {
        padding: 8px 6px;

        font-size: 10px;
    }

    .table tbody td {
        padding: 8px 6px;

        font-size: 10px;
    }


    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 27px;

        height: 27px;

        padding: 4px 5px !important;

        font-size: 9px;
    }
}


/* ============================================================
   TOUCH DEVICES
============================================================ */

@media (hover: none) and (pointer: coarse) {

    .table-hover tbody tr:hover td {
        background: #FFFFFF;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        transform: none;
    }

    .table tbody td .btn:hover {
        transform: none;

        box-shadow: none;
    }
}


/* ============================================================
   FOCUS
============================================================ */

.dataTables_wrapper .dataTables_filter input:focus-visible,
.dataTables_wrapper .dataTables_length select:focus-visible,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible {
    outline: 2px solid #087f23;

    outline-offset: 2px;
}


/* ============================================================
   MOBILE ACTION BUTTONS
============================================================ */

@media (max-width: 768px) {

    .table tbody td .btn {
        min-height: 32px;

        padding: 5px 8px;

        font-size: 11px;
    }

    .table tbody td .btn-group {
        white-space: nowrap;
    }
}


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

@media (max-width: 768px) {

    .table tbody td .badge {
        font-size: 10px;

        padding: 4px 6px;

        white-space: nowrap;
    }
}
.page-item.active .page-link{
    background:#087f23;
    border-color:#087f23;
}

.page-link{
    color:#087f23;
}

.page-link:hover{
    background:#FCECEC;
    color:#087f23;
}

.modal-content{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

/* Modal Header */

.modal-header{
    background:#087f23 !important;
    color:#FFFFFF;
    border:none;
}

.modal-header h4{
    font-weight:700;
}

.modal-header .close{
    color:#FFFFFF;
    opacity:1;
}


.modal-body{
    background:#FFFFFF;
    padding:25px;
}

.modal-body label{
    color:#555;
    font-weight:600;
    margin-top:10px;
}

.form-control{
    border-radius:10px;
    border:1px solid #DDDDDD;
    box-shadow:none;
    transition:.3s;
}

.form-control:focus{
    border-color:#A8D5BA;
    box-shadow:0 0 0 .2rem rgba(168,213,186,.25);
}

.btn-primary{
    background:#0ccf06;
    border:none;
    border-radius:10px;
    padding:8px 20px;
}

.btn-primary:hover{
    background:#0ccf06;
}

.btn-default{
    background:#EEEEEE;
    border:none;
    border-radius:10px;
}

.btn-default:hover{
    background:#DDDDDD;
}


.modal-footer{
    border-top:1px solid #EEEEEE;
    background:#FAFAFA;
}


::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#087f23;
    border-radius:20px;
}

.sidebar-logout {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    padding: 0 15px;
}
.registration-header {
    background-color: #019e11 !important;
    color: #fff;
}

.registration-header i {
    color: #fff;
}


.profile-header {
    background:
    linear-gradient(135deg,#198754,#0f5132);
}

.profile-image-wrapper {
    margin-top:-80px;
}

.info-card {
    display:flex;
    align-items:center;
    gap:20px;
    background:white;
    transition:0.3s;
}

.info-card:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,.15)!important;
}

.icon-box {
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;

}
/* =========================================================
   AGRISUBSIDY ANALYTICS
   ========================================================= */

.analytics-page {
    width: 100%;
    min-height: 100vh;
    padding: 20px 30px 40px;
    background: #f5f7f8;
}


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

.analytics-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #17212b;
    font-size: 24px;
    font-weight: 700;
}

.analytics-title i {
    font-size: 24px;
}


/* =========================================================
   MODEL CARDS
   ========================================================= */

.model-card {
    width: 100%;
    height: 125px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
    transition: .2s ease;
}

.model-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .08);
}


/* =========================================================
   MODEL ICON
   ========================================================= */

.model-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    border-radius: 9px;
    font-size: 23px;
}


/* =========================================================
   MODEL TEXT
   ========================================================= */

.model-label {
    margin-bottom: 3px;
    color: #444;
    font-size: 13px;
    font-weight: 600;
}

.model-value {
    color: #17212b;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.model-card small {
    display: block;
    margin-top: 3px;
    color: #555;
    font-size: 12px;
}


/* =========================================================
   CHART ROW
   ========================================================= */

.chart-row {
    margin-top: 18px;
}

/* =========================================================
   AGRISUBSIDY ANALYTICS
   ========================================================= */

.analytics-page {
    width: 100%;
    min-height: 100vh;
    padding: 20px 30px 40px;
    background: #f5f7f8;
}


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

.analytics-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #17212b;
    font-size: 24px;
    font-weight: 700;
}

.analytics-title i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #198754, #20c997);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(25, 135, 84, .20);
}


/* =========================================================
   MODEL CARDS
   ========================================================= */

.model-card {
    position: relative;
    width: 100%;
    min-height: 125px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e8ea;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    transition: all .25s ease;
    overflow: hidden;
}

.model-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -35px;
    bottom: -35px;
    border-radius: 50%;
    background: rgba(25, 135, 84, .05);
}

.model-card:hover {
    transform: translateY(-4px);
    border-color: rgba(25, 135, 84, .25);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
}


/* =========================================================
   MODEL ICON
   ========================================================= */

.model-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf7f0;
    color: #198754;
    border-radius: 14px;
    font-size: 21px;
}


/* =========================================================
   MODEL TEXT
   ========================================================= */

.model-label {
    margin-bottom: 3px;
    color: #7b8794;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.model-value {
    color: #17212b;
    font-size: 25px;
    font-weight: 750;
    line-height: 1.2;
}

.model-card small {
    display: block;
    margin-top: 5px;
    color: #8a969f;
    font-size: 12px;
}


/* =========================================================
   ACTIVE MODEL STATUS
   ========================================================= */

.status-active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.status-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
    background: #198754;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, .12);
}


/* =========================================================
   CHART ROW
   ========================================================= */

.chart-row {
    margin-top: 18px;
}


/* =========================================================
   ANALYTICS PANELS
   ========================================================= */

.analytics-panel {
    width: 100%;
    height: 100%;
    min-height: 430px;
    background: #fff;
    border: 1px solid #e5e8ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    transition: box-shadow .25s ease;
}

.analytics-panel:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}


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

.panel-title {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #edf0f2;
    color: #263238;
    font-size: 15px;
    font-weight: 700;
}

.panel-title i {
    color: #198754;
    font-size: 15px;
}


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

.panel-body {
    width: 100%;
    padding: 20px;
}


/* =========================================================
   CHART CONTAINER
   ========================================================= */

.chart-container {
    position: relative;
    width: 100%;
    height: 340px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   CHART CANVAS
   ========================================================= */

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}


/* =========================================================
   DONUT CHART
   ========================================================= */

#programEffectivenessChart {
    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   RECOMMENDATION SECTION
   ========================================================= */

.recommendation-section {
    width: 100%;
    margin-top: 20px;
}


/* =========================================================
   RECOMMENDATION PANEL
   ========================================================= */

.recommendation-panel {
    min-height: auto;
    height: auto;
}


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

.recommendation-heading,
.recommendation-title {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 16px 20px;

    background: linear-gradient(
        135deg,
        #198754,
        #157347
    ) !important;

    color: #fff !important;
    border-radius: 0;
    border-bottom: none;

    font-size: 15px;
    font-weight: 700;
}

.recommendation-heading i,
.recommendation-title i {
    margin-right: 8px;
    color: #fff;
}


/* =========================================================
   TABLE CONTAINER
   ========================================================= */

.recommendation-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .04);
}


/* =========================================================
   RECOMMENDATION TABLE
   ========================================================= */

.recommendation-table {
    width: 100%;
    margin: 0;
    background: #fff;
    border-collapse: collapse;
    font-size: 13px;
}


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

.recommendation-table th {
    padding: 14px 15px;
    background: #f8faf9 !important;
    color: #52606d !important;
    border: 1px solid #e5e9e7;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35px;
    white-space: nowrap;
}


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

.recommendation-table td {
    padding: 15px;
    background: #fff;
    color: #4a5560;
    border: 1px solid #edf0ef;
    vertical-align: middle;
}

.recommendation-table tbody tr {
    transition: background .2s ease;
}

.recommendation-table tbody tr:hover td {
    background: #f8fbf9;
}


/* =========================================================
   PROGRAM
   ========================================================= */

.recommendation-table td:first-child {
    font-weight: 600;
}

.program-name {
    color: #263238;
    font-weight: 700;
}


/* =========================================================
   CONFIDENCE
   ========================================================= */

.recommendation-table td:nth-child(3) {
    color: #198754;
    font-weight: 700;
    white-space: nowrap;
}

.confidence-value {
    color: #198754;
    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   PREDICTION BADGES
   ========================================================= */

.prediction-effective {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #dff5e8;
    color: #147a45;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.prediction-moderate {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #fff3cd;
    color: #9a6b00;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.prediction-not {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #f8d7da;
    color: #b02a37;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.prediction-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #eef7f2;
    color: #198754;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   TREND BADGES
   ========================================================= */

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.trend-improving {
    background: #dff5e8;
    color: #157347;
}

.trend-declining {
    background: #fde2e2;
    color: #b02a37;
}

.trend-stable {
    background: #e9ecef;
    color: #59636e;
}


/* =========================================================
   ACTION
   ========================================================= */

.action-text {
    color: #59636e;
    line-height: 1.5;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.analytics-empty {
    padding: 45px 20px;
    text-align: center;
    color: #8a969f;
}

.analytics-empty i {
    display: block;
    margin-bottom: 10px;
    color: #adb5bd;
    font-size: 28px;
}

.analytics-empty strong {
    display: block;
    margin-bottom: 5px;
    color: #6c757d;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .model-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .chart-row {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 18px;
        margin-top: 18px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .analytics-page {
        padding: 18px;
    }

    .model-card {
        min-height: 115px;
    }

    .analytics-panel {
        min-height: 400px;
        margin-top: 18px;
    }

    .chart-container {
        height: 315px;
    }

}


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

@media (max-width: 767px) {

    .analytics-page {
        padding: 12px;
    }

    .analytics-title {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .analytics-title i {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .model-card {
        min-height: 105px;
        padding: 14px;
    }

    .model-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;
        font-size: 20px;
    }

    .model-value {
        font-size: 20px;
    }

    .analytics-panel {
        min-height: 370px;
    }

    .panel-title {
        min-height: 55px;
        padding: 14px;
        font-size: 14px;
    }

    .panel-body {
        padding: 15px;
    }

    .chart-container {
        height: 285px;
    }

    .recommendation-heading,
    .recommendation-title {
        min-height: 55px;
        padding: 14px;
        font-size: 14px;
    }

    .recommendation-table {
        min-width: 850px;
    }

    .recommendation-table th,
    .recommendation-table td {
        padding: 11px 12px;
        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .analytics-page {
        padding: 10px;
    }

    .analytics-title {
        font-size: 18px;
    }

    .analytics-title i {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .model-card {
        min-height: 100px;
        padding: 12px;
    }

    .model-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-basis: 40px;
        font-size: 17px;
    }

    .model-label {
        font-size: 11px;
    }

    .model-value {
        font-size: 18px;
    }

    .model-card small {
        font-size: 10px;
    }

    .analytics-panel {
        min-height: 340px;
    }

    .chart-container {
        height: 255px;
    }

}

/* =========================================
   RECEIPT CONFIRMATION
========================================= */

.confirmation-box {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    background: #f8f9fa;
}

.confirmation-header {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
    color: #343a40;
}

.confirmation-content p {
    color: #6c757d;
}

.confirmation-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.confirmation-buttons .btn {
    border-radius: 6px;
    padding: 9px 16px;
}


/* RECEIVED */

.confirmation-success {
    padding: 15px;
    border-radius: 8px;
    background: #d4edda;
    color: #155724;
}

.confirmation-success strong {
    font-size: 16px;
}

.confirmation-success p {
    margin-top: 5px;
    margin-bottom: 3px;
}

.confirmation-success small {
    color: #496b50;
}


/* NOT RECEIVED */

.confirmation-danger {
    padding: 15px;
    border-radius: 8px;
    background: #f8d7da;
    color: #721c24;
}

.confirmation-danger strong {
    font-size: 16px;
}

.confirmation-danger p {
    margin-top: 5px;
    margin-bottom: 3px;
}

.confirmation-danger small {
    color: #8b5559;
}


/* CANCELLED */

.confirmation-cancelled {
    padding: 15px;
    border-radius: 8px;
    background: #e2e3e5;
    color: #383d41;
}

.confirmation-cancelled strong {
    font-size: 16px;
}

.confirmation-cancelled p {
    margin-top: 5px;
}


/* =========================================
   ANNOUNCEMENT HEADER
========================================= */
.announcement-header {
    background: linear-gradient(
        135deg,
        #087f23,
        #16a34a
    );
    border-radius: 14px;
    padding: 28px 32px;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
}
.announcement-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.announcement-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.15);
    padding: 7px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.announcement-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 5px;
}
.announcement-subtitle {
    font-size: 14px;
    opacity: 0.9;
}
.announcement-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    font-size: 30px;
}
/* =========================================
   ANNOUNCEMENT CARD
========================================= */
.announcement-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 5px 18px rgba(0,0,0,0.07);
    height: 100%;
    transition: all 0.25s ease;
}
.announcement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
/* =========================================
   CARD TOP
========================================= */
.announcement-card-top {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}
.announcement-program {
    font-weight: 700;
    font-size: 14px;
    color: #087f23;
    max-width: 65%;
}
/* =========================================
   STATUS
========================================= */
.announcement-status {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.status-upcoming {
    background: #fff3cd;
    color: #856404;
}
.status-ongoing {
    background: #d1fae5;
    color: #047857;
}
.status-completed {
    background: #e5e7eb;
    color: #4b5563;
}
/* =========================================
   CARD BODY
========================================= */
.announcement-card-body {
    padding: 22px;
}
/* =========================================
   TITLE
========================================= */
.announcement-title-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.announcement-bell {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #e8f5e9;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
}
.announcement-title-section h4 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}
.announcement-title-section span {
    font-size: 12px;
}
/* =========================================
   SUBSIDY TYPE
========================================= */
.subsidy-type-box {
    background: #f8faf9;
    border-left: 4px solid #16a34a;
    padding: 12px 15px;
    border-radius: 7px;
    margin-bottom: 18px;
}
.subsidy-type-box .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    margin-bottom: 3px;
}
.subsidy-type-box strong {
    font-size: 16px;
    color: #111827;
}
/* =========================================
   DESCRIPTION
========================================= */
.announcement-description {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.description-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #374151;
}
.announcement-description p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}
/* =========================================
   SCHEDULE GRID
========================================= */
.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.schedule-item {
    display: flex;
    align-items: center;
    padding: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #ffffff;
}
.schedule-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    margin-right: 10px;
    flex-shrink: 0;
}
.date-icon {
    background: #16a34a;
}
.time-icon {
    background: #dc3545;
}
.schedule-content span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 3px;
}
.schedule-content strong {
    display: block;
    font-size: 12px;
    color: #111827;
}
/* =========================================
   COUNTDOWN / STATUS BOXES
========================================= */
.countdown-box {
    display: flex;
    align-items: center;
    padding: 13px 15px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    margin-bottom: 15px;
}
.countdown-icon {
    font-size: 20px;
    color: #f59e0b;
    margin-right: 12px;
}
.countdown-box span {
    display: block;
    font-size: 11px;
    color: #92400e;
}
.countdown-box strong {
    font-size: 13px;
    color: #78350f;
}
.ongoing-box {
    padding: 13px 15px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
}
.ongoing-box span {
    display: block;
    margin-top: 3px;
    margin-left: 22px;
    font-size: 11px;
}
.completed-box {
    padding: 13px 15px;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 12px;
}
/* =========================================
   REMINDER
========================================= */
.reminder-box {
    display: flex;
    gap: 12px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 13px 15px;
}
.reminder-icon {
    color: #dc2626;
    font-size: 18px;
}
.reminder-box strong {
    font-size: 12px;
    color: #991b1b;
}
.reminder-box p {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #7f1d1d;
}
/* =========================================
   FOOTER
========================================= */
.announcement-card-footer {
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.official-label {
    color: #16a34a;
    font-size: 11px;
    font-weight: 600;
}
.announcement-date {
    color: #9ca3af;
    font-size: 10px;
}
/* =========================================
   EMPTY STATE
========================================= */
.no-announcement {
    background: #ffffff;
    border-radius: 14px;
    padding: 60px 20px;
    text-align: center;
    border: 1px solid #e5e7eb;
    box-shadow: 0 5px 18px rgba(0,0,0,0.05);
}
.no-announcement-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
}
.no-announcement h4 {
    font-weight: 700;
    margin-bottom: 8px;
}
.no-announcement p {
    color: #6b7280;
    font-size: 13px;
    margin: 0;
}
/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 768px) {
    .announcement-header {
        padding: 22px;
    }
    .announcement-title {
        font-size: 22px;
    }
    .announcement-icon {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }
    .schedule-grid {
        grid-template-columns: 1fr;
    }
    .announcement-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* =====================================
   DASHBOARD STAT CARDS
===================================== */

.dashboard-stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 25px;
    min-height: 155px;
    color: #fff;
    display: flex;
    align-items: center;
    transition: all .3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.13);
}

.stat-success {
    background: linear-gradient(135deg, #198754, #20c997);
}

.stat-warning {
    background: linear-gradient(135deg, #f59f00, #ffc107);
}

.stat-danger {
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

.stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(0, 255, 47, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin-right: 18px;
    flex-shrink: 0;
}

.stat-content {
    position: relative;
    z-index: 2;
}

.stat-label {
    display: block;
    font-size: 14px;
    opacity: .9;
    margin-bottom: 5px;
}

.stat-content h2 {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 5px;
}

.stat-content small {
    opacity: .85;
}

.stat-decoration {
    position: absolute;
    right: -10px;
    bottom: -25px;
    font-size: 110px;
    opacity: .08;
}


/* =====================================
   DASHBOARD CARDS
===================================== */

.dashboard-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #edf0f3;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    overflow: hidden;
}

.dashboard-card-header {
    background: #00a92a;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f2f5;
}

.dashboard-card-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-card-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    color: #e2e9f0;
}

.dashboard-card-header p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #f9f9f9;
}

.dashboard-card-body {
    padding: 24px;
}

.section-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-icon i {
    font-size: 20px;
    opacity: 1 !important;
}

/* Green chart icon */
.effectiveness-icon {
    color: #00000086 !important;
}

/* Blue registration icon */
.registration-icon {
    color: #0d6efd !important;
}

.analytics-badge,
.request-count {
    font-size: 11px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 20px;
    background: #f1f5ff;
    color: #0d6efd;
}

.fa-chart-pie {
    padding: 7px 12px;
    color: #eceef1;
}

.chart-wrapper {
    position: relative;
    height: 350px;
}


/* =====================================
   FEEDBACK RATING
===================================== */

.rating-box {
    background: linear-gradient(
        135deg,
        #f8faff,
        #ffffff
    );

    border: 1px solid #edf1f7;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.rating-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff3cd;
    color: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rating-label {
    display: block;
    color: #8a94a6;
    font-size: 12px;
}

.rating-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.rating-value small {
    font-size: 13px;
    color: #8a94a6;
}

.rating-stars {
    margin-top: 3px;
}

.rating-stars i {
    color: #dee2e6;
    font-size: 12px;
}

.rating-stars i.active {
    color: #ffc107;
}


/* =====================================
   FEEDBACK LIST
===================================== */

.feedback-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 12px;
    background: #f8f9fa;
}

.feedback-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-icon.positive {
    background: #d1e7dd;
    color: #198754;
}

.feedback-icon.neutral {
    background: #fff3cd;
    color: #ffc107;
}

.feedback-icon.negative {
    background: #f8d7da;
    color: #dc3545;
}

.feedback-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.feedback-info small {
    display: block;
    font-size: 10px;
    color: #8a94a6;
}

.feedback-count {
    font-weight: 700;
    font-size: 14px;
}

.positive-count {
    color: #198754;
}

.neutral-count {
    color: #d39e00;
}

.negative-count {
    color: #dc3545;
}


/* =====================================
   MINI STATISTICS
===================================== */

.mini-statistics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #edf0f3;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mini-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-stat-icon.primary {
    background: #e7f1ff;
    color: #0d6efd;
}

.mini-stat-icon.success {
    background: #d1e7dd;
    color: #198754;
}

.mini-stat span {
    display: block;
    font-size: 10px;
    color: #8a94a6;
}

.mini-stat strong {
    display: block;
    font-size: 18px;
}


/* =====================================
   REGISTRATION TABLE
===================================== */

.dashboard-table {
    border: 0;
}

.dashboard-table thead th {
    background: #f8f9fb;
    border: 0;
    color: #6c757d;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    padding: 15px 18px;
}

.dashboard-table tbody td {
    padding: 16px 18px;
    border-color: #f0f2f5;
    font-size: 13px;
}

.dashboard-table tbody tr {
    transition: background .2s ease;
}

.dashboard-table tbody tr:hover {
    background: #f8faff;
}


/* =====================================
   REQUEST MESSAGE
===================================== */

.request-message {
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e7f1ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.request-message span {
    display: block;
    font-weight: 600;
}

.request-message small {
    display: block;
    color: #8a94a6;
    font-size: 10px;
    margin-top: 2px;
}


/* =====================================
   DATE
===================================== */

.date-text {
    font-weight: 600;
    font-size: 12px;
}


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

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-approved {
    background: #d1e7dd;
    color: #198754;
}

.status-pending {
    background: #fff3cd;
    color: #997404;
}

.status-declined {
    background: #f8d7da;
    color: #b02a37;
}


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

.view-btn {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f1ff;
    color: #0d6efd;
    transition: all .2s ease;
}

.view-btn:hover {
    background: #0d6efd;
    color: #fff;
    transform: translateY(-2px);
}


/* =====================================
   EMPTY STATE
===================================== */

.empty-state {
    text-align: center;
    padding: 50px 20px;
}

.empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 23px;
}

.empty-state h6 {
    font-weight: 700;
    margin-bottom: 5px;
}

.empty-state p {
    color: #8a94a6;
    font-size: 12px;
    margin: 0;
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 767px) {

    .dashboard-stat-card {
        min-height: 135px;
    }

    .stat-content h2 {
        font-size: 28px;
    }

    .dashboard-card-header {
        padding: 16px;
    }

    .dashboard-card-body {
        padding: 16px;
    }

    .analytics-badge,
    .request-count {
        display: none;
    }

    .mini-statistics {
        grid-template-columns: 1fr;
    }

    .chart-wrapper {
        height: 300px;
    }

}

/* =========================================================
   EVALUATION CARD TOOLS
   ========================================================= */

.evaluation-card-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    rotate: none !important;
    animation: none !important;
}


/* =========================================================
   SUBSIDY TYPE DROPDOWN
   ========================================================= */

.evaluation-card-tools .subsidy-type-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    transform: none !important;
    rotate: none !important;
    animation: none !important;
}


/* =========================================================
   SUBSIDY TYPE BUTTON
   ========================================================= */

.evaluation-card-tools .subsidy-type-btn {
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;

    border-radius: 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    position: static !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
    rotate: none !important;
    animation: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* =========================================================
   FILTER ICON
   ========================================================= */

.evaluation-card-tools .subsidy-type-btn i {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    font-size: 13px !important;

    transform: none !important;
}


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

.evaluation-card-tools .subsidy-type-btn:hover {
    transform: none !important;

    box-shadow:
        0 4px 10px rgba(0, 123, 255, 0.15) !important;
}


/* =========================================================
   BUTTON WHEN DROPDOWN IS OPEN
   ========================================================= */

.evaluation-card-tools
.subsidy-type-btn[aria-expanded="true"] {

    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #ffffff !important;

    box-shadow:
        0 4px 12px rgba(0, 123, 255, 0.20) !important;

    transform: none !important;
}


/* =========================================================
   SUBSIDY TYPE DROPDOWN MENU
   ========================================================= */

.evaluation-card-tools .subsidy-type-menu {

    position: absolute !important;

    top: calc(100% + 8px) !important;

    right: 0 !important;
    left: auto !important;
    bottom: auto !important;

    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    padding: 8px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    /* Appearance */

    border: 1px solid #e5e7eb !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.06) !important;

    /* Keep above table */

    z-index: 9999 !important;

    overflow: hidden !important;

    /* Prevent rotation */

    transform: none !important;
    rotate: none !important;
    animation: none !important;

    writing-mode: horizontal-tb !important;

    text-align: left !important;
}


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

.evaluation-card-tools .subsidy-type-header {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    min-height: 46px !important;

    padding: 8px 10px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    color: #141516 !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    transform: none !important;
}


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

.evaluation-card-tools .subsidy-type-header-icon {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 30px !important;

    width: 30px !important;
    height: 30px !important;

    border-radius: 8px !important;

    background: #eef5ff !important;

    color: #007bff !important;

    font-size: 13px !important;

    transform: none !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.evaluation-card-tools
.subsidy-type-menu
.dropdown-divider {

    width: calc(100% - 12px) !important;

    height: 1px !important;

    margin: 6px 6px !important;

    padding: 0 !important;

    border: 0 !important;

    border-top: 1px solid #edf0f2 !important;

    background: transparent !important;
}


/* =========================================================
   SUBSIDY TYPE ITEMS
   ========================================================= */

.evaluation-card-tools
.subsidy-type-menu
.subsidy-type-filter {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 52px !important;

    height: 52px !important;

    padding: 6px 10px !important;

    margin: 2px 0 !important;

    box-sizing: border-box !important;

    border-radius: 9px !important;

    color: #343a40 !important;

    background: transparent !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    transform: none !important;

    rotate: none !important;

    animation: none !important;

    transition:
        background-color 0.15s ease,
        color 0.15s ease !important;
}


/* =========================================================
   ITEM HOVER
   ========================================================= */

.evaluation-card-tools
.subsidy-type-menu
.subsidy-type-filter:hover {

    background: #f6f8fa !important;

    color: #212529 !important;

    text-decoration: none !important;

    transform: none !important;
}


/* =========================================================
   SUBSIDY TYPE ICON
   ========================================================= */

.evaluation-card-tools .subsidy-type-icon {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 36px !important;

    width: 36px !important;
    min-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 12px 0 0 !important;

    padding: 0 !important;

    border-radius: 9px !important;

    font-size: 15px !important;

    line-height: 1 !important;

    transform: none !important;

    rotate: none !important;
}


/* =========================================================
   CORN SEEDS
   ========================================================= */

.evaluation-card-tools
.subsidy-type-icon.corn-seed {

    background: #e9f8ef !important;

    color: #28a745 !important;
}


/* =========================================================
   RICE
   ========================================================= */

.evaluation-card-tools
.subsidy-type-icon.rice {

    background: #fff6df !important;

    color: #e0a000 !important;
}


/* =========================================================
   CLEAR
   ========================================================= */

.evaluation-card-tools
.subsidy-type-icon.clear {

    background: #f1f3f5 !important;

    color: #dc3545 !important;
}


/* =========================================================
   ICONS
   ========================================================= */

.evaluation-card-tools .subsidy-type-icon i {

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: none !important;

    rotate: none !important;
}


/* =========================================================
   OPTION TEXT
   ========================================================= */

.evaluation-card-tools
.subsidy-type-menu
.subsidy-type-text {

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: inherit !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    line-height: 1.3 !important;

    text-align: left !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    transform: none !important;

    rotate: none !important;
}


/* =========================================================
   CLEAR FILTER
   ========================================================= */

.evaluation-card-tools
.subsidy-type-menu
.clear-subsidy-type {

    color: #6c757d !important;
}


.evaluation-card-tools
.subsidy-type-menu
.clear-subsidy-type:hover {

    background: #fff5f5 !important;

    color: #dc3545 !important;
}


.evaluation-card-tools
.subsidy-type-menu
.clear-subsidy-type:hover
.clear {

    background: #fdeaea !important;

    color: #dc3545 !important;
}


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

.evaluation-card-tools .evaluation-download-btn {

    width: auto !important;

    height: 40px !important;

    min-width: 0 !important;

    min-height: 40px !important;

    border-radius: 8px !important;

    overflow: visible !important;

    white-space: nowrap !important;

    padding: 0 16px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    position: static !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    transform: none !important;

    rotate: none !important;

    animation: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* =========================================================
   EXCEL ICON
   ========================================================= */

.evaluation-card-tools
.evaluation-download-btn i {

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    font-size: 14px !important;

    transform: none !important;
}


/* =========================================================
   DOWNLOAD HOVER
   ========================================================= */

.evaluation-card-tools
.evaluation-download-btn:hover {

    transform: none !important;

    box-shadow:
        0 5px 12px rgba(40, 167, 69, 0.20) !important;
}


/* =========================================================
   DOWNLOAD FOCUS / ACTIVE
   ========================================================= */

.evaluation-card-tools
.evaluation-download-btn:focus,

.evaluation-card-tools
.evaluation-download-btn:active {

    transform: none !important;

    rotate: none !important;

    animation: none !important;

    outline: none !important;
}


/* =========================================================
   GLOBAL ANTI-ROTATION
   ========================================================= */

.evaluation-card-tools,
.evaluation-card-tools *,
.evaluation-card-tools *::before,
.evaluation-card-tools *::after {

    writing-mode: horizontal-tb !important;

    rotate: none !important;
}


/* =========================================================
   PREVENT CONTROL ROTATION
   ========================================================= */

.evaluation-card-tools
.evaluation-download-btn:hover,

.evaluation-card-tools
.evaluation-download-btn:focus,

.evaluation-card-tools
.evaluation-download-btn:active,

.evaluation-card-tools
.subsidy-type-btn:hover,

.evaluation-card-tools
.subsidy-type-btn:focus,

.evaluation-card-tools
.subsidy-type-btn:active {

    transform: none !important;

    rotate: none !important;

    animation: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .evaluation-card-tools {

        justify-content: flex-start !important;

        flex-wrap: wrap !important;

        gap: 8px !important;
    }


    .evaluation-card-tools
    .subsidy-type-menu {

        width: 280px !important;

        min-width: 280px !important;

        max-width: calc(100vw - 24px) !important;

        right: 0 !important;

        left: auto !important;
    }
}


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

@media (max-width: 480px) {

    /* Filter becomes icon-only */

    .evaluation-card-tools
    .subsidy-type-btn {

        width: 40px !important;

        min-width: 40px !important;

        padding: 0 !important;

        gap: 0 !important;
    }


    .evaluation-card-tools
    .subsidy-type-btn
    #subsidyTypeLabel {

        display: none !important;
    }


    /* Download becomes icon-only */

    .evaluation-card-tools
    .evaluation-download-btn {

        width: 40px !important;

        min-width: 40px !important;

        padding: 0 !important;

        gap: 0 !important;
    }


    .evaluation-card-tools
    .evaluation-download-btn span {

        display: none !important;
    }


    /* Mobile dropdown */

    .evaluation-card-tools
    .subsidy-type-menu {

        position: fixed !important;

        top: 70px !important;

        right: 12px !important;

        left: 12px !important;

        bottom: auto !important;

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;

        z-index: 99999 !important;
    }
}
/* =========================================================
   RECORDS CARD TOOLS
   ========================================================= */

.card-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}


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

.card-tools .status-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}


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

.card-tools .status-btn {
    height: 40px !important;
    min-height: 40px !important;

    padding: 0 14px !important;

    border-radius: 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
    rotate: none !important;
    animation: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* Filter icon */

.card-tools .status-btn > i {
    display: inline-block !important;

    margin: 0 !important;

    font-size: 13px !important;

    transform: none !important;
}


/* Hover */

.card-tools .status-btn:hover {
    transform: none !important;

    box-shadow:
        0 4px 10px rgba(0, 123, 255, 0.15) !important;
}


/* Open */

.card-tools
.status-btn[aria-expanded="true"] {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;

    box-shadow:
        0 4px 12px rgba(0, 123, 255, 0.20) !important;
}


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

.card-tools .status-menu {
    position: absolute !important;

    top: calc(100% + 8px) !important;

    right: 0 !important;
    left: auto !important;

    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;

    padding: 8px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;

    background: #fff !important;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.06) !important;

    z-index: 9999 !important;

    overflow: hidden !important;

    writing-mode: horizontal-tb !important;
    text-align: left !important;

    transform: none !important;
    rotate: none !important;
    animation: none !important;
}


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

.card-tools .status-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;
    min-height: 46px !important;

    padding: 8px 10px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    color: #141516 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    transform: none !important;
}


/* Header icon */

.card-tools .status-header-icon {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 30px !important;

    width: 30px !important;
    height: 30px !important;

    border-radius: 8px !important;

    background: #eef5ff !important;
    color: #007bff !important;

    font-size: 13px !important;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

.card-tools
.status-menu
.dropdown-divider {
    width: calc(100% - 12px) !important;

    height: 1px !important;

    margin: 6px 6px !important;
    padding: 0 !important;

    border: 0 !important;

    border-top: 1px solid #edf0f2 !important;

    background: transparent !important;
}


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

.card-tools
.status-menu
.status-filter {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 52px !important;
    min-height: 52px !important;

    padding: 6px 10px !important;
    margin: 2px 0 !important;

    box-sizing: border-box !important;

    border-radius: 9px !important;

    background: transparent !important;

    color: #343a40 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    transform: none !important;
    rotate: none !important;
}


/* Hover */

.card-tools
.status-menu
.status-filter:hover {
    background: #f6f8fa !important;

    color: #212529 !important;

    text-decoration: none !important;
}


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

.card-tools .status-icon {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 36px !important;

    width: 36px !important;
    min-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 12px 0 0 !important;
    padding: 0 !important;

    border-radius: 9px !important;

    font-size: 15px !important;

    transform: none !important;
    rotate: none !important;
}


/* Received */

.card-tools .status-icon.received {
    background: #e9f8ef !important;
    color: #28a745 !important;
}


/* Not Received */

.card-tools .status-icon.not-received {
    background: #fff6df !important;
    color: #e0a000 !important;
}


/* Cancelled */

.card-tools .status-icon.cancelled {
    background: #fdecec !important;
    color: #dc3545 !important;
}


/* Icon itself */

.card-tools .status-icon i {
    margin: 0 !important;

    width: auto !important;
    height: auto !important;

    transform: none !important;
    rotate: none !important;
}


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

.card-tools
.status-menu
.status-text {
    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1.3 !important;

    text-align: left !important;

    white-space: nowrap !important;

    writing-mode: horizontal-tb !important;

    transform: none !important;
}


/* =========================================================
   CLEAR FILTER
   ========================================================= */

.card-tools
.status-menu
.clear-status {
    color: #6c757d !important;
}


.card-tools
.status-menu
.clear-status:hover {
    background: #fff5f5 !important;
    color: #dc3545 !important;
}


.card-tools
.status-menu
.clear-status .fa-times-circle {
    color: #ff3d3d !important;
}


/* =========================================================
   UPLOAD RECORDS BUTTON
   ========================================================= */

.card-tools .btn-success {
    height: 40px !important;
    min-height: 40px !important;

    padding: 0 16px !important;

    border-radius: 8px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
    rotate: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* Excel icon */

.card-tools .btn-success i {
    margin: 0 !important;
    font-size: 14px !important;

    transform: none !important;
}


/* Upload hover */

.card-tools .btn-success:hover {
    transform: none !important;

    box-shadow:
        0 5px 12px rgba(40, 167, 69, 0.20) !important;
}


/* =========================================================
   ADD RECORD BUTTON
   ========================================================= */

.card-tools #add {
    height: 40px !important;
    min-height: 40px !important;

    min-width: 40px !important;

    padding: 0 14px !important;

    border-radius: 8px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
    rotate: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* Add icon */

.card-tools #add i {
    margin: 0 !important;

    font-size: 14px !important;

    transform: none !important;
}


/* Add hover */

.card-tools #add:hover {
    transform: none !important;

    box-shadow:
        0 5px 12px rgba(0, 123, 255, 0.20) !important;
}


/* =========================================================
   GLOBAL ANTI-ROTATION
   ========================================================= */

.card-tools,
.card-tools *,
.card-tools *::before,
.card-tools *::after {
    writing-mode: horizontal-tb !important;
    rotate: none !important;
}


/* =========================================================
   PREVENT BUTTON ROTATION
   ========================================================= */

.card-tools button:hover,
.card-tools button:focus,
.card-tools button:active,
.card-tools a:hover,
.card-tools a:focus,
.card-tools a:active {
    transform: none !important;
    rotate: none !important;
    animation: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .card-tools {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .card-tools .status-menu {
        width: 320px !important;
        min-width: 320px !important;
        max-width: calc(100vw - 24px) !important;

        right: 0 !important;
        left: auto !important;
    }
}


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

@media (max-width: 480px) {

    /* Status button becomes icon-only */

    .card-tools
    .status-btn {
        width: 40px !important;
        min-width: 40px !important;

        padding: 0 !important;
        gap: 0 !important;
    }

    .card-tools
    .status-btn
    #statusLabel {
        display: none !important;
    }


    /* Upload button becomes icon-only */

    .card-tools
    .btn-success {
        width: 40px !important;
        min-width: 40px !important;

        padding: 0 !important;
        gap: 0 !important;
    }

    .card-tools
    .btn-success {
        font-size: 0 !important;
    }

    .card-tools
    .btn-success i {
        font-size: 14px !important;
    }


    /* Add button becomes icon-only */

    .card-tools
    #add {
        width: 40px !important;
        min-width: 40px !important;

        padding: 0 !important;
    }


    /* Mobile dropdown */

    .card-tools
    .status-menu {
        position: fixed !important;

        top: 70px !important;

        right: 12px !important;
        left: 12px !important;

        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        z-index: 99999 !important;
    }
}

/* =========================================================
   IMPORT RESULT MODAL
========================================================= */

.import-result-modal {
    border: none !important;

    border-radius: 20px !important;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);
}


/* Header */

.import-result-header {
    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 110px;

    border: none !important;

    background: #ffffff !important;

    padding: 25px;
}


/* Icon */

.import-result-icon {
    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e9f8ed;

    color: #087f23;

    font-size: 30px;

    box-shadow:
        0 5px 15px rgba(8, 127, 35, 0.12);
}


/* Close */

.import-result-header .close {
    position: absolute;

    top: 12px;
    right: 18px;

    color: #555;

    opacity: .7;

    font-size: 25px;

    transition: .2s;
}

.import-result-header .close:hover {
    color: #087f23;

    opacity: 1;
}


/* Body */

.import-result-modal .modal-body {
    padding: 5px 30px 20px;

    background: #ffffff;
}


/* Title */

.import-result-title {
    margin-bottom: 12px;

    color: #222;

    font-size: 23px;

    font-weight: 700;
}


/* Message */

.import-result-message {
    margin: 0 auto;

    max-width: 420px;

    color: #666;

    font-size: 15px;

    line-height: 1.7;
}


/* Footer */

.import-result-modal .modal-footer {
    border-top: 1px solid #eeeeee;

    background: #fafafa;

    padding: 15px;
}


/* OK button */

.import-ok-btn {
    min-width: 110px;

    padding: 9px 25px;

    border: none;

    border-radius: 10px;

    background: #087f23 !important;

    font-weight: 600;

    transition: .25s;
}

.import-ok-btn:hover {
    background: #066a1d !important;

    transform: translateY(-2px);

    box-shadow:
        0 5px 12px rgba(8, 127, 35, .20);
}


/* =========================================================
   WARNING STATE
========================================================= */

.import-result-modal.warning .import-result-icon {
    background: #fff7df;

    color: #d99a00;
}

.import-result-modal.warning .import-ok-btn {
    background: #d99a00 !important;
}


/* =========================================================
   ERROR STATE
========================================================= */

.import-result-modal.error .import-result-icon {
    background: #fdecec;

    color: #dc3545;
}

.import-result-modal.error .import-ok-btn {
    background: #dc3545 !important;
}


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

@media (max-width: 576px) {

    .import-result-modal {
        margin: 15px;
    }

    .import-result-header {
        min-height: 95px;

        padding: 20px;
    }

    .import-result-icon {
        width: 60px;
        height: 60px;

        font-size: 25px;
    }

    .import-result-modal .modal-body {
        padding: 5px 20px 20px;
    }

    .import-result-title {
        font-size: 20px;
    }

    .import-result-message {
        font-size: 14px;
    }

}

/* =========================================================
   AUDIT LOG PAGE
========================================================= */

.audit-filter-card,
.audit-table-card {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}


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

.audit-filter-card .card-header,
.audit-table-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e1e5e9;
}

.filter-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 30px;

    border-radius: 5px;

    background: #eef1f4;
    color: #6c757d;
}


/* =========================================================
   FILTER LABELS
========================================================= */

.filter-label {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 600;

    color: #6c757d;
}

.filter-label i {
    width: 14px;
    text-align: center;
}


/* =========================================================
   FILTER INPUTS
========================================================= */

.audit-filter-card .form-control,
.audit-filter-card .input-group-text {
    border-color: #dfe3e6;
}

.audit-filter-card .form-control {
    height: 34px;
    width: 100%;
    font-size: 13px;
}

.audit-filter-card .form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, .1);
}


/* =========================================================
   IP SEARCH
========================================================= */

.audit-filter-card .input-group {
    width: 100%;
}

.audit-filter-card .input-group-text {
    background: #fff;
    color: #89939e;
    border-right: 0;
}

.audit-filter-card .input-group .form-control {
    border-left: 0;
}


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

#clearFilters {
    min-width: 78px;
    transition: .2s ease;
    white-space: nowrap;
}

#clearFilters:hover {
    background: #6c757d;
    color: #fff;
}


/* =========================================================
   TABLE CARD
========================================================= */

.audit-table-card .card-header {
    padding: 10px 15px;
}


/* =========================================================
   TABLE RESPONSIVE WRAPPER
========================================================= */

.audit-table-card .card-body {
    width: 100%;
}

.audit-table-card .table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}


/* =========================================================
   TABLE
========================================================= */

#audit-logs-table {
    margin-bottom: 0 !important;
    width: 100% !important;
}

#audit-logs-table thead th {
    background: #078a27;
    color: #fff;

    border-color: #078a27;

    font-size: 13px;
    font-weight: 600;

    padding: 11px 10px;

    white-space: nowrap;
    vertical-align: middle;
}

#audit-logs-table tbody td {
    font-size: 13px;
    vertical-align: middle;
    padding: 9px 10px;
}

#audit-logs-table tbody tr {
    transition: background-color .15s ease;
}

#audit-logs-table tbody tr:hover {
    background-color: #f7faf8;
}


/* =========================================================
   ACTION BADGES
========================================================= */

#audit-logs-table .badge {
    font-size: 11px;
    font-weight: 600;

    padding: 5px 8px;

    border-radius: 4px;

    white-space: nowrap;
}


/* =========================================================
   IP ADDRESS
========================================================= */

#audit-logs-table code {
    font-size: 12px;

    background: #f5f5f5;

    padding: 3px 6px;

    border-radius: 4px;

    white-space: nowrap;
}


/* =========================================================
   DATE
========================================================= */

#audit-logs-table td:last-child {
    white-space: nowrap;
}


/* =========================================================
   DATATABLE CONTROLS
========================================================= */

#audit-logs-table_wrapper {
    padding: 0;
    width: 100%;
}

#audit-logs-table_wrapper .dataTables_length,
#audit-logs-table_wrapper .dataTables_filter {
    padding: 12px 15px 5px;
}

#audit-logs-table_wrapper .dataTables_info {
    padding-left: 15px;
    padding-bottom: 10px;
}

#audit-logs-table_wrapper .dataTables_paginate {
    padding-right: 15px;
    padding-bottom: 10px;
}

#audit-logs-table_wrapper .dataTables_length label,
#audit-logs-table_wrapper .dataTables_filter label {
    font-size: 13px;
    color: #555;
}


/* =========================================================
   SEARCH BOX
========================================================= */

#audit-logs-table_wrapper .dataTables_filter input {
    height: 34px;

    margin-left: 5px;

    border: 1px solid #dfe3e6;
    border-radius: 5px;

    padding: 5px 10px;

    max-width: 250px;

    outline: none;
}

#audit-logs-table_wrapper .dataTables_filter input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, .1);
}


/* =========================================================
   ENTRIES DROPDOWN
========================================================= */

#audit-logs-table_wrapper .dataTables_length select {
    height: 34px;

    border: 1px solid #dfe3e6;
    border-radius: 5px;

    padding: 4px 25px 4px 8px;

    outline: none;
}


/* =========================================================
   PAGINATION
========================================================= */

#audit-logs-table_wrapper .pagination {
    margin-bottom: 0;
}

#audit-logs-table_wrapper .paginate_button {
    margin-left: 2px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .audit-filter-card .card-body {
        padding: 14px !important;
    }

    /*
     * Allow filter columns to occupy more space
     */
    .audit-filter-card .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .audit-filter-card .row > [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }

    /*
     * Table gets horizontal scrolling
     */
    .audit-table-card .table-responsive {
        overflow-x: auto;
    }

    #audit-logs-table {
        min-width: 850px !important;
        width: 850px !important;
    }

    /*
     * DataTables controls
     */
    #audit-logs-table_wrapper .dataTables_length,
    #audit-logs-table_wrapper .dataTables_filter {
        padding: 10px 12px 5px;
    }

}


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

@media (max-width: 767.98px) {

    /* PAGE */
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }


    /* =====================================================
       FILTER CARD
    ===================================================== */

    .audit-filter-card .card-header {
        padding: 10px 12px !important;
    }

    .audit-filter-card .card-body {
        padding: 12px !important;
    }

    /*
     * Stack filter fields
     */
    .audit-filter-card .row {
        display: block;
        margin: 0;
    }

    .audit-filter-card .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;

        padding-left: 0;
        padding-right: 0;

        margin-bottom: 10px !important;
    }

    .audit-filter-card .row > [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }

    .filter-label {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .audit-filter-card .form-control {
        height: 38px;
        font-size: 13px;
    }


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

    .audit-filter-card .card-header > .d-flex {
        width: 100%;
    }

    .filter-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    #clearFilters {
        min-width: 70px;
        padding: 5px 9px;
        font-size: 11px;
    }


    /* =====================================================
       TABLE CARD
    ===================================================== */

    .audit-table-card .card-header {
        padding: 10px 12px !important;
    }

    /*
     * Important:
     * Keep table readable instead of squeezing columns.
     */
    .audit-table-card .table-responsive {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    #audit-logs-table {
        min-width: 850px !important;
        width: 850px !important;
    }

    #audit-logs-table thead th {
        font-size: 11px;
        padding: 9px 8px;
    }

    #audit-logs-table tbody td {
        font-size: 12px;
        padding: 9px 8px;
    }


    /* =====================================================
       DATATABLE SEARCH / LENGTH
    ===================================================== */

    #audit-logs-table_wrapper .dataTables_length,
    #audit-logs-table_wrapper .dataTables_filter {

        float: none;

        width: 100%;

        text-align: left;

        padding: 8px 12px 5px;
    }

    #audit-logs-table_wrapper .dataTables_length label,
    #audit-logs-table_wrapper .dataTables_filter label {
        width: 100%;
        font-size: 11px;
    }

    #audit-logs-table_wrapper .dataTables_length select {
        height: 36px;
        font-size: 12px;
    }

    #audit-logs-table_wrapper .dataTables_filter input {

        display: block;

        width: 100%;
        max-width: none;

        height: 38px;

        margin: 5px 0 0 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       DATATABLE INFO
    ===================================================== */

    #audit-logs-table_wrapper .dataTables_info {

        width: 100%;

        text-align: center;

        padding: 8px 10px;

        font-size: 11px;
    }


    /* =====================================================
       PAGINATION
    ===================================================== */

    #audit-logs-table_wrapper .dataTables_paginate {

        width: 100%;

        float: none;

        text-align: center;

        padding: 5px 8px 12px;
    }

    #audit-logs-table_wrapper .paginate_button {

        padding: 5px 8px !important;

        margin: 2px !important;

        font-size: 11px;
    }

}


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

@media (max-width: 480px) {

    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }


    /* Filter */
    .audit-filter-card,
    .audit-table-card {
        border-radius: 6px;
    }

    .audit-filter-card .card-header,
    .audit-table-card .card-header {
        padding: 9px 10px !important;
    }

    .audit-filter-card .card-body {
        padding: 10px !important;
    }


    /* Table */
    #audit-logs-table {
        min-width: 800px !important;
        width: 800px !important;
    }

    #audit-logs-table thead th {
        font-size: 10px;
        padding: 8px 7px;
    }

    #audit-logs-table tbody td {
        font-size: 11px;
        padding: 8px 7px;
    }


    /* Badges */
    #audit-logs-table .badge {
        font-size: 9px;
        padding: 4px 6px;
    }


    /* IP */
    #audit-logs-table code {
        font-size: 10px;
    }


    /* DataTables */
    #audit-logs-table_wrapper .dataTables_length,
    #audit-logs-table_wrapper .dataTables_filter {
        padding-left: 8px;
        padding-right: 8px;
    }

    #audit-logs-table_wrapper .dataTables_info {
        font-size: 10px;
    }

    #audit-logs-table_wrapper .paginate_button {
        padding: 4px 7px !important;
        font-size: 10px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    #clearFilters {
        min-width: 60px;
        font-size: 10px;
    }

    .filter-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    #audit-logs-table {
        min-width: 760px !important;
        width: 760px !important;
    }

    #audit-logs-table_wrapper .paginate_button {
        padding: 3px 6px !important;
        margin: 1px !important;
    }

}
/* =========================================================
   MODERN AUDIT TABLE
========================================================= */

.audit-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   TABLE
========================================================= */

.audit-modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.audit-modern-table thead th {
    background: #078a27;
    color: #fff;

    border: 0;

    padding: 12px 13px;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .35px;

    white-space: nowrap;
    vertical-align: middle;
}

.audit-modern-table thead th:first-child {
    padding-left: 15px;
}

.audit-modern-table tbody tr {
    background: #fff;

    transition:
        background-color .15s ease,
        box-shadow .15s ease;
}

.audit-modern-table tbody tr:hover {
    background: #f8fbf9;
    box-shadow: inset 3px 0 0 #078a27;
}

.audit-modern-table tbody td {
    border-top: 1px solid #edf0f2;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;

    padding: 11px 13px;

    font-size: 13px;

    color: #495057;

    vertical-align: middle;
}


/* =========================================================
   ID
========================================================= */

.audit-id {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 34px;

    padding: 4px 7px;

    background: #f3f5f7;

    color: #6c757d;

    border-radius: 5px;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   USER
========================================================= */

.audit-user {
    display: flex;
    align-items: center;

    min-width: 120px;
}

.audit-user-icon {
    width: 31px;
    height: 31px;

    min-width: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 8px;

    border-radius: 50%;

    background: #eaf7ee;
    color: #078a27;

    font-size: 12px;
}

.audit-user-icon.unknown {
    background: #f1f3f5;
    color: #adb5bd;
}

.audit-user-name {
    color: #343a40;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   ACTION
========================================================= */

.audit-action {
    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}

.audit-action i {
    font-size: 9px;
}


/* SUCCESS */
.audit-action.badge-success {
    background: #e8f7ed;
    color: #198754;
}


/* WARNING */
.audit-action.badge-warning {
    background: #fff6df;
    color: #b77900;
}


/* DANGER */
.audit-action.badge-danger {
    background: #fdeaea;
    color: #dc3545;
}


/* INFO */
.audit-action.badge-info {
    background: #e8f4fb;
    color: #0d6efd;
}


/* PRIMARY */
.audit-action.badge-primary {
    background: #eaf2ff;
    color: #0d6efd;
}


/* SECONDARY */
.audit-action.badge-secondary {
    background: #f1f3f5;
    color: #6c757d;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.audit-description {
    max-width: 330px;

    line-height: 1.45;

    color: #555;
}


/* =========================================================
   SUBJECT
========================================================= */

.audit-subject {
    display: flex;
    align-items: center;
    gap: 5px;

    white-space: nowrap;
}

.audit-subject-name {
    color: #343a40;
    font-weight: 600;
}

.audit-subject-id {
    color: #adb5bd;
    font-size: 11px;
}


/* =========================================================
   IP ADDRESS
========================================================= */

.audit-ip {
    display: inline-flex;

    align-items: center;

    padding: 5px 8px;

    background: #f6f7f8;

    border: 1px solid #e9ecef;

    border-radius: 5px;

    color: #6c757d;

    font-family: monospace;

    font-size: 11px;

    white-space: nowrap;
}

.audit-ip i {
    color: #9aa1a8;
}


/* =========================================================
   DATE
========================================================= */

.audit-date {
    min-width: 105px;

    white-space: nowrap;
}

.audit-date-main {
    color: #495057;

    font-size: 12px;
    font-weight: 600;
}

.audit-date-time {
    margin-top: 2px;

    color: #9aa1a8;

    font-size: 10px;
}

.audit-date-time i {
    font-size: 9px;
}


/* =========================================================
   N/A
========================================================= */

.audit-na {
    color: #adb5bd;
    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .audit-modern-table {
        min-width: 950px;
    }

    .audit-description {
        max-width: 260px;
    }

}


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

@media (max-width: 767.98px) {

    .audit-table-responsive {
        overflow-x: auto;
    }

    /*
     * Keep columns readable.
     * User can swipe horizontally.
     */
    .audit-modern-table {
        min-width: 950px;
    }

    .audit-modern-table thead th {
        padding: 10px 11px;
        font-size: 10px;
    }

    .audit-modern-table tbody td {
        padding: 10px 11px;
        font-size: 12px;
    }

    .audit-user-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        margin-right: 6px;
    }

    .audit-user-name {
        font-size: 12px;
    }

    .audit-description {
        max-width: 280px;
    }

    .audit-action {
        font-size: 9px;
        padding: 5px 8px;
    }

    .audit-ip {
        font-size: 10px;
    }

    .audit-date-main {
        font-size: 11px;
    }

    .audit-date-time {
        font-size: 9px;
    }

}


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

@media (max-width: 480px) {

    .audit-modern-table {
        min-width: 900px;
    }

    .audit-modern-table thead th {
        padding: 9px 9px;
        font-size: 9px;
    }

    .audit-modern-table tbody td {
        padding: 9px;
        font-size: 11px;
    }

    .audit-id {
        min-width: 29px;
        padding: 3px 6px;
        font-size: 10px;
    }

    .audit-user-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 10px;
    }

    .audit-action {
        font-size: 8px;
        padding: 4px 7px;
    }

}
.profile-container {
    background: #ffffff;
}


/* ==========================================
   TABS
========================================== */

.profile-tabs-wrapper {
    border-bottom: 1px solid #e9ecef;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.profile-tabs {
    display: flex;
    flex-wrap: nowrap;
    min-width: max-content;
    border-bottom: 0;
}

.profile-tabs .nav-item {
    margin-right: 6px;
}

.profile-tabs .nav-link {
    border: 0;
    border-radius: 8px 8px 0 0;
    color: #6c757d;
    font-weight: 600;
    padding: 13px 20px;
    white-space: nowrap;
    transition: all 0.25s ease;
    position: relative;
}

.profile-tabs .nav-link:hover {
    color: #28a745;
    background: #f6fbf7;
}

.profile-tabs .nav-link.active {
    color: #28a745;
    background: #f6fbf7;
}

.profile-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -1px;
    height: 3px;
    background: #28a745;
    border-radius: 5px 5px 0 0;
}


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

.profile-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #f8fff9 0%,
        #ffffff 55%,
        #f7fbff 100%
    );
    border: 1px solid #edf2ee;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

.profile-avatar-wrapper {
    flex-shrink: 0;
    position: relative;
}

.profile-avatar-wrapper::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: #28a745;
    border: 3px solid #ffffff;
    border-radius: 50%;
    right: 8px;
    bottom: 8px;
}

.profile-avatar {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
}

.profile-header-content {
    min-width: 0;
}

.profile-name {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    word-break: break-word;
}

.profile-role {
    display: inline-flex;
    align-items: center;
    background: #eaf7ee;
    color: #218838;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.profile-status {
    margin-top: 10px;
}

.profile-status span {
    color: #6c757d;
    font-size: 13px;
}

.profile-status i {
    color: #28a745;
    font-size: 8px;
    vertical-align: middle;
}


/* ==========================================
   SECTION HEADING
========================================== */

.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf7ee;
    color: #28a745;
}

.section-heading h5 {
    margin: 0;
    font-weight: 700;
    color: #343a40;
}

.section-heading p {
    margin: 3px 0 0;
    color: #8a8f94;
    font-size: 13px;
}


/* ==========================================
   INFO CARDS
========================================== */

.info-card {
    height: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #edf0f2;
    border-radius: 12px;
    transition: all 0.25s ease;
}

.info-card:hover {
    transform: translateY(-2px);
    border-color: #dcefe1;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}

.info-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 17px;
}

.info-icon.success {
    background: #28a745;
}

.info-icon.primary {
    background: #007bff;
}

.info-icon.warning {
    background: #f0ad00;
}

.info-icon.danger {
    background: #dc3545;
}

.info-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.info-label {
    color: #8a8f94;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.info-value {
    color: #343a40;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}


/* ==========================================
   FARM SECTION
========================================== */

.farm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.farm-icon {
    background: #fff1f1;
    color: #dc3545;
}

.farm-count {
    flex-shrink: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #6c757d;
    padding: 8px 13px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}


/* ==========================================
   FARM CARD
========================================== */

.farm-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e8ecef;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.045);
    transition: all 0.25s ease;
}

.farm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.09);
}


/* FARM CARD HEADER */

.farm-card-header {
    padding: 18px 20px;
    background: linear-gradient(
        135deg,
        #dc3545,
        #c82333
    );
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.farm-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.farm-icon-circle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    font-size: 17px;
}

.farm-title {
    min-width: 0;
}

.farm-title span {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 2px;
}

.farm-title h5 {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.farm-badge {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 9px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
}


/* FARM BODY */

.farm-card-body {
    padding: 20px;
}

.farm-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.farm-detail {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
}

.farm-detail-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.farm-detail-icon.size {
    background: #eaf7ee;
    color: #28a745;
}

.farm-detail-icon.location {
    background: #fff1f1;
    color: #dc3545;
}

.farm-detail-label {
    display: block;
    color: #8a8f94;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 3px;
}

.farm-detail strong {
    display: block;
    color: #343a40;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.farm-detail strong small {
    color: #6c757d;
    font-size: 11px;
    font-weight: 500;
}

.location-text {
    line-height: 1.35;
}


/* FARM DIVIDER */

.farm-divider {
    height: 1px;
    background: #edf0f2;
    margin: 20px 0 15px;
}


/* FARM DATE */

.farm-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a8f94;
    font-size: 12px;
}

.farm-date i {
    color: #dc3545;
}

.farm-date strong {
    color: #495057;
}


/* ==========================================
   EMPTY STATE
========================================== */

.empty-farm-state {
    margin-top: 20px;
    padding: 50px 25px;
    text-align: center;
    background: #fffaf0;
    border: 1px dashed #f0c36d;
    border-radius: 15px;
}

.empty-farm-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff3cd;
    color: #d39e00;
    font-size: 25px;
}

.empty-farm-state h5 {
    margin-bottom: 6px;
    font-weight: 700;
    color: #5f4b00;
}

.empty-farm-state p {
    margin: 0;
    color: #856404;
    font-size: 13px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991.98px) {

    .profile-container {
        padding: 24px !important;
    }

    .profile-header {
        padding: 22px;
    }

    .profile-name {
        font-size: 25px;
    }

}


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

@media (max-width: 767.98px) {

    .profile-container {
        padding: 15px !important;
    }

    /* Tabs */

    .profile-tabs-wrapper {
        margin-left: -5px;
        margin-right: -5px;
    }

    .profile-tabs .nav-link {
        padding: 11px 14px;
        font-size: 13px;
    }

    .profile-tabs .nav-link i {
        margin-right: 5px !important;
    }


    /* Profile header */

    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 25px 18px;
        gap: 15px;
    }

    .profile-avatar {
        width: 110px;
        height: 110px;
    }

    .profile-avatar-wrapper::after {
        right: 5px;
        bottom: 5px;
    }

    .profile-name {
        font-size: 23px;
    }

    .profile-header-content {
        width: 100%;
    }


    /* Section heading */

    .section-heading {
        align-items: flex-start;
    }

    .section-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .section-heading h5 {
        font-size: 16px;
    }

    .section-heading p {
        font-size: 12px;
    }


    /* Information cards */

    .info-card {
        min-height: 82px;
        padding: 14px;
    }

    .info-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .info-value {
        font-size: 14px;
    }


    /* Farm header */

    .farm-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .farm-count {
        align-self: flex-start;
    }


    /* Farm card */

    .farm-card-header {
        padding: 15px;
    }

    .farm-card-body {
        padding: 16px;
    }

    .farm-title h5 {
        font-size: 15px;
    }

    .farm-badge {
        display: none;
    }

    .farm-detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

}


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

@media (max-width: 480px) {

    .profile-container {
        padding: 10px !important;
    }

    .profile-tabs .nav-link span {
        display: none;
    }

    .profile-tabs .nav-link {
        padding: 11px 17px;
    }

    .profile-tabs .nav-link i {
        margin-right: 0 !important;
    }

    .profile-header {
        border-radius: 12px;
        padding: 22px 14px;
    }

    .profile-avatar {
        width: 95px;
        height: 95px;
    }

    .profile-name {
        font-size: 21px;
    }

    .profile-role {
        font-size: 12px;
    }

    .info-card {
        padding: 13px;
        gap: 11px;
    }

    .info-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 14px;
    }

    .info-label {
        font-size: 11px;
    }

    .info-value {
        font-size: 13px;
    }

    .farm-card {
        border-radius: 12px;
    }

    .farm-icon-circle {
        width: 37px;
        height: 37px;
        min-width: 37px;
    }

    .farm-title h5 {
        font-size: 14px;
    }

    .farm-detail strong {
        font-size: 14px;
    }

}


/* ==========================================
   ACCESSIBILITY / REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .info-card,
    .farm-card,
    .profile-tabs .nav-link {
        transition: none;
    }

}
/*========================================
    CHECKBOX COLUMN
==========================================*/

.dashboard-table .checkbox-column {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}
/* ==========================================
   CHECKBOX WRAPPER
   Both header and row checkboxes use
   exactly the same positioning.
========================================== */
.checkbox-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
/* ==========================================
   CHECKBOX
========================================== */
.checkbox-wrapper .form-check-input {
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    cursor: pointer;
    vertical-align: middle;
}
/* Remove Bootstrap default left offset */
.dashboard-table .form-check-input {
    margin-left: 0 !important;
}
/* ==========================================
   HEADER CHECKBOX
========================================== */
#selectAllNotifications {
    margin: 0 !important;
    position: relative;
}
/* ==========================================
   ROW CHECKBOX
========================================== */
.notif-checkbox {
    margin: 0 !important;
    position: relative;
}
/* ==========================================
   TABLE VERTICAL ALIGNMENT
========================================== */
#registration-table th,
#registration-table td {
    vertical-align: middle !important;
}
/* ==========================================
   ICON COLORS
========================================== */
.registration-icon {
    color: #0d6efd !important;
    opacity: 1 !important;
}
.section-icon i {
    opacity: 1 !important;
}
/* ==========================================
   OPTIONAL: CHECKBOX SIZE
========================================== */
#registration-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px) {
    .dashboard-table .checkbox-column {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
    #registration-table input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }
}

/* ============================================================
   REGISTRATION CARD
============================================================ */

.registration-card {
    overflow: hidden;
    border-radius: 16px;
}


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

.registration-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 24px;
}


.registration-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
}


.registration-header-left > div:last-child {
    min-width: 0;
}


.registration-header h5 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 700;
}


.registration-header p {
    margin: 0;
    font-size: 12px;
}


.registration-section-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    margin-right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e8f7ed !important;
}


.registration-icon {
    color: #198754 !important;
    font-size: 22px;
}


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

.registration-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


.request-count {
    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    border-radius: 20px;

    background: #ffffff;

    color: #087f23;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


.registration-header-actions
.btn {
    border-radius: 8px;
}


/* ============================================================
   TABLE
============================================================ */

.registration-table {
    width: 100%;
}


.registration-table thead th {
    height: 58px;

    padding: 12px 16px;

    vertical-align: middle;

    background: #f7f9fa;

    color: #68737d;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .4px;

    border-bottom: 1px solid #e9edef;

    white-space: nowrap;
}


.registration-table tbody td {
    padding: 14px 16px;

    vertical-align: middle;

    border-bottom: 1px solid #edf0f2;
}


.registration-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ============================================================
   CHECKBOX ALIGNMENT
============================================================ */

.checkbox-column {
    width: 55px !important;

    min-width: 55px !important;

    max-width: 55px !important;

    padding-left: 10px !important;

    padding-right: 10px !important;

    text-align: center !important;

    vertical-align: middle !important;
}


.checkbox-wrapper {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


.checkbox-wrapper .form-check-input {
    position: relative;

    margin: 0 !important;

    width: 16px;

    height: 16px;

    cursor: pointer;

    vertical-align: middle;
}


/* ============================================================
   MESSAGE
============================================================ */

.request-message {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 280px;
}


.message-icon {
    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #e8f1ff;

    color: #1769e0;

    font-size: 18px;
}


.request-message-content {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.request-message-content span {
    color: #202b33;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;
}


.request-message-content small {
    margin-top: 3px;

    color: #89939c;

    font-size: 11px;
}


/* ============================================================
   DATE
============================================================ */

.date-text {
    display: inline-flex;

    align-items: center;

    color: #263238;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


.registration-table td small {
    font-size: 11px;
}


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

.view-registration-btn {
    width: 44px;

    height: 44px;

    padding: 0;

    border: 0;

    border-radius: 11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #e8f1ff;

    color: #1769e0;

    cursor: pointer;

    transition: all .2s ease;
}


.view-registration-btn:hover {
    background: #1769e0;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow: 0 5px 12px rgba(23, 105, 224, .18);
}


.view-registration-btn:focus {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, .15);
}


/* ============================================================
   MODAL
============================================================ */

.registration-modal {
    border: 0;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .20);
}


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

.registration-modal-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px;

    background: #00a91c;

    color: #ffffff;

    border: 0;
}


.registration-modal-title-wrapper {
    display: flex;

    align-items: center;
}


.registration-modal-icon {
    width: 48px;

    height: 48px;

    min-width: 48px;

    margin-right: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(255,255,255,.95);

    color: #008c18;

    font-size: 21px;
}


.registration-modal-header
.modal-title {
    margin: 0;

    font-size: 18px;

    font-weight: 700;
}


.registration-modal-header small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.85);

    font-size: 12px;
}


.registration-close {
    color: #ffffff !important;

    opacity: .85;

    font-size: 28px;

    text-shadow: none;
}


.registration-close:hover {
    opacity: 1;
}


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

.registration-modal-body {
    min-height: 350px;

    padding: 24px;

    background: #f7f9f8;
}


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

.registration-loading {
    min-height: 350px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.registration-loading .spinner-border {
    width: 42px;

    height: 42px;

    margin-bottom: 14px;
}


.registration-loading p {
    margin: 0;

    color: #7b8794;

    font-size: 13px;
}


/* ============================================================
   ALERTS
============================================================ */

.registration-alert {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 16px 18px;

    margin-bottom: 20px;

    border-radius: 12px;
}


.registration-alert h6 {
    margin: 0 0 4px;

    font-size: 14px;

    font-weight: 700;
}


.registration-alert p {
    margin: 0;

    font-size: 12px;

    line-height: 1.5;
}


.registration-alert-icon {
    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    font-size: 17px;
}


.registration-alert-warning {
    color: #765b00;

    background: #fff8df;

    border: 1px solid #f5df8c;
}


.registration-alert-warning
.registration-alert-icon {
    color: #9a7600;

    background: #ffeaa7;
}


.registration-alert-success {
    color: #176b35;

    background: #eaf8ef;

    border: 1px solid #c9ecd5;
}


.registration-alert-success
.registration-alert-icon {
    color: #198754;

    background: #d5f2df;
}


.farmer-number-display {
    margin-top: 7px;

    font-size: 12px;
}


/* ============================================================
   INFORMATION SECTION
============================================================ */

.registration-section {
    margin-bottom: 20px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5ebe7;

    border-radius: 13px;
}


.registration-section-title {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 17px;

    background: #fbfcfb;

    border-bottom: 1px solid #edf1ee;
}


.registration-section-title
.registration-section-icon {
    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #e8f7ed;

    color: #198754;

    font-size: 15px;
}


.registration-section-title h6 {
    margin: 0;

    color: #263238;

    font-size: 14px;

    font-weight: 700;
}


.registration-section-title small {
    display: block;

    margin-top: 2px;

    color: #89939c;

    font-size: 11px;
}


/* ============================================================
   INFO GRID
============================================================ */

.registration-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.registration-info-item {
    padding: 14px 17px;

    border-bottom: 1px solid #edf1ee;
}


.registration-info-item:nth-child(odd) {
    border-right: 1px solid #edf1ee;
}


.registration-label {
    display: block;

    margin-bottom: 5px;

    color: #89939c;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.registration-value {
    display: block;

    color: #263238;

    font-size: 14px;

    font-weight: 600;

    word-break: break-word;
}


/* ============================================================
   ERROR
============================================================ */

.registration-error {
    min-height: 350px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;
}


.registration-error-icon {
    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    border-radius: 50%;

    background: #fff1f1;

    color: #dc3545;

    font-size: 25px;
}


.registration-error h5 {
    margin: 0 0 7px;

    color: #263238;

    font-weight: 700;
}


.registration-error p {
    max-width: 420px;

    margin-bottom: 15px;

    color: #7b8794;

    font-size: 13px;
}


/* ============================================================
   MODAL FOOTER
============================================================ */

.registration-modal-footer {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    padding: 14px 24px;

    background: #ffffff;

    border-top: 1px solid #e9eeeb;
}


.registration-modal-footer .btn {
    border-radius: 8px;

    padding: 8px 15px;

    font-size: 12px;

    font-weight: 600;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.registration-empty-cell {
    padding: 0 !important;
}


.registration-table .empty-state {
    padding: 55px 20px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 768px) {

    .registration-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 16px;
    }


    .registration-header-actions {
        width: 100%;
    }


    .registration-header-actions
    .request-count {
        flex: 1;

        justify-content: center;
    }


    .registration-header-actions
    .btn {
        flex: 1;
    }


    .registration-section-icon {
        width: 46px;

        height: 46px;

        min-width: 46px;
    }


    .registration-modal-header {
        padding: 16px;
    }


    .registration-modal-body {
        padding: 15px;
    }


    .registration-info-grid {
        grid-template-columns: 1fr;
    }


    .registration-info-item:nth-child(odd) {
        border-right: 0;
    }


    .registration-modal-footer {
        flex-wrap: wrap;

        padding: 12px 15px;
    }


    .registration-modal-footer .btn {
        flex: 1;

        min-width: 120px;
    }

}


@media (max-width: 576px) {

    .registration-header h5 {
        font-size: 15px;
    }


    .registration-header p {
        font-size: 11px;
    }


    .request-message {
        min-width: 220px;
    }


    .message-icon {
        width: 40px;

        height: 40px;

        min-width: 40px;
    }


    .registration-table thead th,
    .registration-table tbody td {
        padding: 11px 10px;
    }


    .registration-modal-icon {
        width: 42px;

        height: 42px;

        min-width: 42px;
    }


    .registration-modal-header
    .modal-title {
        font-size: 16px;
    }

}

/* =========================================================
   EFFECTIVENESS EVALUATION CARD
========================================================= */

.effectiveness-card {
    overflow: hidden;
    border-radius: 18px;
}


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

.effectiveness-header {
    min-height: 86px;
    padding: 18px 24px;
}


.effectiveness-header > div:first-child {
    display: flex;
    align-items: center;
}


/* =========================================================
   SECTION ICON
========================================================= */

.effectiveness-section-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    margin-right: 14px;

    border-radius: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e8f7ed !important;
}


.effectiveness-icon {
    color: #198754 !important;

    font-size: 23px;

    opacity: 1 !important;
}


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

.effectiveness-title h5 {
    margin: 0 0 4px;

    font-size: 17px;

    font-weight: 700;

    color: #ffffff;
}


.effectiveness-title p {
    margin: 0;

    font-size: 12px;

    color: rgba(255, 255, 255, 0.85);
}


/* =========================================================
   ANALYTICS BADGE
========================================================= */

.analytics-badge {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.18);

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}


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

.effectiveness-body {
    min-height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px !important;
}


/* =========================================================
   CHART
========================================================= */

.chart-wrapper {
    position: relative;

    width: 100%;

    height: 320px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.evaluation-empty-state {

    width: 100%;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 35px 25px;

}


/* =========================================================
   EMPTY STATE ICON
========================================================= */

.evaluation-empty-icon {

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #e8f7ed;

    border: 8px solid #f4fbf6;

    color: #198754;

    font-size: 29px;

    box-shadow:
        0 5px 20px rgba(25, 135, 84, 0.08);

}


.evaluation-empty-icon i {
    color: #198754 !important;

    opacity: 1 !important;
}


/* =========================================================
   EMPTY TITLE
========================================================= */

.evaluation-empty-state h5 {

    margin: 0 0 9px;

    color: #263238;

    font-size: 19px;

    font-weight: 700;

}


/* =========================================================
   EMPTY DESCRIPTION
========================================================= */

.evaluation-empty-state p {

    max-width: 480px;

    margin: 0 0 20px;

    color: #7b8794;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   EMPTY INFORMATION BOX
========================================================= */

.evaluation-empty-hint {

    max-width: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 11px 16px;

    border-radius: 10px;

    background: #f7f9fa;

    border: 1px solid #edf0f2;

    color: #6c757d;

    font-size: 12px;

    line-height: 1.5;

}


.evaluation-empty-hint i {

    color: #198754;

    font-size: 14px;

    flex-shrink: 0;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .effectiveness-header {

        padding: 16px;

    }


    .effectiveness-section-icon {

        width: 46px;

        height: 46px;

        min-width: 46px;

    }


    .effectiveness-icon {

        font-size: 20px;

    }


    .effectiveness-title h5 {

        font-size: 15px;

    }


    .effectiveness-title p {

        font-size: 11px;

    }


    .analytics-badge {

        display: none;

    }


    .effectiveness-body {

        min-height: 320px;

        padding: 20px !important;

    }


    .evaluation-empty-state {

        min-height: 270px;

        padding: 25px 10px;

    }


    .evaluation-empty-icon {

        width: 65px;

        height: 65px;

        font-size: 25px;

    }


    .evaluation-empty-state h5 {

        font-size: 17px;

    }


    .evaluation-empty-state p {

        font-size: 13px;

        max-width: 350px;

    }


    .evaluation-empty-hint {

        max-width: 100%;

        font-size: 11px;

    }

}

/* =========================================================
   UNIVERSAL ADMIN ACTION DROPDOWN
   Compact Design
   ========================================================= */

.admin-actions-dropdown {
    position: relative !important;
}


/* =========================================================
   MAIN DROPDOWN BUTTON
   ========================================================= */

.admin-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    height: 40px !important;
    padding: 5px 13px !important;

    border-radius: 8px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}

.admin-dropdown-btn:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12) !important;
}


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

.admin-dropdown-btn-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 6px !important;

    background: rgba(255, 255, 255, 0.18) !important;

    flex-shrink: 0 !important;
}

.admin-dropdown-btn-icon i {
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1 !important;
}


/* =========================================================
   DROPDOWN CONTAINER
   ========================================================= */

.admin-dropdown-menu {
    position: absolute !important;

    width: 370px !important;
    max-width: calc(100vw - 20px) !important;

    padding: 5px !important;
    margin-top: 5px !important;

    border: 1px solid #e5e8eb !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.13) !important;

    overflow: hidden !important;

    z-index: 9999 !important;
}


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

.admin-dropdown-header {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    padding: 5px 8px 7px !important;

    box-sizing: border-box !important;
}


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

.admin-dropdown-header-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-right: 10px !important;

    border-radius: 9px !important;

    background: #eaf7ee !important;
    color: #28a745 !important;

    flex-shrink: 0 !important;
}

.admin-dropdown-header-icon i {
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1 !important;
}


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

.admin-dropdown-header-content {
    position: static !important;

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;
}


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

.admin-dropdown-header-title {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #343a40 !important;

    font-size: 13.5px !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;
}


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

.admin-dropdown-header-subtitle {
    display: block !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    color: #9aa3aa !important;

    font-size: 10.5px !important;

    line-height: 1.25 !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.admin-dropdown-divider {
    display: block !important;

    width: calc(100% - 8px) !important;
    height: 1px !important;

    margin: 4px 4px !important;
    padding: 0 !important;

    background: #edf0f2 !important;

    border: 0 !important;
}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.admin-dropdown-section {
    display: flex !important;
    align-items: center !important;

    gap: 6px !important;

    width: 100% !important;

    padding: 4px 8px 2px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    color: #929ba3 !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: 0.7px !important;

    line-height: 1.2 !important;
}

.admin-dropdown-section i {
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 10px !important;

    line-height: 1 !important;
}


/* =========================================================
   ACTION ROW
   ========================================================= */

.admin-dropdown-action {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    min-height: 46px !important;
    height: 46px !important;

    padding: 5px 7px !important;
    margin: 1px 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;

    color: #343a40 !important;

    text-align: left !important;
    text-decoration: none !important;

    cursor: pointer !important;

    overflow: visible !important;

    transform: none !important;
}


/* =========================================================
   ACTION HOVER
   ========================================================= */

.admin-dropdown-action:hover,
.admin-dropdown-action:focus {
    background: #f6f8f7 !important;

    color: #343a40 !important;

    text-decoration: none !important;

    outline: none !important;
}


/* =========================================================
   ACTION ICON
   ========================================================= */

.admin-dropdown-action-icon {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;

    margin: 0 9px 0 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border-radius: 8px !important;

    flex-shrink: 0 !important;

    float: none !important;

    transform: none !important;
}

.admin-dropdown-action-icon i {
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;

    line-height: 1 !important;
}


/* =========================================================
   ACTION CONTENT
   ========================================================= */

.admin-dropdown-action-content {
    position: static !important;

    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    float: none !important;
}


/* =========================================================
   ACTION TITLE
   ========================================================= */

.admin-dropdown-action-title {
    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #343a40 !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =========================================================
   ACTION DESCRIPTION
   ========================================================= */

.admin-dropdown-action-description {
    display: block !important;

    width: auto !important;

    margin: 1px 0 0 !important;
    padding: 0 !important;

    color: #9aa3aa !important;

    font-size: 10px !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =========================================================
   ACTION ARROW
   ========================================================= */

.admin-dropdown-action-arrow {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    min-width: 18px !important;

    margin-left: 6px !important;
    padding: 0 !important;

    color: #adb5bd !important;

    font-size: 9px !important;

    flex-shrink: 0 !important;

    float: none !important;

    transform: none !important;

    transition:
        transform 0.2s ease,
        color 0.2s ease !important;
}

.admin-dropdown-action-arrow i {
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* FIXED SELECTOR */
.admin-dropdown-action:hover .admin-dropdown-action-arrow,
.admin-dropdown-action:focus .admin-dropdown-action-arrow {
    color: #6c757d !important;

    transform: translateX(3px) !important;
}


/* =========================================================
   ICON COLOR THEMES
   ========================================================= */

.admin-icon-blue {
    background: #eaf2ff !important;
    color: #007bff !important;
}

.admin-icon-green {
    background: #eaf7ee !important;
    color: #28a745 !important;
}

.admin-icon-orange {
    background: #fff4e2 !important;
    color: #f39c12 !important;
}

.admin-icon-red {
    background: #fdecec !important;
    color: #dc3545 !important;
}

.admin-icon-purple {
    background: #f1eaff !important;
    color: #6f42c1 !important;
}

.admin-icon-cyan {
    background: #e8f8fb !important;
    color: #17a2b8 !important;
}

.admin-icon-gray {
    background: #f0f1f3 !important;
    color: #6c757d !important;
}


/* =========================================================
   BUTTON COLOR THEMES
   ========================================================= */

.admin-btn-green {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

.admin-btn-blue {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #ffffff !important;
}

.admin-btn-orange {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
    color: #ffffff !important;
}

.admin-btn-red {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.admin-btn-purple {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #ffffff !important;
}

.admin-btn-cyan {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}


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

@media (max-width: 575.98px) {

    .admin-dropdown-menu {
        width: 340px !important;
        max-width: calc(100vw - 16px) !important;
    }

    .admin-dropdown-btn-label {
        display: none !important;
    }

    .admin-dropdown-btn {
        height: 40px !important;
        padding: 6px 10px !important;
    }

    .admin-dropdown-action {
        min-height: 46px !important;
        height: 46px !important;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

    .admin-dropdown-menu {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .admin-dropdown-header {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .admin-dropdown-action {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}
/* =========================================================
   LOCATION EXPORT SECTION
   ========================================================= */

.admin-dropdown-location-section {
    padding: 12px 14px;
}


/* =========================================================
   LOCATION TITLE
   ========================================================= */

.admin-dropdown-location-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}


.admin-dropdown-location-title-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f1f8f4;
    color: #198754;

    border-radius: 8px;

    flex-shrink: 0;
}


.admin-dropdown-location-title-icon i {
    font-size: 14px;
}


.admin-dropdown-location-title-text {
    font-size: 13px;
    font-weight: 700;
    color: #343a40;
}


.admin-dropdown-location-subtitle {
    margin-top: 2px;

    font-size: 11px;
    line-height: 1.3;

    color: #8a8f98;
}


/* =========================================================
   SELECT + DOWNLOAD
   ========================================================= */

.admin-location-select-wrapper {
    display: flex;
    align-items: stretch;
    gap: 7px;
}


.admin-location-select {
    min-width: 0;
    height: 38px;

    border: 1px solid #dfe3e8;
    border-radius: 7px;

    font-size: 12px;
    color: #495057;

    background-color: #fff;

    padding: 6px 9px;

    outline: none;
}


.admin-location-select:focus {
    border-color: #198754;

    box-shadow:
        0 0 0 2px rgba(25, 135, 84, 0.10);
}


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

.admin-location-download-btn {
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 6px 11px;

    border: none;
    border-radius: 7px;

    background: #198754;
    color: #fff;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}


.admin-location-download-btn:hover {
    background: #157347;
    color: #fff;

    text-decoration: none;
}


.admin-location-download-btn:active {
    transform: translateY(1px);
}


.admin-location-download-btn i {
    font-size: 13px;
}


/* =========================================================
   DROPDOWN LOCATION OPTIONS
   ========================================================= */

.admin-location-select option {
    font-size: 12px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {

    .admin-dropdown-location-section {
        padding: 12px;
    }


    .admin-location-select-wrapper {
        flex-direction: column;
    }


    .admin-location-select {
        width: 100%;
    }


    .admin-location-download-btn {
        width: 100%;
    }

}

/* =========================================================
   PROFILE ACCOUNT ACTIONS
========================================================= */

.profile-account-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin-top: 18px;
    margin-bottom: 20px;
}

.profile-edit-account-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 18px !important;

    border-radius: 8px !important;

    font-size: 14px;
    font-weight: 600;

    background: #087f23 !important;
    border-color: #087f23 !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.profile-edit-account-btn:hover {
    background: #066b1e !important;
    border-color: #066b1e !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.12);
}

.profile-edit-account-btn:focus,
.profile-edit-account-btn:active {
    background: #066b1e !important;
    border-color: #066b1e !important;

    box-shadow:
        0 0 0 0.15rem rgba(8, 127, 35, 0.20) !important;
}



/* =========================================================
   EDIT ACCOUNT MODAL
========================================================= */

#editAccountModal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#editAccountModal .modal-dialog {
    width: 100%;

    max-width: 625px;

    margin: 1.75rem auto;
}

.edit-account-modal {
    width: 100%;

    border: none !important;

    border-radius: 16px !important;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.20) !important;
}



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

.edit-account-modal .modal-header {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    min-height: 105px;

    padding: 24px 28px !important;

    background: #ffffff !important;

    border: none !important;

    border-bottom: 1px solid #e9ecef !important;
}


/*
 * GREEN ACCENT LINE
 */

.edit-account-modal .modal-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #087f23;
}



/* =========================================================
   MODAL TITLE AREA
========================================================= */

.edit-account-modal .modal-header > div {
    padding-top: 2px;
}

.edit-account-modal .modal-title {
    margin: 0 !important;

    padding: 0 !important;

    font-size: 21px !important;

    line-height: 1.3;

    font-weight: 700 !important;

    color: #1f2937 !important;
}

.edit-account-modal .modal-title i {
    color: #087f23 !important;

    margin-right: 7px;
}

.edit-account-modal .modal-header small {
    display: block;

    margin-top: 5px;

    font-size: 13px;

    line-height: 1.5;

    color: #6c757d !important;
}



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

.edit-account-modal .modal-header .close {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0 !important;

    padding: 0 !important;

    border: none;

    border-radius: 7px;

    background: transparent;

    color: #6c757d !important;

    font-size: 25px;

    line-height: 1;

    opacity: 1;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.edit-account-modal .modal-header .close:hover {
    color: #dc3545 !important;

    background: #f8f9fa;
}

.edit-account-modal .modal-header .close:focus {
    outline: none;

    box-shadow: none;
}



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

.edit-account-modal .modal-body {
    padding: 25px 28px 20px !important;

    background: #ffffff;
}

.edit-account-modal .form-group {
    margin-bottom: 20px;
}



/* =========================================================
   FORM LABEL
========================================================= */

.edit-account-modal label {
    display: flex;
    align-items: center;

    margin-bottom: 8px !important;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

    color: #343a40 !important;
}

.edit-account-modal label i {
    color: #087f23 !important;

    width: 18px;

    font-size: 14px;

    text-align: center;
}



/* =========================================================
   FORM CONTROL
========================================================= */

.edit-account-modal .form-control {
    width: 100%;

    height: 46px !important;

    min-height: 46px !important;

    padding: 9px 14px !important;

    border: 1px solid #d7dce1 !important;

    border-radius: 9px !important;

    background: #ffffff !important;

    color: #343a40 !important;

    font-size: 14px;

    line-height: 1.5;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.edit-account-modal .form-control:hover {
    border-color: #b8c0c8 !important;
}

.edit-account-modal .form-control:focus {
    border-color: #087f23 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(8, 127, 35, 0.10) !important;

    outline: none !important;
}

.edit-account-modal .form-control::placeholder {
    color: #9aa3ad;

    opacity: 1;
}



/* =========================================================
   PASSWORD INPUT WRAPPER
========================================================= */

.password-input-wrapper {
    position: relative;

    width: 100%;
}

.password-input-wrapper .form-control {
    padding-right: 48px !important;
}



/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {
    position: absolute;

    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0 !important;

    border: none !important;

    border-radius: 7px;

    background: transparent !important;

    color: #6c757d !important;

    cursor: pointer;

    z-index: 5;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.password-toggle:hover {
    color: #087f23 !important;

    background: rgba(8, 127, 35, 0.07) !important;
}

.password-toggle:focus {
    outline: none !important;

    box-shadow: none !important;

    color: #087f23 !important;
}

.password-toggle i {
    font-size: 15px;
}



/* =========================================================
   FORM HELP TEXT
========================================================= */

.edit-account-modal .form-text {
    display: block;

    margin-top: 6px !important;

    font-size: 12px;

    line-height: 1.5;

    color: #6c757d !important;
}



/* =========================================================
   PASSWORD SECTION DIVIDER
========================================================= */

.account-section-divider {
    display: flex;

    align-items: center;

    width: 100%;

    margin: 24px 0 20px;

    gap: 14px;
}

.account-section-divider::before,
.account-section-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: #dee2e6;
}

.account-section-divider span {
    flex-shrink: 0;

    white-space: nowrap;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    color: #6c757d;
}



/* =========================================================
   MODAL FOOTER
========================================================= */

.edit-account-modal .modal-footer {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    padding: 17px 28px !important;

    background: #ffffff !important;

    border-top: 1px solid #e9ecef !important;
}



/* =========================================================
   FOOTER BUTTONS
========================================================= */

.edit-account-modal .modal-footer .btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 17px !important;

    border-radius: 8px !important;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}



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

.edit-account-modal .modal-footer .btn-secondary {
    background: #6c757d !important;

    border-color: #6c757d !important;

    color: #ffffff !important;
}

.edit-account-modal .modal-footer .btn-secondary:hover {
    background: #5a6268 !important;

    border-color: #545b62 !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.12);
}

.edit-account-modal .modal-footer .btn-secondary:focus {
    box-shadow:
        0 0 0 3px rgba(108, 117, 125, 0.15) !important;
}



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

.edit-account-modal .modal-footer .btn-success {
    background: #087f23 !important;

    border-color: #087f23 !important;

    color: #ffffff !important;
}

.edit-account-modal .modal-footer .btn-success:hover {
    background: #066b1e !important;

    border-color: #066b1e !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.12);
}

.edit-account-modal .modal-footer .btn-success:focus {
    background: #066b1e !important;

    border-color: #066b1e !important;

    box-shadow:
        0 0 0 3px rgba(8, 127, 35, 0.15) !important;
}



/* =========================================================
   MODAL BACKDROP
========================================================= */

.modal-backdrop.show {
    opacity: 0.55;
}



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

@media (max-width: 767.98px) {

    #editAccountModal .modal-dialog {
        max-width: calc(100% - 24px);

        margin: 12px auto;
    }

    .edit-account-modal {
        border-radius: 13px !important;
    }

    .edit-account-modal .modal-header {
        min-height: 95px;

        padding: 20px !important;
    }

    .edit-account-modal .modal-body {
        padding: 21px 20px 16px !important;
    }

    .edit-account-modal .modal-footer {
        padding: 15px 20px !important;
    }

}



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

@media (max-width: 575.98px) {

    .profile-account-actions {
        display: block;

        margin-top: 15px;

        margin-bottom: 18px;
    }

    .profile-edit-account-btn {
        width: 100%;
    }


    #editAccountModal .modal-dialog {
        max-width: calc(100% - 16px);

        margin: 8px auto;
    }


    .edit-account-modal .modal-header {
        min-height: 90px;

        padding: 18px !important;
    }

    .edit-account-modal .modal-title {
        font-size: 19px !important;
    }

    .edit-account-modal .modal-header small {
        font-size: 12px;
    }


    .edit-account-modal .modal-body {
        padding: 19px 18px 14px !important;
    }


    .edit-account-modal .form-group {
        margin-bottom: 17px;
    }


    .edit-account-modal .form-control {
        height: 44px !important;

        min-height: 44px !important;
    }


    .account-section-divider {
        margin-top: 21px;

        margin-bottom: 18px;

        gap: 9px;
    }


    .edit-account-modal .modal-footer {
        padding: 14px 18px !important;

        gap: 8px;
    }


    .edit-account-modal .modal-footer .btn {
        flex: 1;

        min-height: 42px;

        padding-left: 12px !important;

        padding-right: 12px !important;
    }

}



/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 375px) {

    .edit-account-modal .modal-header {
        padding: 16px !important;
    }

    .edit-account-modal .modal-body {
        padding: 17px 16px 12px !important;
    }

    .edit-account-modal .modal-footer {
        padding: 12px 16px !important;
    }

    .edit-account-modal .modal-title {
        font-size: 18px !important;
    }

    .edit-account-modal .modal-footer .btn {
        font-size: 13px;
    }

}

/* =========================================================
   FARM INFORMATION
   MODERN RESPONSIVE DESIGN
========================================================= */


/* =========================================================
   FARM SECTION
========================================================= */

#farm {
    padding-top: 8px;
}


/* =========================================================
   FARM SECTION HEADER
========================================================= */

.farm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 22px;

    margin-bottom: 22px;

    background: #ffffff;

    border: 1px solid #e9ecef;

    border-radius: 16px;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.04);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.farm-section-header:hover {
    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.farm-section-header .section-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0 !important;
}


/* =========================================================
   FARM SECTION ICON
========================================================= */

.farm-section-header .section-icon.farm-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #eaf8ef,
        #f4fbf6
    );

    color: #28a745;

    border-radius: 14px;

    font-size: 21px;

    border: 1px solid #d8efdf;
}


.farm-section-header .section-heading h5 {
    margin: 0 0 4px;

    font-size: 19px;

    font-weight: 700;

    color: #243447;

    line-height: 1.3;
}


.farm-section-header .section-heading p {
    margin: 0;

    font-size: 13px;

    color: #7b8794;

    line-height: 1.5;
}


/* =========================================================
   RIGHT SIDE ACTIONS
========================================================= */

.farm-section-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   FARM COUNT
========================================================= */

.farm-count {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding: 7px 13px;

    background: #f6f8fa;

    border: 1px solid #e3e7eb;

    border-radius: 10px;

    color: #59636e;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


.farm-count i {
    color: #28a745;
}


/* =========================================================
   ADD FARM BUTTON
========================================================= */

.add-farm-btn {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 5px;

    min-height: 40px;

    padding: 8px 17px !important;

    border: none !important;

    border-radius: 10px !important;

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

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    box-shadow:
        0 4px 10px rgba(40, 167, 69, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.add-farm-btn:hover {
    background: linear-gradient(
        135deg,
        #218838,
        #1e7e34
    ) !important;

    transform: translateY(-1px);

    box-shadow:
        0 6px 15px rgba(40, 167, 69, 0.27);
}


.add-farm-btn:active {
    transform: translateY(0);
}


.add-farm-btn:focus {
    box-shadow:
        0 0 0 3px rgba(40, 167, 69, 0.15) !important;
}


/* =========================================================
   FARM CARDS
========================================================= */

.farm-card {
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e7ebef;

    border-radius: 17px;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.045);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.farm-card:hover {
    transform: translateY(-3px);

    border-color: #d5e9da;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   FARM CARD HEADER
========================================================= */

.farm-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 19px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfcfc 100%
    );

    border-bottom: 1px solid #edf0f2;
}


/* =========================================================
   FARM TITLE WRAPPER
========================================================= */

.farm-title-wrapper {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   FARM ICON CIRCLE
========================================================= */

.farm-icon-circle {
    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf8f0;

    color: #28a745;

    border-radius: 13px;

    font-size: 19px;

    border: 1px solid #d9efdf;
}


/* =========================================================
   FARM TITLE
========================================================= */

.farm-title {
    min-width: 0;
}


.farm-title > span {
    display: block;

    margin-bottom: 2px;

    color: #8a949e;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.farm-title h5 {
    margin: 0;

    color: #263746;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.35;

    word-break: break-word;
}


/* =========================================================
   REGISTERED BADGE
========================================================= */

.farm-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 10px;

    border-radius: 20px;

    background: #edf8f0;

    border: 1px solid #d7efde;

    color: #218838;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}


.farm-badge i {
    font-size: 10px;
}


/* =========================================================
   FARM CARD BODY
========================================================= */

.farm-card-body {
    padding: 20px;
}


/* =========================================================
   FARM DETAIL GRID
========================================================= */

.farm-detail-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


/* =========================================================
   FARM DETAIL
========================================================= */

.farm-detail {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-width: 0;
}


.farm-detail-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    font-size: 15px;
}


/* =========================================================
   FARM DETAIL ICON COLORS
========================================================= */

.farm-detail-icon.size {
    background: #eef5ff;

    color: #3973c7;
}


.farm-detail-icon.location {
    background: #fff1f2;

    color: #dc3545;
}


.farm-detail-icon.yield {
    background: #fff8e5;

    color: #d99a00;
}


/* =========================================================
   FARM DETAIL TEXT
========================================================= */

.farm-detail-label {
    display: block;

    margin-bottom: 4px;

    color: #8a949e;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.35px;
}


.farm-detail strong {
    display: block;

    color: #2d3e50;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    word-break: break-word;
}


.farm-detail strong small {
    font-size: 11px;

    color: #7b8794;

    font-weight: 600;
}


/* =========================================================
   LOCATION TEXT
========================================================= */

.location-text {
    max-width: 100%;

    overflow-wrap: anywhere;
}


/* =========================================================
   AVERAGE YIELD DETAIL
========================================================= */

.farm-card-body > .farm-detail.mt-3 {
    margin-top: 18px !important;

    padding: 13px;

    background: #fafcfb;

    border: 1px solid #edf2ee;

    border-radius: 12px;
}


/* =========================================================
   FARM DIVIDER
========================================================= */

.farm-divider {
    width: 100%;

    height: 1px;

    margin: 18px 0 14px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e9ecef 15%,
            #e9ecef 85%,
            transparent
        );
}


/* =========================================================
   FARM DATE
========================================================= */

.farm-date {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #89939d;

    font-size: 12px;
}


.farm-date > i {
    color: #28a745;

    font-size: 14px;
}


.farm-date strong {
    color: #536170;

    font-weight: 600;
}


/* =========================================================
   EMPTY FARM STATE
========================================================= */

.empty-farm-state {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 290px;

    padding: 45px 25px;

    margin-top: 10px;

    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fffaf0 100%
        );

    border: 1px dashed #efc46b;

    border-radius: 18px;

    text-align: center;

    overflow: hidden;
}


/* Decorative background */

.empty-farm-state::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -80px;
    right: -60px;

    background: rgba(255, 193, 7, 0.08);

    border-radius: 50%;
}


.empty-farm-state::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    bottom: -65px;
    left: -40px;

    background: rgba(255, 193, 7, 0.06);

    border-radius: 50%;
}


/* =========================================================
   EMPTY FARM ICON
========================================================= */

.empty-farm-icon {
    position: relative;

    z-index: 1;

    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    background: #fff3cd;

    color: #d99a00;

    border: 1px solid #ffe7a0;

    border-radius: 50%;

    font-size: 30px;

    box-shadow:
        0 6px 18px rgba(217, 154, 0, 0.10);
}


.empty-farm-state h5 {
    position: relative;

    z-index: 1;

    margin: 0 0 7px;

    color: #6f5200;

    font-size: 19px;

    font-weight: 700;
}


.empty-farm-state p {
    position: relative;

    z-index: 1;

    max-width: 470px;

    margin: 0 auto 20px;

    color: #977b37;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   EMPTY STATE ADD BUTTON
========================================================= */

.farm-empty-add-btn {
    position: relative;

    z-index: 1;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 40px;

    padding: 8px 18px !important;

    border: none !important;

    border-radius: 10px !important;

    background: #28a745 !important;

    color: #ffffff !important;

    font-size: 13px;

    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(40, 167, 69, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.farm-empty-add-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(40, 167, 69, 0.25);
}


/* =========================================================
   ADD FARM MODAL
========================================================= */

#addFarmModal .modal-dialog {
    max-width: 680px;

    padding-left: 10px;
    padding-right: 10px;
}


.add-farm-modal {
    overflow: hidden;

    border: none !important;

    border-radius: 18px !important;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.18);
}


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

.add-farm-modal-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 23px;

    background:
        linear-gradient(
            135deg,
            #f5fbf7 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid #e7eee9 !important;
}


.add-farm-title {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


/* =========================================================
   MODAL ICON
========================================================= */

.add-farm-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf7ee;

    color: #28a745;

    border: 1px solid #d5eddb;

    border-radius: 13px;

    font-size: 20px;
}


.add-farm-title .modal-title {
    margin: 0 0 3px;

    color: #263746;

    font-size: 18px;

    font-weight: 700;
}


.add-farm-title small {
    display: block;

    color: #7d8995;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   MODAL CLOSE BUTTON
========================================================= */

.add-farm-modal-header .close {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    border-radius: 10px;

    color: #6c757d;

    opacity: 0.8;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.add-farm-modal-header .close:hover {
    background: #f0f2f4;

    color: #343a40;

    opacity: 1;
}


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

.add-farm-modal-body {
    padding: 25px;
}


/* =========================================================
   FORM GROUP
========================================================= */

.add-farm-modal-body .form-group {
    margin-bottom: 21px;
}


.add-farm-modal-body label {
    display: block;

    margin-bottom: 8px;

    color: #344454;

    font-size: 13px;

    font-weight: 600;
}


.add-farm-modal-body label i {
    color: #28a745;
}


.add-farm-modal-body label .text-danger {
    color: #dc3545 !important;

    margin-left: 2px;
}


/* =========================================================
   FORM CONTROL
========================================================= */

.add-farm-modal-body .form-control {
    height: 44px;

    padding: 9px 13px;

    border: 1px solid #dce2e7;

    border-radius: 9px;

    color: #344454;

    font-size: 13px;

    background: #ffffff;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.add-farm-modal-body .form-control:hover {
    border-color: #cbd3da;
}


.add-farm-modal-body .form-control:focus {
    border-color: #52b96a;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(40, 167, 69, 0.10);
}


.add-farm-modal-body .form-control::placeholder {
    color: #a1aab3;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.add-farm-modal-body .input-group {
    display: flex;
}


.add-farm-modal-body .input-group .form-control {
    position: relative;

    z-index: 1;
}


.add-farm-modal-body .input-group-append {
    margin-left: -1px;
}


.add-farm-modal-body .input-group-text {
    display: flex;

    align-items: center;

    padding: 0 13px;

    border: 1px solid #dce2e7;

    border-radius: 0 9px 9px 0;

    background: #f7f9fa;

    color: #687583;

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   READONLY AVERAGE YIELD
========================================================= */

#average-yield {
    background: #f7faf8;

    color: #218838;

    font-weight: 700;

    cursor: not-allowed;
}


/* =========================================================
   FORM HELP TEXT
========================================================= */

.add-farm-modal-body .form-text {
    margin-top: 6px;

    color: #89939d !important;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   YIELD PREVIEW
========================================================= */

.farm-yield-preview {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: -4px;

    margin-bottom: 20px;

    padding: 14px 16px;

    background:
        linear-gradient(
            135deg,
            #f0faf3,
            #f8fcf9
        );

    border: 1px solid #d9eddf;

    border-radius: 12px;
}


.farm-yield-icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #28a745;

    border: 1px solid #d8ebdd;

    border-radius: 10px;

    font-size: 15px;
}


.farm-yield-preview span {
    display: block;

    margin-bottom: 2px;

    color: #72807a;

    font-size: 11px;

    font-weight: 600;
}


.farm-yield-preview strong {
    display: block;

    color: #218838;

    font-size: 15px;

    font-weight: 700;
}


/* =========================================================
   INFORMATION NOTICE
========================================================= */

.farm-form-notice {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px 15px;

    margin-top: 5px;

    background: #f8f9fa;

    border: 1px solid #e7eaed;

    border-radius: 12px;
}


.farm-form-notice-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef2f5;

    color: #6c757d;

    border-radius: 9px;

    font-size: 13px;
}


.farm-form-notice strong {
    display: block;

    margin-bottom: 2px;

    color: #495057;

    font-size: 12px;

    font-weight: 700;
}


.farm-form-notice p {
    margin: 0;

    color: #7c8791;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   MODAL FOOTER
========================================================= */

.add-farm-modal-footer {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    padding: 16px 23px;

    background: #fafbfb;

    border-top: 1px solid #edf0f2 !important;
}


/* =========================================================
   MODAL BUTTONS
========================================================= */

.add-farm-modal-footer .btn {
    min-height: 40px;

    padding: 8px 16px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.add-farm-modal-footer .btn-light {
    background: #ffffff;

    border: 1px solid #dfe3e7;

    color: #66727e;
}


.add-farm-modal-footer .btn-light:hover {
    background: #f5f6f7;

    border-color: #d3d8dd;
}


.add-farm-modal-footer .btn-success {
    border: none;

    background: linear-gradient(
        135deg,
        #28a745,
        #218838
    );

    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(40, 167, 69, 0.18);
}


.add-farm-modal-footer .btn-success:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 14px rgba(40, 167, 69, 0.25);
}


/* =========================================================
   SAVE BUTTON LOADING STATE
========================================================= */

#saveFarmBtn:disabled {
    cursor: wait;

    opacity: 0.75;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   MODAL BACKDROP
========================================================= */

.modal-backdrop.show {
    opacity: 0.55;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991.98px) {

    .farm-section-header {
        padding: 18px;

        gap: 15px;
    }


    .farm-section-header .section-heading h5 {
        font-size: 17px;
    }


    .farm-section-header .section-heading p {
        font-size: 12px;
    }


    .farm-detail-grid {
        gap: 13px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767.98px) {

    /* -----------------------------------------
       SECTION HEADER
    ------------------------------------------ */

    .farm-section-header {
        flex-direction: column;

        align-items: stretch;

        padding: 17px;

        border-radius: 14px;
    }


    .farm-section-header .section-heading {
        align-items: flex-start;

        width: 100%;
    }


    .farm-section-actions {
        width: 100%;

        justify-content: space-between;
    }


    .farm-count {
        flex: 1;
    }


    .add-farm-btn {
        flex: 1;

        min-width: 120px;
    }


    /* -----------------------------------------
       FARM CARDS
    ------------------------------------------ */

    .farm-card-header {
        align-items: flex-start;

        padding: 16px;
    }


    .farm-card-body {
        padding: 17px;
    }


    .farm-badge {
        padding: 5px 8px;

        font-size: 10px;
    }


    .farm-detail-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* -----------------------------------------
       EMPTY STATE
    ------------------------------------------ */

    .empty-farm-state {
        min-height: 270px;

        padding: 35px 20px;

        border-radius: 15px;
    }


    .empty-farm-icon {
        width: 68px;
        height: 68px;

        font-size: 26px;
    }


    .empty-farm-state h5 {
        font-size: 17px;
    }


    /* -----------------------------------------
       MODAL
    ------------------------------------------ */

    #addFarmModal .modal-dialog {
        width: auto;

        margin: 12px;
    }


    .add-farm-modal {
        border-radius: 15px !important;
    }


    .add-farm-modal-header {
        padding: 17px;
    }


    .add-farm-modal-body {
        padding: 19px;
    }


    .add-farm-modal-footer {
        padding: 14px 17px;
    }

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------
       FARM HEADER
    ------------------------------------------ */

    .farm-section-header .section-heading {
        gap: 10px;
    }


    .farm-section-header .section-icon.farm-icon {
        width: 44px;
        height: 44px;

        min-width: 44px;

        border-radius: 11px;

        font-size: 18px;
    }


    .farm-section-header .section-heading h5 {
        font-size: 16px;
    }


    .farm-section-header .section-heading p {
        font-size: 11px;
    }


    /* -----------------------------------------
       ACTIONS
    ------------------------------------------ */

    .farm-section-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 8px;
    }


    .farm-count,
    .add-farm-btn {
        width: 100%;

        flex: none;
    }


    /* -----------------------------------------
       FARM CARD
    ------------------------------------------ */

    .farm-card-header {
        flex-direction: column;

        gap: 11px;
    }


    .farm-badge {
        align-self: flex-start;
    }


    .farm-title h5 {
        font-size: 15px;
    }


    /* -----------------------------------------
       MODAL
    ------------------------------------------ */

    .add-farm-title {
        gap: 10px;
    }


    .add-farm-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;

        font-size: 17px;
    }


    .add-farm-title .modal-title {
        font-size: 16px;
    }


    .add-farm-title small {
        font-size: 10px;
    }


    .add-farm-modal-body {
        padding: 16px;
    }


    .add-farm-modal-footer {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .add-farm-modal-footer .btn {
        width: 100%;
    }


    .farm-form-notice {
        padding: 12px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.add-farm-btn:focus-visible,
.farm-empty-add-btn:focus-visible,
.add-farm-modal-footer .btn:focus-visible {
    outline: 3px solid rgba(40, 167, 69, 0.20);

    outline-offset: 2px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .farm-card,
    .farm-section-header,
    .add-farm-btn,
    .farm-empty-add-btn,
    .add-farm-modal-footer .btn {
        transition: none;
    }

}
.farm-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.farm-title > span {
    font-size: 14px;
    font-weight: 600;
}

.farm-location {
    display: flex;
    align-items: center;
    gap: 8px;
}

.farm-location h5 {
    margin: 0;
    font-size: 16px;
}

.farm-detail-icon.location {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   EVALUATION CARD
============================================================ */

.evaluation-summary-table {
    margin-bottom: 0;
}

.evaluation-summary-table thead th {
    vertical-align: middle;
    white-space: nowrap;
}

.evaluation-download-btn {
    border-radius: 6px;
    font-weight: 600;
    padding: 7px 14px;
    transition: all 0.2s ease;
}

.evaluation-download-btn:hover {
    transform: translateY(-1px);
}


/* ============================================================
   MAIN WRAPPER
============================================================ */

.feedback-table-wrapper {
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   DESKTOP TABLE
============================================================ */

.feedback-desktop-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


.feedback-summary-table {
    width: 100% !important;
    max-width: 100%;
    margin: 0;

    table-layout: fixed;
}

.feedback-summary-table thead th.question-column,
.feedback-summary-table thead th.average-column,
.feedback-summary-table thead th.label-column {
    color: #ffffff !important;
    background-color: #087f23 !important;
    border-color: #087f23 !important;
}


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

.feedback-summary-table thead th {
    background-color: #087f23 !important;
    color: #ffffff !important;

    border-color: #087f23 !important;

    vertical-align: middle;
    text-align: center;

    font-size: 13px;
    font-weight: 600;

    padding: 12px 8px;

    white-space: nowrap;
}


.feedback-summary-table thead th:first-child {
    width: 40%;
    text-align: left;
}


.feedback-summary-table thead th:nth-child(2),
.feedback-summary-table thead th:nth-child(3),
.feedback-summary-table thead th:nth-child(4),
.feedback-summary-table thead th:nth-child(5),
.feedback-summary-table thead th:nth-child(6) {
    width: 7%;
}


.feedback-summary-table thead th:nth-child(7) {
    width: 10%;
}


.feedback-summary-table thead th:nth-child(8) {
    width: 15%;
}


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

.feedback-summary-table tbody td {
    vertical-align: middle;

    padding: 11px 8px;

    font-size: 13px;
}


/* ============================================================
   QUESTION
============================================================ */

.feedback-summary-table .question-cell {
    text-align: left;
}


.feedback-summary-table .question-content {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    line-height: 1.5;
}


.feedback-summary-table .question-icon {
    flex: 0 0 auto;
}


/* ============================================================
   RATING COUNT
============================================================ */

.feedback-summary-table .rating-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 7px;

    background-color: #f1f3f5;

    font-size: 13px;
    font-weight: 600;
}


.feedback-summary-table .rating-count-1 {
    color: #dc3545;
}


.feedback-summary-table .rating-count-2 {
    color: #dc3545;
}


.feedback-summary-table .rating-count-3 {
    color: #856404;
}


.feedback-summary-table .rating-count-4 {
    color: #087f23;
}


.feedback-summary-table .rating-count-5 {
    color: #087f23;
}


/* ============================================================
   AVERAGE
============================================================ */

.feedback-summary-table .average-wrapper {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    white-space: nowrap;
}


.feedback-summary-table .average-value {
    font-weight: 700;
}


.feedback-summary-table .average-star {
    font-size: 12px;
}


/* ============================================================
   LABEL
============================================================ */

.feedback-summary-table .feedback-label {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    white-space: nowrap;

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 11px;
    font-weight: 600;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.feedback-empty-state {
    text-align: center !important;

    padding: 45px 20px !important;
}


.empty-feedback-icon {
    font-size: 40px;

    color: #adb5bd;

    margin-bottom: 12px;
}


.empty-feedback-title {
    font-size: 17px;

    font-weight: 600;

    color: #495057;

    margin-bottom: 5px;
}


.empty-feedback-text {
    font-size: 13px;

    color: #6c757d;
}


/* ============================================================
   MOBILE VERSION HIDDEN BY DEFAULT
============================================================ */

.feedback-mobile-cards {
    display: none;
}


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

@media (max-width: 767px) {

    /* Hide desktop table */
    .feedback-desktop-table {
        display: none !important;
    }


    /* Show mobile cards */
    .feedback-mobile-cards {
        display: block !important;

        width: 100%;
        max-width: 100%;
    }


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

    .feedback-mobile-card {
        width: 100%;

        background: #ffffff;

        border: 1px solid #dee2e6;

        border-radius: 10px;

        padding: 15px;

        margin-bottom: 15px;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);

        box-sizing: border-box;
    }


    /* ========================================================
       QUESTION
    ======================================================== */

    .mobile-question {
        width: 100%;

        display: flex;

        align-items: flex-start;

        gap: 10px;

        padding-bottom: 13px;

        margin-bottom: 13px;

        border-bottom: 1px solid #eeeeee;
    }


    .mobile-question-icon {
        flex: 0 0 32px;

        width: 32px;
        height: 32px;

        display: flex;

        align-items: center;
        justify-content: center;

        background-color: #e8f5e9;

        color: #087f23;

        border-radius: 50%;

        font-size: 14px;
    }


    .mobile-question-text {
        flex: 1;

        min-width: 0;

        color: #333333;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.5;

        overflow-wrap: break-word;

        word-break: normal;
    }


    /* ========================================================
       RATING GRID
    ======================================================== */

    .mobile-rating-grid {
        width: 100%;

        display: grid;

        grid-template-columns: repeat(5, minmax(0, 1fr));

        gap: 5px;

        margin-bottom: 15px;
    }


    .mobile-rating-item {
        min-width: 0;

        text-align: center;

        padding: 7px 2px;

        border: 1px solid #e5e5e5;

        border-radius: 7px;

        background-color: #fafafa;

        box-sizing: border-box;
    }


    .mobile-rating-number {
        color: #087f23;

        font-size: 16px;

        font-weight: 700;

        line-height: 1;

        margin-bottom: 4px;
    }


    .mobile-rating-label {
        color: #777777;

        font-size: 8px;

        line-height: 1.2;

        min-height: 20px;

        word-break: normal;
    }


    .mobile-rating-count {
        color: #333333;

        font-size: 13px;

        font-weight: 700;

        margin-top: 5px;
    }


    /* ========================================================
       RESULT
    ======================================================== */

    .mobile-result {
        width: 100%;

        display: flex;

        align-items: flex-end;

        justify-content: space-between;

        gap: 10px;

        padding-top: 12px;

        border-top: 1px solid #eeeeee;
    }


    .mobile-average,
    .mobile-label {
        min-width: 0;
    }


    .mobile-result-title {
        display: block;

        width: 100%;

        color: #777777;

        font-size: 10px;

        font-weight: 600;

        text-transform: uppercase;

        margin-bottom: 4px;
    }


    .mobile-average-value {
        display: flex;

        align-items: center;

        gap: 4px;
    }


    .mobile-average strong {
        color: #087f23;

        font-size: 20px;

        line-height: 1;
    }


    .mobile-average i {
        color: #f0ad00;

        font-size: 12px;
    }


    .mobile-label {
        text-align: right;
    }


    .mobile-label .feedback-label {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        white-space: nowrap;

        padding: 6px 9px;

        border-radius: 6px;

        font-size: 10px;

        font-weight: 600;
    }


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

    .feedback-mobile-cards .mobile-empty {
        width: 100%;

        padding: 40px 15px !important;

        border: 1px solid #eeeeee;

        border-radius: 10px;

        background: #ffffff;
    }

}


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

@media (max-width: 400px) {

    .feedback-mobile-card {
        padding: 12px;
    }


    .mobile-question {
        gap: 8px;
    }


    .mobile-question-icon {
        flex: 0 0 29px;

        width: 29px;
        height: 29px;

        font-size: 12px;
    }


    .mobile-question-text {
        font-size: 13px;
    }


    .mobile-rating-grid {
        gap: 3px;
    }


    .mobile-rating-item {
        padding: 6px 1px;
    }


    .mobile-rating-number {
        font-size: 14px;
    }


    .mobile-rating-label {
        font-size: 7px;
    }


    .mobile-rating-count {
        font-size: 12px;
    }


    .mobile-average strong {
        font-size: 18px;
    }


    .mobile-label .feedback-label {
        font-size: 9px;

        padding: 5px 7px;
    }

}

/* ============================================================
   FEEDBACK SUMMARY CARD
============================================================ */

.feedback-summary-card {
    width: 100%;
    border: 1px solid #e1e5ea;
    border-radius: 14px;
    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 4px 12px rgba(16, 24, 40, 0.04);

    transition:
        box-shadow .2s ease,
        border-color .2s ease;
}

.feedback-summary-card:hover {
    border-color: #d8dde3;

    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.04),
        0 8px 20px rgba(16, 24, 40, 0.05);
}


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

.feedback-summary-header {
    padding: 17px 20px;

    background: #ffffff;

    border-bottom: 1px solid #edf0f3;
}

.feedback-header-content {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.feedback-header-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eef5ff;
    color: #007bff;

    font-size: 17px;

    box-shadow:
        inset 0 0 0 1px rgba(0, 123, 255, .05);
}

.feedback-summary-header .card-title {
    margin: 0;

    color: #212529 !important;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.3;
}

.feedback-header-subtitle {
    margin-top: 3px;

    color: #8b949e;

    font-size: 11px;
    line-height: 1.4;
}


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

.feedback-summary-body {
    padding: 20px;
}


/* ============================================================
   RATING SCALE
============================================================ */

.feedback-scale-wrapper {
    margin-bottom: 24px;

    border: 1px solid #e2e6ea;
    border-radius: 11px;

    background: #fafbfc;

    overflow: hidden;
}

.feedback-scale-header {
    min-height: 48px;

    padding: 11px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    background: #ffffff;

    border-bottom: 1px solid #e7eaee;
}

.feedback-scale-title {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #343a40;

    font-size: 13px;
    font-weight: 700;
}

.feedback-scale-title i {
    color: #007bff;

    font-size: 12px;
}

.feedback-scale-description {
    color: #929aa3;

    font-size: 10px;
    line-height: 1.4;
}

.feedback-rating-scale {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));
}


/* ============================================================
   RATING SCALE ITEMS
============================================================ */

.rating-scale-item {
    min-height: 68px;

    padding: 10px 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-right: 1px solid #e6e9ed;

    background: #fafbfc;

    transition:
        background-color .18s ease,
        transform .18s ease;
}

.rating-scale-item:last-child {
    border-right: none;
}

.rating-scale-item:hover {
    background: #ffffff;
}


/* ============================================================
   RATING NUMBER
============================================================ */

.rating-number {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #dce1e6;

    color: #495057;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .03);
}


/* ============================================================
   SCALE COLORS
============================================================ */

.rating-one .rating-number {
    background: #fff4f4;
    border-color: #f3c4c8;
    color: #dc3545;
}

.rating-two .rating-number {
    background: #fff8f1;
    border-color: #f4d1a8;
    color: #d97706;
}

.rating-three .rating-number {
    background: #fffcef;
    border-color: #eadb9c;
    color: #a16207;
}

.rating-four .rating-number {
    background: #f1f7ff;
    border-color: #c7dcfa;
    color: #2563eb;
}

.rating-five .rating-number {
    background: #effbf3;
    border-color: #c1e7cc;
    color: #15803d;
}

.rating-label {
    color: #495057;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.3;
}


/* ============================================================
   TABLE HEADER AREA
============================================================ */

.feedback-table-header {
    min-height: 38px;

    padding: 0 0 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.feedback-table-title {
    margin: 0;

    color: #343a40;

    font-size: 14px;
    font-weight: 700;
}

.feedback-table-title i {
    color: #007bff;
}

.feedback-table-description {
    color: #929aa3;

    font-size: 10px;
    line-height: 1.4;
}


/* ============================================================
   FEEDBACK TABLE WRAPPER
============================================================ */

.feedback-desktop-table {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}


/* ============================================================
   FEEDBACK TABLE
============================================================ */

.feedback-summary-table {
    width: 100%;
    min-width: 900px;

    margin: 0;

    border: 1px solid #e0e4e8;

    border-collapse: separate;
    border-spacing: 0;

    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;
}

.feedback-summary-table thead th {
    padding: 12px 9px;

    background: #f7f9fb;

    color: #68717b;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .35px;

    text-align: center;
    vertical-align: middle;

    border-top: none;
    border-bottom: 1px solid #e1e5e9;

    white-space: nowrap;
}

.feedback-summary-table thead th:first-child {
    text-align: left;
}

.feedback-summary-table tbody td {
    padding: 13px 9px;

    color: #495057;

    vertical-align: middle;

    border-top: 1px solid #edf0f2;
}

.feedback-summary-table tbody tr {
    background: #ffffff;

    transition:
        background-color .18s ease,
        box-shadow .18s ease;
}

.feedback-summary-table tbody tr:first-child td {
    border-top: none;
}

.feedback-summary-table tbody tr:hover {
    background: #f9fbfe;

    box-shadow:
        inset 3px 0 0 #007bff;
}


/* ============================================================
   QUESTION COLUMN
============================================================ */

.question-cell {
    min-width: 320px;
    width: 40%;
}

.question-content {
    display: flex;
    align-items: flex-start;

    gap: 8px;
}

.question-number {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #f1f4f7;
    color: #495057;

    font-size: 10px;
    font-weight: 800;
}

.question-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef5ff;
    color: #007bff;

    font-size: 10px;
}

.question-text {
    padding-top: 2px;

    color: #343a40;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.5;
}

.question-response-count {
    margin-top: 5px;
    margin-left: 62px;

    color: #9aa1a8;

    font-size: 9px;
}

.question-response-count i {
    margin-right: 3px;

    color: #adb5bd;
}


/* ============================================================
   RATING CELLS
============================================================ */

.rating-cell {
    width: 58px;

    text-align: center;
}

.rating-count {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    border: 1px solid transparent;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.rating-count:hover {
    transform: translateY(-1px);

    box-shadow:
        0 2px 5px rgba(0, 0, 0, .05);
}


/* ============================================================
   RATING COLORS
============================================================ */

.rating-count-1 {
    background: #fff1f2;
    color: #dc3545;
    border-color: #fecdd3;
}

.rating-count-2 {
    background: #fff7ed;
    color: #d97706;
    border-color: #fed7aa;
}

.rating-count-3 {
    background: #fffbeb;
    color: #a16207;
    border-color: #fde68a;
}

.rating-count-4 {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.rating-count-5 {
    background: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}


/* ============================================================
   TABLE RATING HEADERS
============================================================ */

.table-rating-header {
    width: 26px;
    height: 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 800;
}

.rating-header-1 {
    background: #fff1f2;
    color: #dc3545;
}

.rating-header-2 {
    background: #fff7ed;
    color: #d97706;
}

.rating-header-3 {
    background: #fffbeb;
    color: #a16207;
}

.rating-header-4 {
    background: #eff6ff;
    color: #2563eb;
}

.rating-header-5 {
    background: #ecfdf3;
    color: #15803d;
}


/* ============================================================
   AVERAGE
============================================================ */

.average-wrapper {
    min-width: 110px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.average-main {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;
}

.average-value {
    color: #212529;

    font-size: 16px;
    font-weight: 800;
}

.average-star {
    color: #f2b01e;

    font-size: 11px;
}


/* ============================================================
   AVERAGE PROGRESS
============================================================ */

.average-progress {
    width: 80px;
    height: 4px;

    margin: 5px auto 3px;

    background: #e9ecef;

    border-radius: 10px;

    overflow: hidden;
}

.average-progress-bar {
    height: 100%;

    background: #007bff;

    border-radius: 10px;

    transition: width .3s ease;
}

.average-scale {
    color: #9aa1a8;

    font-size: 8px;
}

.average-no-response {
    margin-top: 3px;

    color: #adb5bd;

    font-size: 9px;
}


/* ============================================================
   RESULT BADGE
============================================================ */

.feedback-label {
    min-width: 105px;

    padding: 6px 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;

    border: 1px solid transparent;
}

.feedback-label.badge-success {
    background: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}

.feedback-label.badge-primary {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.feedback-label.badge-warning {
    background: #fffbeb;
    color: #a16207;
    border-color: #fde68a;
}

.feedback-label.badge-danger {
    background: #fff1f2;
    color: #dc3545;
    border-color: #fecdd3;
}

.feedback-label.badge-secondary {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.feedback-empty-state {
    padding: 60px 20px !important;

    text-align: center;

    border: none !important;
}

.empty-feedback-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f4f6f8;
    color: #adb5bd;

    font-size: 23px;
}

.empty-feedback-title {
    margin: 0 0 5px;

    color: #495057;

    font-size: 15px;
    font-weight: 700;
}

.empty-feedback-text {
    max-width: 400px;

    margin: 0 auto;

    color: #929aa3;

    font-size: 11px;
    line-height: 1.5;
}


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

.feedback-mobile-cards {
    display: none;
}

.feedback-mobile-card {
    margin-bottom: 12px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e1e5e9;
    border-radius: 11px;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, .03),
        0 3px 8px rgba(16, 24, 40, .035);

    transition:
        box-shadow .18s ease,
        border-color .18s ease;
}

.feedback-mobile-card:hover {
    border-color: #d9dfe5;

    box-shadow:
        0 3px 10px rgba(16, 24, 40, .06);
}


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

.mobile-question {
    display: flex;
    align-items: flex-start;

    gap: 8px;
}

.mobile-question-number {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    background: #f1f4f7;
    color: #495057;

    font-size: 10px;
    font-weight: 800;
}

.mobile-question-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef5ff;
    color: #007bff;

    font-size: 10px;
}

.mobile-question-text {
    padding-top: 2px;

    color: #343a40;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.5;
}

.mobile-response-count {
    margin: 7px 0 12px 62px;

    color: #929aa3;

    font-size: 9px;
}


/* ============================================================
   MOBILE RATING GRID
============================================================ */

.mobile-rating-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 5px;

    margin-top: 13px;
}

.mobile-rating-item {
    min-width: 0;

    padding: 9px 3px;

    text-align: center;

    border: 1px solid #e5e8eb;
    border-radius: 8px;

    background: #fafbfc;

    transition:
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.mobile-rating-item:hover {
    transform: translateY(-1px);

    border-color: #d8dde3;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, .04);
}

.mobile-rating-number {
    width: 26px;
    height: 26px;

    margin: 0 auto 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #dee2e6;

    font-size: 10px;
    font-weight: 800;
}

.mobile-rating-label {
    min-height: 25px;

    color: #6c757d;

    font-size: 7px;

    line-height: 1.2;
}

.mobile-rating-count {
    margin-top: 5px;

    color: #343a40;

    font-size: 14px;
    font-weight: 800;
}


/* ============================================================
   MOBILE RATING COLORS
============================================================ */

.rating-mobile-one {
    background: #fff8f8;
    border-color: #f5d5d8;
}

.rating-mobile-two {
    background: #fffaf5;
    border-color: #f6dec4;
}

.rating-mobile-three {
    background: #fffdf4;
    border-color: #eee2b9;
}

.rating-mobile-four {
    background: #f5f9ff;
    border-color: #d4e4fa;
}

.rating-mobile-five {
    background: #f4fbf6;
    border-color: #d3ebda;
}


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

.mobile-result {
    margin-top: 14px;
    padding-top: 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-top: 1px solid #edf0f2;
}

.mobile-result-title {
    margin-bottom: 4px;

    color: #9aa1a8;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .35px;
}

.mobile-average-value {
    display: flex;
    align-items: center;

    gap: 4px;
}

.mobile-average-value strong {
    color: #212529;

    font-size: 19px;
    font-weight: 800;
}

.mobile-average-value i {
    color: #f2b01e;

    font-size: 11px;
}

.mobile-average-value .no-average {
    color: #adb5bd;
}

.mobile-label {
    text-align: right;
}


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

.mobile-empty {
    padding: 45px 15px !important;

    background: #ffffff;

    border: 1px solid #e1e5e9 !important;
    border-radius: 10px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .feedback-summary-body {
        padding: 16px;
    }

    .feedback-rating-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rating-scale-item {
        flex-direction: column;

        min-height: 74px;

        gap: 5px;

        text-align: center;
    }

    .rating-label {
        font-size: 9px;
    }

    .question-cell {
        min-width: 270px;
    }

    .question-text {
        font-size: 11px;
    }

    .feedback-summary-table thead th {
        font-size: 9px;
    }

    .rating-count {
        width: 29px;
        height: 29px;
    }

    .average-wrapper {
        min-width: 95px;
    }
}


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

@media (max-width: 767.98px) {

    .feedback-summary-card {
        border-radius: 11px;
    }

    .feedback-summary-body {
        padding: 12px;
    }

    .feedback-scale-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

    .feedback-scale-description {
        font-size: 9px;
    }

    .feedback-rating-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rating-scale-item {
        min-height: 72px;

        padding: 8px 3px;
    }

    .rating-label {
        font-size: 8px;
    }

    .feedback-desktop-table {
        display: none;
    }

    .feedback-mobile-cards {
        display: block;
    }
}


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

@media (max-width: 575.98px) {

    .feedback-summary-header {
        padding: 13px 15px;
    }

    .feedback-header-content {
        gap: 10px;
    }

    .feedback-header-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;

        border-radius: 9px;

        font-size: 15px;
    }

    .feedback-summary-header .card-title {
        font-size: 14px;
    }

    .feedback-header-subtitle {
        font-size: 9px;
    }

    .feedback-summary-body {
        padding: 10px;
    }

    .feedback-scale-wrapper {
        margin-bottom: 15px;

        border-radius: 9px;
    }

    .feedback-scale-title {
        font-size: 12px;
    }

    .feedback-scale-description {
        font-size: 9px;
    }

    .rating-number {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .rating-label {
        font-size: 7px;
    }

    .feedback-mobile-card {
        padding: 12px;

        border-radius: 9px;
    }

    .mobile-question-text {
        font-size: 11px;
    }

    .mobile-response-count {
        margin-left: 62px;

        font-size: 8px;
    }

    .mobile-rating-grid {
        gap: 3px;
    }

    .mobile-rating-item {
        padding: 7px 2px;

        border-radius: 7px;
    }

    .mobile-rating-label {
        font-size: 6.5px;
    }

    .mobile-rating-count {
        font-size: 13px;
    }

    .mobile-result {
        gap: 8px;
    }

    .mobile-average-value strong {
        font-size: 17px;
    }

    .feedback-label {
        min-width: auto;

        padding: 5px 7px;

        font-size: 8px;
    }
}


/* ============================================================
   EXTRA SMALL DEVICES
============================================================ */

@media (max-width: 390px) {

    .feedback-summary-body {
        padding: 8px;
    }

    .feedback-summary-header {
        padding: 12px;
    }

    .feedback-header-subtitle {
        display: none;
    }

    .feedback-rating-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rating-scale-item {
        min-height: 67px;

        padding: 7px 2px;
    }

    .rating-number {
        width: 24px;
        height: 24px;
        min-width: 24px;

        font-size: 10px;
    }

    .rating-label {
        font-size: 6.5px;
    }

    .mobile-rating-grid {
        gap: 2px;
    }

    .mobile-rating-item {
        padding: 6px 1px;
    }

    .mobile-rating-label {
        font-size: 6px;
    }

    .mobile-rating-count {
        font-size: 12px;
    }

    .mobile-result {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-label {
        width: 100%;

        text-align: left;
    }
}
/* ============================================================
   FEEDBACK TABLE WRAPPER
============================================================ */

.feedback-table-wrapper {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}

.feedback-table-wrapper::-webkit-scrollbar {
    height: 5px;
}

.feedback-table-wrapper::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

.feedback-table-wrapper::-webkit-scrollbar-thumb {
    background: #c7cdd3;
    border-radius: 10px;
}


/* ============================================================
   DESKTOP TABLE
============================================================ */

.feedback-summary-table {
    width: 100%;
    min-width: 900px;

    table-layout: fixed;
}

.feedback-summary-table .question-column {
    width: 40%;
}

.feedback-summary-table .rating-column {
    width: 7%;
}

.feedback-summary-table .average-column {
    width: 12%;
}

.feedback-summary-table .label-column {
    width: 13%;
}


/* ============================================================
   QUESTION CELL
============================================================ */

.question-cell {
    width: 40%;
    min-width: 0;
}

.question-content {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 9px;
}

.question-number {
    flex: 0 0 27px;
}

.question-icon {
    flex: 0 0 29px;
}

.question-text {
    min-width: 0;

    overflow-wrap: anywhere;
    word-break: normal;
}


/* ============================================================
   TABLET
   768px - 991px
============================================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

    .feedback-summary-body {
        padding: 15px;
    }

    .feedback-summary-table {
        min-width: 760px;
    }

    .feedback-summary-table .question-column {
        width: 34%;
    }

    .feedback-summary-table .rating-column {
        width: 7%;
    }

    .feedback-summary-table .average-column {
        width: 14%;
    }

    .feedback-summary-table .label-column {
        width: 17%;
    }

    .feedback-summary-table thead th {
        padding: 10px 5px;
        font-size: 9px;
    }

    .feedback-summary-table tbody td {
        padding: 11px 5px;
    }

    .question-text {
        font-size: 11px;
        line-height: 1.4;
    }

    .question-response-count {
        margin-left: 62px;
    }

    .rating-cell {
        width: auto;
    }

    .rating-count {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .table-rating-header {
        width: 25px;
        height: 25px;
    }

    .average-wrapper {
        min-width: 80px;
    }

    .average-value {
        font-size: 14px;
    }

    .average-progress {
        width: 65px;
    }

    .feedback-label {
        min-width: 85px;
        padding: 5px 6px;
        font-size: 8px;
    }
}


/* ============================================================
   MOBILE
   BELOW 768px
============================================================ */

@media (max-width: 767.98px) {

    /* --------------------------------------------------------
       CARD
    -------------------------------------------------------- */

    .feedback-summary-card {
        width: 100%;
        max-width: 100%;

        border-radius: 10px;
    }

    .feedback-summary-body {
        width: 100%;
        max-width: 100%;

        padding: 12px;
    }


    /* --------------------------------------------------------
       TABLE HEADER
    -------------------------------------------------------- */

    .feedback-table-header {
        display: block;

        padding-bottom: 10px;
    }

    .feedback-table-title {
        font-size: 13px;
    }

    .feedback-table-description {
        display: block;

        margin-top: 3px;

        font-size: 9px;
        line-height: 1.4;
    }


    /* --------------------------------------------------------
       HIDE DESKTOP TABLE
    -------------------------------------------------------- */

    .feedback-desktop-table {
        display: none !important;
    }


    /* --------------------------------------------------------
       SHOW MOBILE CARDS
    -------------------------------------------------------- */

    .feedback-mobile-cards {
        display: flex !important;

        flex-direction: column;

        width: 100%;
        max-width: 100%;

        gap: 10px;
    }


    /* --------------------------------------------------------
       MOBILE CARD
    -------------------------------------------------------- */

    .feedback-mobile-card {
        width: 100%;
        max-width: 100%;

        margin: 0;

        padding: 13px;

        border: 1px solid #e1e5e9;
        border-radius: 10px;

        background: #ffffff;

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

        overflow: hidden;
    }


    /* --------------------------------------------------------
       QUESTION
    -------------------------------------------------------- */

    .mobile-question {
        width: 100%;

        display: grid;

        grid-template-columns: 27px 29px minmax(0, 1fr);

        align-items: start;

        gap: 7px;
    }

    .mobile-question-number {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .mobile-question-icon {
        width: 29px;
        height: 29px;
        min-width: 29px;
    }

    .mobile-question-text {
        width: 100%;
        min-width: 0;

        padding-top: 2px;

        font-size: 12px;
        line-height: 1.45;

        overflow-wrap: anywhere;
    }


    /* --------------------------------------------------------
       RESPONSE COUNT
    -------------------------------------------------------- */

    .mobile-response-count {
        width: auto;

        margin: 6px 0 0 63px;

        font-size: 9px;
        line-height: 1.3;
    }


    /* --------------------------------------------------------
       RATING GRID
    -------------------------------------------------------- */

    .mobile-rating-grid {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 4px;

        margin-top: 13px;
    }

    .mobile-rating-item {
        width: 100%;
        min-width: 0;

        min-height: 76px;

        padding: 8px 3px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        border-radius: 8px;
    }

    .mobile-rating-number {
        flex: 0 0 auto;

        width: 26px;
        height: 26px;

        margin-bottom: 5px;
    }

    .mobile-rating-label {
        width: 100%;
        min-height: 24px;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;

        font-size: 7px;
        line-height: 1.15;

        overflow-wrap: anywhere;
    }

    .mobile-rating-count {
        margin-top: auto;

        font-size: 14px;
        line-height: 1;
    }


    /* --------------------------------------------------------
       MOBILE RESULT
    -------------------------------------------------------- */

    .mobile-result {
        width: 100%;

        margin-top: 13px;
        padding-top: 12px;

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: center;

        gap: 10px;

        border-top: 1px solid #edf0f2;
    }

    .mobile-result-title {
        font-size: 8px;
    }

    .mobile-average-value strong {
        font-size: 18px;
    }

    .mobile-label {
        min-width: 0;

        text-align: right;
    }

    .mobile-label .feedback-label {
        max-width: 100%;

        min-width: 0;

        padding: 6px 8px;

        font-size: 8px;
    }
}


/* ============================================================
   SMALL MOBILE
   BELOW 576px
============================================================ */

@media (max-width: 575.98px) {

    .feedback-summary-header {
        padding: 13px 14px;
    }

    .feedback-summary-body {
        padding: 10px;
    }


    /* --------------------------------------------------------
       RATING SCALE
    -------------------------------------------------------- */

    .feedback-rating-scale {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .rating-scale-item {
        min-height: 70px;

        padding: 7px 2px;

        flex-direction: column;

        gap: 4px;
    }

    .rating-number {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .rating-label {
        width: 100%;

        text-align: center;

        font-size: 7px;
        line-height: 1.15;
    }


    /* --------------------------------------------------------
       MOBILE QUESTION CARD
    -------------------------------------------------------- */

    .feedback-mobile-card {
        padding: 11px;
    }

    .mobile-question {
        grid-template-columns: 25px 27px minmax(0, 1fr);

        gap: 6px;
    }

    .mobile-question-number {
        width: 25px;
        height: 25px;
        min-width: 25px;
    }

    .mobile-question-icon {
        width: 27px;
        height: 27px;
        min-width: 27px;
    }

    .mobile-question-text {
        font-size: 11px;
        line-height: 1.45;
    }

    .mobile-response-count {
        margin-left: 58px;

        font-size: 8px;
    }


    /* --------------------------------------------------------
       RATINGS
    -------------------------------------------------------- */

    .mobile-rating-grid {
        gap: 3px;

        margin-top: 11px;
    }

    .mobile-rating-item {
        min-height: 72px;

        padding: 7px 2px;
    }

    .mobile-rating-number {
        width: 24px;
        height: 24px;

        margin-bottom: 4px;

        font-size: 9px;
    }

    .mobile-rating-label {
        font-size: 6.5px;
    }

    .mobile-rating-count {
        font-size: 13px;
    }


    /* --------------------------------------------------------
       RESULT
    -------------------------------------------------------- */

    .mobile-result {
        margin-top: 11px;
        padding-top: 10px;

        gap: 7px;
    }

    .mobile-average-value strong {
        font-size: 17px;
    }

    .mobile-label .feedback-label {
        padding: 5px 7px;

        font-size: 7px;
    }
}


/* ============================================================
   VERY SMALL PHONES
   BELOW 400px
============================================================ */

@media (max-width: 399.98px) {

    .feedback-summary-body {
        padding: 8px;
    }

    .feedback-mobile-card {
        padding: 10px;
    }


    /* --------------------------------------------------------
       SCALE
    -------------------------------------------------------- */

    .rating-scale-item {
        min-height: 64px;
    }

    .rating-number {
        width: 24px;
        height: 24px;
        min-width: 24px;

        font-size: 9px;
    }

    .rating-label {
        font-size: 6px;
    }


    /* --------------------------------------------------------
       QUESTION
    -------------------------------------------------------- */

    .mobile-question {
        grid-template-columns: 23px 25px minmax(0, 1fr);

        gap: 5px;
    }

    .mobile-question-number {
        width: 23px;
        height: 23px;
        min-width: 23px;

        font-size: 9px;
    }

    .mobile-question-icon {
        width: 25px;
        height: 25px;
        min-width: 25px;
    }

    .mobile-question-text {
        font-size: 10px;
    }

    .mobile-response-count {
        margin-left: 53px;
    }


    /* --------------------------------------------------------
       RATINGS
    -------------------------------------------------------- */

    .mobile-rating-grid {
        gap: 2px;
    }

    .mobile-rating-item {
        min-height: 68px;

        padding: 6px 1px;
    }

    .mobile-rating-number {
        width: 22px;
        height: 22px;

        font-size: 8px;
    }

    .mobile-rating-label {
        font-size: 5.7px;
    }

    .mobile-rating-count {
        font-size: 12px;
    }


    /* --------------------------------------------------------
       RESULT
    -------------------------------------------------------- */

    .mobile-result-title {
        font-size: 7px;
    }

    .mobile-average-value strong {
        font-size: 16px;
    }

    .mobile-label .feedback-label {
        padding: 4px 5px;

        font-size: 6.5px;
    }
}


/* ============================================================
   EXTRA SMALL DEVICES
   BELOW 340px
============================================================ */

@media (max-width: 339.98px) {

    .feedback-summary-body {
        padding: 6px;
    }

    .feedback-mobile-card {
        padding: 8px;
    }

    .mobile-rating-grid {
        gap: 2px;
    }

    .mobile-rating-item {
        min-height: 64px;
    }

    .mobile-rating-label {
        font-size: 5.2px;
    }

    .mobile-rating-count {
        font-size: 11px;
    }
}

/* ============================================================
   RATING SCALE ITEM
============================================================ */

.feedback-rating-scale .rating-scale-item {
    min-height: 105px;

    padding: 18px 10px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: #087f23 !important;

    color: #ffffff !important;

    border-right:
        1px solid rgba(255, 255, 255, 0.25);

    transition:
        background-color 0.2s ease;
}

.feedback-rating-scale
.rating-scale-item:last-child {
    border-right: none;
}


/* ============================================================
   HOVER
============================================================ */

.feedback-rating-scale
.rating-scale-item:hover {
    background: #096f20 !important;
}


/* ============================================================
   RATING NUMBER
============================================================ */

.feedback-rating-scale
.rating-scale-item
.rating-number {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 10px;

    border-radius: 50%;

    background: #ffffff !important;

    color: #087f23 !important;

    font-size: 20px;

    line-height: 1;

    font-weight: 800;
}


/* ============================================================
   RATING LABEL
============================================================ */

/*
 * IMPORTANT:
 * The !important rules below prevent Bootstrap or another
 * global .rating-label rule from changing the text to gray.
 */

.feedback-rating-scale
.rating-scale-item
.rating-label {

    display: block;

    width: 100%;

    color: #ffffff !important;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.35;

    text-align: center;

    opacity: 1 !important;

    visibility: visible !important;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.15);
}


/* ============================================================
   INDIVIDUAL RATING ITEMS
============================================================ */

.feedback-rating-scale .rating-one,
.feedback-rating-scale .rating-two,
.feedback-rating-scale .rating-three,
.feedback-rating-scale .rating-four,
.feedback-rating-scale .rating-five {
    color: #ffffff !important;
}


/* ============================================================
   TABLE
============================================================ */

.feedback-table-wrapper {
    width: 100%;

    border: 1px solid #dee2e6;

    border-radius: 10px;

    overflow: hidden;
}

.feedback-summary-table {
    width: 100%;

    margin-bottom: 0 !important;
}

.feedback-summary-table thead th {
    background: #f8f9fa;

    color: #343a40 !important;

    font-weight: 700;

    font-size: 13px;

    vertical-align: middle;

    border-bottom:
        2px solid #087f23;

    white-space: nowrap;
}

.feedback-summary-table tbody td {
    vertical-align: middle;

    padding: 13px 10px;
}

.feedback-summary-table tbody tr {
    transition:
        background-color 0.15s ease;
}

.feedback-summary-table tbody tr:hover {
    background: #f8fbf8;
}


/* ============================================================
   COLUMN WIDTHS
============================================================ */

.question-column {
    min-width: 320px;
}

.rating-column {
    width: 70px;

    min-width: 60px;
}

.average-column {
    width: 120px;

    min-width: 110px;
}

.label-column {
    min-width: 170px;
}


/* ============================================================
   QUESTION
============================================================ */

.question-cell {
    font-weight: 500;

    color: #343a40 !important;
}

.question-content {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    line-height: 1.45;
}

.question-icon {
    color: #087f23 !important;

    font-size: 14px;

    margin-top: 2px;

    flex-shrink: 0;
}


/* ============================================================
   RATING COUNT
============================================================ */

.rating-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    height: 30px;

    padding: 3px 9px;

    border-radius: 15px;

    font-size: 13px;

    font-weight: 700;
}


/* Rating 1 */

.rating-count-1 {

    background: #fde8e8 !important;

    color: #b42318 !important;
}


/* Rating 2 */

.rating-count-2 {

    background: #fff0f0 !important;

    color: #c0392b !important;
}


/* Rating 3 */

.rating-count-3 {

    background: #fff4cc !important;

    color: #8a6500 !important;
}


/* Rating 4 */

.rating-count-4 {

    background: #e8f0ff !important;

    color: #2457a6 !important;
}


/* Rating 5 */

.rating-count-5 {

    background: #e3f7e8 !important;

    color: #087f23 !important;
}


/* ============================================================
   TABLE RATING HEADERS
============================================================ */

.rating-header {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    font-size: 13px;

    font-weight: 700;
}

.rating-header-1 {

    background: #fde8e8 !important;

    color: #b42318 !important;
}

.rating-header-2 {

    background: #fff0f0 !important;

    color: #c0392b !important;
}

.rating-header-3 {

    background: #fff4cc !important;

    color: #8a6500 !important;
}

.rating-header-4 {

    background: #e8f0ff !important;

    color: #2457a6 !important;
}

.rating-header-5 {

    background: #e3f7e8 !important;

    color: #087f23 !important;
}


/* ============================================================
   AVERAGE
============================================================ */

.average-wrapper {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;
}

.average-value {

    font-size: 16px;

    font-weight: 700;

    color: #212529 !important;
}

.average-star {

    color: #f4b400 !important;

    font-size: 13px;
}


/* ============================================================
   FEEDBACK LABEL
============================================================ */

.feedback-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    padding: 6px 11px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.feedback-empty-state {

    text-align: center;

    padding: 45px 20px !important;

    color: #6c757d !important;
}

.empty-feedback-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f1f3f5;

    color: #868e96 !important;

    font-size: 24px;
}

.empty-feedback-title {

    font-size: 16px;

    font-weight: 700;

    color: #495057 !important;

    margin-bottom: 4px;
}

.empty-feedback-text {

    font-size: 13px;

    color: #868e96 !important;
}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 992px) {

    .feedback-rating-scale {

        grid-template-columns:
            repeat(5, minmax(130px, 1fr));

        overflow-x: auto;
    }

    .feedback-scale-wrapper {
        overflow-x: auto;
    }

    .rating-scale-item {

        min-width: 130px;
    }

    .question-column {

        min-width: 280px;
    }

}


/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 768px) {

    /* Evaluation download button */

    .evaluation-card-tools {

        margin-left: 10px;
    }

    .evaluation-download-btn span {

        display: none;
    }

    .evaluation-download-btn {

        width: 38px;

        height: 38px;

        padding: 0;

        display: inline-flex;

        align-items: center;

        justify-content: center;
    }

    .evaluation-download-btn i {

        margin-right: 0 !important;
    }


    /* Rating scale */

    .feedback-rating-scale {

        grid-template-columns:
            repeat(5, minmax(125px, 1fr));

        overflow-x: auto;

        border-radius: 10px;
    }

    .feedback-rating-scale
    .rating-scale-item {

        min-width: 125px;

        min-height: 95px;

        padding: 14px 7px;
    }

    .feedback-rating-scale
    .rating-number {

        width: 36px;

        height: 36px;

        font-size: 18px;

        margin-bottom: 8px;
    }

    .feedback-rating-scale
    .rating-label {

        font-size: 12px;

        color: #ffffff !important;
    }


    /* Feedback table */

    .feedback-table-wrapper {

        overflow-x: auto;
    }

    .feedback-summary-table {

        min-width: 900px;
    }

    .question-column {

        min-width: 300px;
    }

}


/* ============================================================
   RESPONSIVE - SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .card-header {

        flex-wrap: wrap;

        gap: 10px;
    }

    .card-title {

        font-size: 15px;
    }

    .feedback-scale-title {

        font-size: 13px;
    }

    .feedback-rating-scale
    .rating-scale-item {

        min-width: 115px;

        min-height: 90px;
    }

    .feedback-rating-scale
    .rating-label {

        font-size: 11px;

        color: #ffffff !important;
    }

}
/* ============================================================
   EVALUATION DOWNLOAD BUTTON - TOP RIGHT CORNER
============================================================ */

.evaluation-card-tools {
    margin-left: auto !important;
}

.evaluation-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 250px;

    padding: 10px 18px !important;

    border-radius: 8px !important;

    font-weight: 600 !important;
    font-size: 14px !important;

    white-space: nowrap;

    transition: all 0.2s ease;
}

.evaluation-download-btn:hover {
    transform: translateY(-1px);
}


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

@media (max-width: 768px) {

    .evaluation-card-tools {
        margin-left: auto !important;
    }

    .evaluation-download-btn {
        min-width: auto;
        width: auto !important;

        padding: 8px 12px !important;
    }

}

/* ============================================================
   SCHEDULE PLANNER
============================================================ */

.schedule-planner {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dee2e6;
    border-radius: 12px;

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


/* ============================================================
   LEFT - CALENDAR
============================================================ */

.schedule-calendar-section {
    flex: 1 1 68%;
    width: 68%;
    min-width: 0;

    padding: 22px;

    background: #ffffff;

    border-right: 1px solid #e5e7eb;
}


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

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

    gap: 12px;

    margin-bottom: 18px;
}

.calendar-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex: 1;
    min-width: 0;
}

.calendar-header h3 {
    margin: 0;

    color: #212529;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;

    white-space: nowrap;
}


/* ============================================================
   CALENDAR NAVIGATION
============================================================ */

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    padding: 0;

    border: 1px solid #dee2e6;
    border-radius: 7px;

    background: #ffffff;
    color: #495057;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.calendar-nav-btn:hover {
    background: #007bff;
    color: #ffffff;
    border-color: #007bff;

    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.20);

    transform: translateY(-1px);
}

.calendar-nav-btn:active {
    transform: translateY(0);
}

.calendar-nav-btn:focus-visible,
.today-button:focus-visible {
    outline: 3px solid rgba(0, 123, 255, 0.20);
    outline-offset: 2px;
}


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

.today-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 11px;

    border: 1px solid #007bff;
    border-radius: 6px;

    background: #ffffff;
    color: #007bff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.today-button:hover {
    background: #007bff;
    color: #ffffff;

    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.18);
}


/* ============================================================
   WEEK DAYS
============================================================ */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    overflow: hidden;

    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;

    border-radius: 7px 7px 0 0;
}

.calendar-weekdays div {
    min-width: 0;

    padding: 11px 5px;

    color: #495057;
    background: #f8f9fa;

    font-size: 12px;
    font-weight: 700;

    text-align: center;

    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}


/* ============================================================
   CALENDAR DAYS
============================================================ */

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    overflow: hidden;

    border-left: 1px solid #dee2e6;

    border-radius: 0 0 7px 7px;
}

.calendar-day {
    position: relative;

    min-width: 0;
    min-height: 108px;

    padding: 8px;

    background: #ffffff;

    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;

    cursor: pointer;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.calendar-day:hover {
    background: #f8fbff;
}

.calendar-day.other-month {
    background: #fafafa;
}

.calendar-day.other-month .calendar-day-number {
    color: #adb5bd;
}

.calendar-day.today {
    background: #eef6ff;
}

.calendar-day.today .calendar-day-number {
    color: #007bff;
}

.calendar-day.selected {
    box-shadow: inset 0 0 0 2px #007bff;
    z-index: 1;
}

.calendar-day.selected .calendar-day-number {
    color: #007bff;
}


/* ============================================================
   DAY NUMBER
============================================================ */

.calendar-day-number {
    display: block;

    margin-bottom: 6px;

    color: #343a40;

    font-size: 13px;
    font-weight: 700;
}


/* ============================================================
   CALENDAR EVENTS
============================================================ */

.calendar-event {
    display: block;

    width: 100%;
    min-width: 0;

    margin-top: 4px;
    padding: 5px 7px;

    overflow: hidden;

    border-radius: 5px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;

    box-sizing: border-box;
}


/* SCHEDULED */

.calendar-event.scheduled {
    background: #007bff;
}


/* COMPLETED */

.calendar-event.completed {
    background: #28a745;
    opacity: 0.80;
}


/* CANCELLED */

.calendar-event.cancelled {
    background: #dc3545;
    opacity: 0.82;
}


/* MORE */

.calendar-more {
    display: block;

    margin-top: 5px;

    color: #6c757d;

    font-size: 10px;
    font-weight: 600;
}


/* ============================================================
   CALENDAR LEGEND
============================================================ */

.calendar-legend {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 16px;
    padding-top: 13px;

    border-top: 1px solid #eeeeee;
}

.legend-item {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #555555;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
}

.legend-dot {
    display: inline-block;

    width: 10px;
    height: 10px;
    min-width: 10px;

    border-radius: 50%;
}


/* LEGEND COLORS */

.legend-dot.scheduled {
    background: #007bff;
}

.legend-dot.completed {
    background: #28a745;
}

.legend-dot.cancelled {
    background: #dc3545;
}

.legend-dot.today {
    background: #ffc107;
}


/* ============================================================
   RIGHT - SCHEDULE LIST
============================================================ */

.schedule-list-section {
    flex: 0 0 32%;
    width: 32%;

    min-width: 330px;
    max-width: 430px;

    display: flex;
    flex-direction: column;

    background: #ffffff;
}


/* ============================================================
   SCHEDULE LIST HEADER
============================================================ */

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

    gap: 12px;

    min-height: 80px;

    padding: 18px;

    background: #f8f9fa;

    border-bottom: 1px solid #dee2e6;
}

.schedule-list-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.schedule-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    min-width: 48px;

    border-radius: 10px;

    background: #e9f2ff;
    color: #007bff;

    font-size: 20px;
}

.schedule-list-heading h4 {
    margin: 0;

    color: #212529;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.schedule-list-heading small {
    display: block;

    margin-top: 4px;

    color: #6c757d;

    font-size: 11px;
}

.schedule-count {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    min-width: 34px;

    border-radius: 50%;

    background: #007bff;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.18);
}


/* ============================================================
   SCHEDULE LIST
============================================================ */

.schedule-list {
    flex: 1;

    padding: 15px;

    max-height: 650px;

    overflow-x: hidden;
    overflow-y: auto;
}

.schedule-list::-webkit-scrollbar {
    width: 6px;
}

.schedule-list::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.schedule-list::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 10px;
}

.schedule-list::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}


/* ============================================================
   CALENDAR SCHEDULE ITEM
============================================================ */

.schedule-list .schedule-item {
    display: block;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    margin-bottom: 12px;
    padding: 15px;

    background: #ffffff;

    border: 1px solid #dee2e6;
    border-left: 4px solid #007bff;

    border-radius: 9px;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.schedule-list .schedule-item:last-child {
    margin-bottom: 0;
}

.schedule-list .schedule-item:hover {
    border-color: #b8d7ff;

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);

    transform: translateY(-1px);
}


/* COMPLETED */

.schedule-list .schedule-item.completed {
    border-left-color: #28a745;
    background: #fbfffc;

    opacity: 0.92;
}


/* CANCELLED */

.schedule-list .schedule-item.cancelled {
    border-left-color: #dc3545;
    background: #fffafa;
}


/* ============================================================
   SCHEDULE ITEM TOP
============================================================ */

.schedule-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    gap: 8px;

    margin-bottom: 7px;
}


/* ============================================================
   PROGRAM CODE
============================================================ */

.schedule-item-code {
    min-width: 0;

    overflow: hidden;

    color: #007bff;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.schedule-list .schedule-item.completed .schedule-item-code {
    color: #28a745;
}

.schedule-list .schedule-item.cancelled .schedule-item-code {
    color: #dc3545;
}


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

.schedule-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 4px 8px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}

.schedule-status.active {
    background: #e8f7ee;
    color: #198754;
}

.schedule-status.completed {
    background: rgba(40, 167, 69, 0.10);
    color: #28a745;
}

.schedule-status.cancelled {
    background: #fdeaea;
    color: #dc3545;
}


/* ============================================================
   SCHEDULE TITLE
============================================================ */

.schedule-list .schedule-item-title {
    display: block;

    width: 100%;
    min-width: 0;

    margin-bottom: 10px;

    color: #212529;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.4;

    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}


/* ============================================================
   INFORMATION ROWS
============================================================ */

.schedule-item-location,
.schedule-item-date,
.schedule-item-time {
    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: 8px;

    margin-top: 7px;

    color: #6c757d;

    font-size: 12px;
    line-height: 1.45;
}

.schedule-item-location i,
.schedule-item-date i,
.schedule-item-time i {
    width: 15px;
    min-width: 15px;

    margin-top: 2px;

    color: #868e96;

    text-align: center;
}

.schedule-item-location span,
.schedule-item-date span,
.schedule-item-time span {
    flex: 1;
    min-width: 0;

    white-space: normal;
    overflow-wrap: anywhere;
}


/* ============================================================
   ACTION AREA
============================================================ */

.schedule-item-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    width: 100%;

    gap: 8px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid #edf0f2;
}


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

.schedule-item-actions .edit-schedule {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 78px;
    height: 36px;

    padding: 0 12px;

    border: 1px solid #007bff;
    border-radius: 6px;

    background: #ffffff;
    color: #007bff;

    font-size: 12px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.schedule-item-actions .edit-schedule:hover {
    background: #007bff;
    color: #ffffff;

    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.18);

    transform: translateY(-1px);
}


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

.schedule-item-actions .cancel-schedule {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 78px;
    height: 36px;

    padding: 0 12px;

    border: 1px solid #dc3545;
    border-radius: 6px;

    background: #ffffff;
    color: #dc3545;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.schedule-item-actions .cancel-schedule:hover {
    background: #dc3545;
    color: #ffffff;

    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.18);

    transform: translateY(-1px);
}

.schedule-item-actions button:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    transform: none !important;
    box-shadow: none !important;
}


/* ============================================================
   CANCELLED MESSAGE
============================================================ */

.cancelled-message {
    display: flex;
    align-items: center;

    width: 100%;

    box-sizing: border-box;

    padding: 9px 11px;

    border-radius: 6px;

    background: #fff0f0;
    color: #dc3545;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   COMPLETED MESSAGE
============================================================ */

.completed-message {
    display: flex;
    align-items: center;

    width: 100%;

    box-sizing: border-box;

    padding: 9px 11px;

    border-radius: 6px;

    background: #effaf2;
    color: #198754;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 35px 20px;

    text-align: center;
}

.schedule-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 13px;

    border-radius: 50%;

    background: #f8f9fa;
    color: #adb5bd;
}

.schedule-empty-icon i {
    font-size: 26px;
}

.schedule-empty p {
    margin: 0;

    color: #868e96;

    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   MODAL
============================================================ */

#schedules-modal .modal-content {
    overflow: hidden;

    border: none;
    border-radius: 12px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
}

#schedules-modal .modal-header {
    padding: 18px 20px;

    border-bottom: 1px solid #edf0f2;
}

#schedules-modal .modal-title {
    color: #212529;

    font-size: 18px;
    font-weight: 700;
}

#schedules-modal .modal-body {
    padding: 20px;
}

#schedules-modal .modal-footer {
    padding: 15px 20px;

    border-top: 1px solid #edf0f2;
}

#schedules-modal .form-group {
    margin-bottom: 15px;
}

#schedules-modal label {
    display: block;

    margin-bottom: 6px;

    color: #495057;

    font-size: 13px;
    font-weight: 600;
}

#schedules-modal .form-control {
    min-height: 38px;

    border: 1px solid #ced4da;
    border-radius: 6px;

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#schedules-modal .form-control:focus {
    border-color: #80bdff;

    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.10);
}

#schedules-modal textarea {
    resize: vertical;
}


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

.announcement-header {
    width: 100%;

    box-sizing: border-box;

    padding: 25px 28px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #198754,
        #157347
    );

    color: #ffffff;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);
}

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

    gap: 20px;
}

.announcement-label {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.7px;

    opacity: 0.95;
}

.announcement-title {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
}

.announcement-subtitle {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.90);

    font-size: 14px;
    line-height: 1.5;
}

.announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;
    min-width: 65px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.16);

    font-size: 28px;
}


/* ============================================================
   ANNOUNCEMENT CARD
============================================================ */

.announcement-card {
    height: 100%;

    overflow: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.announcement-card:hover {
    border-color: #d5dbe1;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.09);

    transform: translateY(-2px);
}


/* ============================================================
   ANNOUNCEMENT TOP BAR
============================================================ */

.announcement-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px 18px;

    background: #f8fafc;

    border-bottom: 1px solid #edf0f2;
}

.announcement-program {
    min-width: 0;

    overflow: hidden;

    color: #344054;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.announcement-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 6px 11px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}


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

.status-upcoming {
    background: #007bff;
    color: #ffffff;
}

.status-ongoing {
    background: #17a2b8;
    color: #ffffff;
}

.status-completed {
    background: #28a745;
    color: #ffffff;
}

.status-cancelled {
    background: #dc3545;
    color: #ffffff;
}


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

.announcement-card-body {
    padding: 20px;
}

.announcement-title-section {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}

.announcement-bell {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    min-width: 48px;

    border-radius: 12px;

    background: #e8f5e9;
    color: #198754;

    font-size: 19px;
}

.announcement-title-section h4 {
    margin: 0 0 3px;

    color: #1f2937;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.announcement-description {
    padding: 14px 16px;

    margin-bottom: 13px;

    border: 1px solid #edf0f2;
    border-radius: 10px;

    background: #f8fafc;
}

.description-title {
    margin-bottom: 7px;

    color: #344054;

    font-size: 13px;
    font-weight: 700;
}

.announcement-description p {
    margin: 0;

    color: #667085;

    font-size: 13px;
    line-height: 1.6;

    word-break: break-word;
}


/* ============================================================
   ANNOUNCEMENT SCHEDULE GRID
============================================================ */

.schedule-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 15px;
}


/*
 * IMPORTANT:
 *
 * Do NOT use .schedule-item here.
 *
 * .schedule-item belongs to the
 * calendar schedule list.
 */

.announcement-schedule-item {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;

    padding: 13px;

    border: 1px solid #edf0f2;
    border-radius: 10px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.announcement-schedule-item:hover {
    border-color: #d7dde3;

    background: #fcfcfc;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   ANNOUNCEMENT SCHEDULE ICON
============================================================ */

.schedule-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    border-radius: 9px;
}

.date-icon {
    background: #e8f1ff;
    color: #007bff;
}

.time-icon {
    background: #e9f8ef;
    color: #198754;
}


/* ============================================================
   ANNOUNCEMENT SCHEDULE CONTENT
============================================================ */

.schedule-content {
    min-width: 0;
}

.schedule-content span {
    display: block;

    margin-bottom: 3px;

    color: #667085;

    font-size: 11px;
}

.schedule-content strong {
    display: block;

    color: #344054;

    font-size: 13px;
    line-height: 1.4;

    word-break: break-word;
}


/* ============================================================
   COUNTDOWN
============================================================ */

.countdown-box {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 18px;
    padding: 14px 16px;

    border-left: 4px solid #007bff;
    border-radius: 10px;

    background: #e8f1ff;
}

.countdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    border-radius: 50%;

    background: #ffffff;
    color: #007bff;
}

.countdown-label {
    display: block;

    margin-bottom: 2px;

    color: #667085;

    font-size: 11px;
}

.countdown-box strong {
    color: #344054;

    font-size: 14px;
}


/* ============================================================
   ONGOING BOX
============================================================ */

.ongoing-box {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 18px;
    padding: 14px 16px;

    border-left: 4px solid #17a2b8;
    border-radius: 10px;

    background: #dff6fa;
    color: #0c5460;
}

.ongoing-box strong {
    font-size: 13px;
}

.ongoing-box span {
    margin-left: 25px;

    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   COMPLETED BOX
============================================================ */

.completed-box {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 18px;
    padding: 14px 16px;

    border-left: 4px solid #28a745;
    border-radius: 10px;

    background: #d4edda;
    color: #155724;
}

.completed-box strong {
    font-size: 13px;
}

.completed-box span {
    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   CANCELLED BOX
============================================================ */

.cancelled-box {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 18px;
    padding: 14px 16px;

    border-left: 4px solid #dc3545;
    border-radius: 10px;

    background: #f8d7da;
    color: #721c24;
}

.cancelled-box strong {
    font-size: 13px;
}

.cancelled-box span {
    margin-left: 25px;

    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   REMINDER
============================================================ */

.reminder-box {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 18px;
    padding: 14px 16px;

    border-left: 4px solid #ffc107;
    border-radius: 10px;

    background: #fff8e1;
}

.reminder-icon {
    color: #d39e00;

    font-size: 17px;
}

.reminder-box strong {
    display: block;

    margin-bottom: 4px;

    color: #664d03;

    font-size: 13px;
}

.reminder-box p {
    margin: 0;

    color: #856404;

    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   ANNOUNCEMENT FOOTER
============================================================ */

.announcement-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 13px 18px;

    border-top: 1px solid #edf0f2;

    background: #fafafa;
}

.official-label {
    color: #667085;

    font-size: 11px;
    font-weight: 600;
}

.announcement-date {
    color: #98a2b3;

    font-size: 11px;

    white-space: nowrap;
}


/* ============================================================
   NO ANNOUNCEMENTS
============================================================ */

.no-announcement {
    padding: 60px 20px;

    text-align: center;

    border: 1px dashed #d0d5dd;
    border-radius: 14px;

    background: #ffffff;
}

.no-announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #e8f5e9;
    color: #198754;

    font-size: 27px;
}

.no-announcement h4 {
    margin: 0 0 7px;

    color: #344054;

    font-size: 18px;
}

.no-announcement p {
    max-width: 520px;

    margin: 0 auto;

    color: #667085;

    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .schedule-planner {
        flex-direction: column;
    }

    .schedule-calendar-section {
        width: 100%;
        flex: none;

        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .schedule-list-section {
        width: 100%;
        max-width: none;
        min-width: 0;

        flex: none;
    }

    .schedule-list {
        max-height: 500px;
    }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 768px) {

    .schedule-calendar-section {
        padding: 15px;
    }

    .calendar-header {
        gap: 7px;
    }

    .calendar-header h3 {
        font-size: 19px;
    }

    .calendar-day {
        min-height: 90px;
    }

    .schedule-list-section {
        border-top: none;
    }

    .schedule-grid {
        grid-template-columns: 1fr;
    }

    .announcement-header-content {
        align-items: flex-start;
    }

}


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

@media (max-width: 576px) {

    .schedule-planner {
        border-radius: 8px;
    }

    .schedule-calendar-section {
        padding: 9px;
    }


    /* CALENDAR HEADER */

    .calendar-header {
        gap: 4px;
        margin-bottom: 12px;
    }

    .calendar-title-wrapper {
        gap: 5px;
    }

    .calendar-header h3 {
        font-size: 16px;
    }


    /* NAV BUTTON */

    .calendar-nav-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;

        border-radius: 6px;
    }

    .today-button {
        padding: 5px 7px;

        font-size: 10px;
    }


    /* WEEKDAYS */

    .calendar-weekdays div {
        padding: 8px 2px;

        font-size: 9px;
    }


    /* DAYS */

    .calendar-day {
        min-height: 68px;

        padding: 5px;
    }

    .calendar-day-number {
        margin-bottom: 4px;

        font-size: 11px;
    }


    /* EVENTS */

    .calendar-event {
        margin-top: 3px;
        padding: 3px 4px;

        border-radius: 3px;

        font-size: 7px;
    }

    .calendar-more {
        font-size: 8px;
    }


    /* LEGEND */

    .calendar-legend {
        gap: 8px;

        margin-top: 11px;
        padding-top: 10px;
    }

    .legend-item {
        gap: 5px;

        font-size: 10px;
    }

    .legend-dot {
        width: 8px;
        height: 8px;
        min-width: 8px;
    }


    /* LIST */

    .schedule-list-header {
        min-height: 70px;

        padding: 13px;
    }

    .schedule-list-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;

        font-size: 17px;
    }

    .schedule-list-heading {
        gap: 9px;
    }

    .schedule-list-heading h4 {
        font-size: 15px;
    }

    .schedule-list-heading small {
        font-size: 10px;
    }

    .schedule-count {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }

    .schedule-list {
        padding: 10px;

        max-height: 500px;
    }


    /* SCHEDULE ITEM */

    .schedule-list .schedule-item {
        padding: 12px;

        margin-bottom: 9px;
    }

    .schedule-item-top {
        align-items: flex-start;
    }

    .schedule-item-code {
        font-size: 11px;
    }

    .schedule-status {
        padding: 4px 6px;

        font-size: 9px;
    }

    .schedule-list .schedule-item-title {
        font-size: 14px;
    }

    .schedule-item-location,
    .schedule-item-date,
    .schedule-item-time {
        font-size: 11px;
    }


    /* BUTTONS */

    .schedule-item-actions {
        gap: 6px;

        margin-top: 12px;
        padding-top: 10px;
    }

    .schedule-item-actions .edit-schedule,
    .schedule-item-actions .cancel-schedule {
        min-width: 70px;
        height: 33px;

        padding: 0 9px;

        font-size: 10px;
    }


    /* ANNOUNCEMENTS */

    .announcement-header {
        padding: 19px;

        border-radius: 11px;
    }

    .announcement-title {
        font-size: 21px;
    }

    .announcement-subtitle {
        font-size: 12px;
    }

    .announcement-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;

        font-size: 20px;
    }

    .announcement-card-top {
        align-items: flex-start;

        flex-direction: column;
    }

    .announcement-status {
        align-self: flex-start;
    }

    .announcement-card-body {
        padding: 15px;
    }

    .announcement-title-section {
        gap: 10px;
    }

    .announcement-bell {
        width: 42px;
        height: 42px;
        min-width: 42px;

        font-size: 17px;
    }

    .announcement-title-section h4 {
        font-size: 16px;
    }

    .announcement-description {
        padding: 12px;
    }

    .announcement-schedule-item {
        padding: 11px;
    }

    .announcement-card-footer {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* ============================================================
   EXTRA SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

    .calendar-header h3 {
        font-size: 14px;
    }

    .calendar-nav-btn {
        width: 29px;
        height: 29px;
        min-width: 29px;

        font-size: 11px;
    }

    .today-button {
        padding: 4px 6px;

        font-size: 9px;
    }

    .calendar-day {
        min-height: 62px;
        padding: 4px;
    }

    .calendar-event {
        font-size: 6.5px;
    }

    .legend-item {
        font-size: 9px;
    }

    .schedule-item-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .schedule-item-actions .edit-schedule,
    .schedule-item-actions .cancel-schedule {
        width: 100%;
    }

    .announcement-header {
        padding: 16px;
    }

    .announcement-icon {
        display: none;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.calendar-day:focus-visible,
.schedule-item-actions button:focus-visible {
    outline: 3px solid rgba(0, 123, 255, 0.20);
    outline-offset: 2px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .calendar-day,
    .calendar-nav-btn,
    .today-button,
    .schedule-list .schedule-item,
    .announcement-card,
    .announcement-schedule-item,
    .schedule-item-actions button {
        transition: none;
    }

}

/* ============================================================
   SUBSIDY RECEIVED RECORDS
============================================================ */

.subsidy-received-card {
    border-radius: 10px;
    border: 1px solid #dee2e6;
    overflow: hidden;
}

.subsidy-received-card .card-header {
    display: flex;
    align-items: center;

    min-height: 55px;

    padding: 14px 18px;

    background: #ffffff;

    border-bottom: 1px solid #e9ecef;
}

.subsidy-received-card .card-title {
    margin: 0;

    font-size: 16px;
    font-weight: 700;
}

.subsidy-received-card .card-title i {
    color: #198754;
}


/* ============================================================
   TABLE
============================================================ */

.subsidy-received-table {
    width: 100%;

    font-size: 13px;
}

.subsidy-received-table thead th {
    padding: 12px 14px;

    background: #f8f9fa;

    color: #495057;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.3px;

    white-space: nowrap;

    border-top: none;
    border-bottom: 1px solid #dee2e6;
}

.subsidy-received-table tbody td {
    padding: 13px 14px;

    color: #495057;

    vertical-align: middle;

    border-color: #edf0f2;
}

.subsidy-received-table tbody tr {
    transition: background 0.15s ease;
}

.subsidy-received-table tbody tr:hover {
    background: #f8fbff;
}


/* ============================================================
   FARMER
============================================================ */

.farmer-number {
    color: #007bff;

    font-size: 12px;
    font-weight: 700;
}

.farmer-name {
    color: #212529;

    font-size: 13px;
    font-weight: 600;
}


/* ============================================================
   PROGRAM
============================================================ */

.program-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 9px;

    border-radius: 5px;

    background: #e8f5e9;
    color: #198754;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}


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

.received-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 20px;

    background: #e8f7ee;
    color: #198754;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.received-status i {
    font-size: 10px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.subsidy-received-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 35px 20px;

    text-align: center;
}

.subsidy-received-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 14px;

    border-radius: 50%;

    background: #e8f5e9;
    color: #198754;

    font-size: 25px;
}

.subsidy-received-empty h5 {
    margin: 0 0 6px;

    color: #343a40;

    font-size: 16px;
    font-weight: 700;
}

.subsidy-received-empty p {
    margin: 0;

    color: #6c757d;

    font-size: 12px;
}


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

@media (max-width: 768px) {

    .subsidy-received-table {
        min-width: 750px;
    }

    .subsidy-received-card .card-header {
        padding: 13px 15px;
    }

    .subsidy-received-card .card-title {
        font-size: 14px;
    }

}

/* =========================================================
   SUBSIDY RECEIVED CARD
========================================================= */

.subsidy-received-card {
    border: 1px solid #e1e7e3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}


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

.subsidy-received-card .card-header {
    background: #ffffff;
    border-bottom: 1px solid #e7ebe8;
    padding: 18px 22px;
}


.subsidy-received-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}


/* TITLE */

.subsidy-received-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #173b25;
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap;
}


.subsidy-received-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eaf7ed;
    color: #198754;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}


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

.subsidy-received-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}


/* LOCATION FILTER */

.subsidy-location-wrapper {
    position: relative;
}


.subsidy-location-wrapper .location-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #198754;
    pointer-events: none;
    z-index: 2;
}


#receivedLocationFilter {
    min-width: 205px;
    height: 40px;
    padding: 6px 35px 6px 34px;
    border: 1px solid #d8e0db;
    border-radius: 8px;
    background-color: #ffffff;
    color: #34423a;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}


#receivedLocationFilter:hover {
    border-color: #198754;
}


#receivedLocationFilter:focus {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.10);
}


/* DOWNLOAD BUTTON */

#downloadReceivedSubsidy {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #198754;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.18);
}


#downloadReceivedSubsidy:hover {
    background: #157347;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(25, 135, 84, 0.22);
}


#downloadReceivedSubsidy:active {
    transform: translateY(0);
}


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

.subsidy-received-card .card-body {
    padding: 20px 22px 22px;
}


/* =========================================================
   SUMMARY BAR
========================================================= */

.subsidy-record-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}


.subsidy-record-summary-text {
    color: #6c757d;
    font-size: 13px;
}


.subsidy-record-summary-text strong {
    color: #198754;
    font-weight: 700;
}


.subsidy-active-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f0f8f3;
    color: #198754;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   TABLE CONTAINER
========================================================= */

.subsidy-received-table-wrapper {
    border: 1px solid #e2e8e4;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   TABLE
========================================================= */

.subsidy-received-table {
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1250px;
}


.subsidy-received-table thead th {
    background: #f7faf8;
    color: #4c5952;
    border-top: none;
    border-bottom: 1px solid #dfe7e2;
    padding: 14px 13px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    white-space: nowrap;
    vertical-align: middle;
}


.subsidy-received-table tbody td {
    padding: 15px 13px;
    border-top: 1px solid #edf1ee;
    color: #4b5550;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}


.subsidy-received-table tbody tr {
    transition: background 0.18s ease;
}


.subsidy-received-table tbody tr:hover {
    background: #f8fcf9;
}


.subsidy-received-table tbody tr:first-child td {
    border-top: none;
}


/* =========================================================
   ROW NUMBER
========================================================= */

.row-number {
    color: #7b8780;
    font-weight: 600;
    width: 45px;
}


/* =========================================================
   FARMER NUMBER
========================================================= */

.farmer-number {
    color: #087cff;
    font-weight: 700;
    font-size: 13px;
}


/* =========================================================
   FARMER NAME
========================================================= */

.farmer-name {
    color: #29332d;
    font-weight: 600;
}


/* =========================================================
   PROGRAM BADGE
========================================================= */

.program-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 6px 10px;
    border-radius: 7px;
    background: #eaf7ed;
    color: #198754;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   LOCATION
========================================================= */

.subsidy-location-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4d5952;
}


.subsidy-location-cell i {
    color: #198754;
    font-size: 12px;
}


/* =========================================================
   DATES / TIME
========================================================= */

.subsidy-date {
    color: #4c5751;
    font-weight: 500;
}


.subsidy-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4c5751;
    font-weight: 600;
}


.subsidy-time i {
    color: #198754;
    font-size: 12px;
}


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

.received-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 20px;
    background: #eaf8ef;
    color: #198754;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


.received-status i {
    font-size: 11px;
}


/* =========================================================
   EMPTY FILTER STATE
========================================================= */

.subsidy-filter-empty {
    display: none;
    text-align: center;
    padding: 55px 20px;
}


.subsidy-filter-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #edf8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.subsidy-filter-empty-icon i {
    color: #198754;
    font-size: 25px;
}


.subsidy-filter-empty h5 {
    margin-bottom: 6px;
    color: #37423c;
    font-weight: 700;
}


.subsidy-filter-empty p {
    margin: 0;
    color: #89928d;
    font-size: 13px;
}


/* =========================================================
   EMPTY DATABASE STATE
========================================================= */

.subsidy-received-empty {
    text-align: center;
    padding: 65px 20px;
}


.subsidy-received-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eaf7ed;
    display: flex;
    align-items: center;
    justify-content: center;
}


.subsidy-received-empty-icon i {
    color: #198754;
    font-size: 29px;
}


.subsidy-received-empty h5 {
    color: #26352c;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 7px;
}


.subsidy-received-empty p {
    color: #89928d;
    margin: 0;
    font-size: 13px;
}


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

@media (max-width: 991px) {

    .subsidy-received-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .subsidy-received-actions {
        width: 100%;
    }


    .subsidy-location-wrapper {
        flex: 1;
    }


    #receivedLocationFilter {
        width: 100%;
        min-width: 0;
    }


    #downloadReceivedSubsidy {
        white-space: nowrap;
    }

}


@media (max-width: 576px) {

    .subsidy-received-card .card-header {
        padding: 15px;
    }


    .subsidy-received-card .card-body {
        padding: 15px;
    }


    .subsidy-received-title {
        font-size: 16px;
    }


    .subsidy-received-title-icon {
        width: 34px;
        height: 34px;
    }


    .subsidy-received-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .subsidy-location-wrapper {
        width: 100%;
    }


    #receivedLocationFilter,
    #downloadReceivedSubsidy {
        width: 100%;
    }

}

/* ============================================================
   SUBSIDY RECEIVED CARD
============================================================ */

.subsidy-received-card {
    border: 1px solid #e2e8e5;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}


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

.subsidy-received-header {
    background: #ffffff;
    border-bottom: 1px solid #e5ebe7;
    padding: 20px 28px;
}


.subsidy-received-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}


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

.subsidy-received-title h3 {
    margin: 0;
    color: #173d2a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}


/* ============================================================
   FILTER + DOWNLOAD
============================================================ */

.subsidy-received-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}


.subsidy-location-filter {
    min-width: 230px;
}


.subsidy-location-filter select {
    height: 42px;
    border: 1px solid #cfd9d4;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    padding: 0 14px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}


.subsidy-location-filter select:hover {
    border-color: #198754;
}


.subsidy-location-filter select:focus {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12);
}


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

.subsidy-download-btn {
    height: 42px;
    padding: 0 22px;
    border-radius: 9px;
    border: none;
    background: #198754;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s ease;
}


.subsidy-download-btn:hover {
    background: #157347;
    color: #ffffff;
    transform: translateY(-1px);
}


.subsidy-download-btn:active {
    transform: translateY(0);
}


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

.subsidy-received-body {
    padding: 24px 28px 28px;
}


/* ============================================================
   RECORD COUNT
============================================================ */

.received-record-count {
    margin-bottom: 14px;
    color: #64748b;
    font-size: 14px;
}


.received-record-count strong {
    color: #198754;
    font-weight: 700;
}


/* ============================================================
   TABLE WRAPPER
============================================================ */

.received-table-wrapper {
    border: 1px solid #dce6e1;
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: hidden;
}


/* ============================================================
   TABLE
============================================================ */

.subsidy-received-table {
    min-width: 1250px;
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}


.subsidy-received-table thead th {
    background: #f5f8f6;
    color: #475569;
    border-top: none;
    border-bottom: 1px solid #dfe7e3;
    padding: 15px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    white-space: nowrap;
    vertical-align: middle;
}


.subsidy-received-table tbody td {
    padding: 16px;
    border-top: none;
    border-bottom: 1px solid #edf1ef;
    color: #475569;
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
}


.subsidy-received-table tbody tr:last-child td {
    border-bottom: none;
}


.subsidy-received-table tbody tr {
    transition: background 0.15s ease;
}


.subsidy-received-table tbody tr:hover {
    background: #f8fbf9;
}


/* ============================================================
   NUMBER
============================================================ */

.row-number {
    width: 50px;
    color: #475569;
    font-weight: 600;
}


/* ============================================================
   FARMER NUMBER
============================================================ */

.farmer-number {
    color: #007bff;
    font-weight: 700;
}


/* ============================================================
   FARMER NAME
============================================================ */

.farmer-name {
    color: #1e293b;
    font-weight: 700;
}


/* ============================================================
   PROGRAM BADGE
============================================================ */

.program-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 7px;
    background: #eaf7ee;
    color: #16834e;
    font-weight: 700;
    font-size: 13px;
}


/* ============================================================
   QUANTITY
============================================================ */

.quantity-value {
    font-weight: 600;
    color: #334155;
}


/* ============================================================
   LOCATION
============================================================ */

.location-value {
    color: #475569;
    font-weight: 600;
}


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

.received-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 20px;
    background: #e8f7ef;
    color: #16834e;
    font-size: 12px;
    font-weight: 700;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.subsidy-received-empty {
    padding: 65px 20px;
    text-align: center;
}


.subsidy-received-empty h5 {
    margin: 0 0 8px;
    color: #334155;
    font-size: 17px;
    font-weight: 700;
}


.subsidy-received-empty p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}


/* ============================================================
   FILTER EMPTY STATE
============================================================ */

.received-filter-empty {
    padding: 50px 20px;
    text-align: center;
}


.received-filter-empty h5 {
    margin: 0 0 8px;
    color: #475569;
    font-size: 17px;
    font-weight: 700;
}


.received-filter-empty p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 992px) {

    .subsidy-received-header {
        padding: 18px 20px;
    }

    .subsidy-received-body {
        padding: 20px;
    }

    .subsidy-received-header-inner {
        align-items: stretch;
    }

    .subsidy-received-title {
        width: 100%;
    }

    .subsidy-received-tools {
        width: 100%;
    }

    .subsidy-location-filter {
        flex: 1;
    }

}


@media (max-width: 576px) {

    .subsidy-received-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .subsidy-location-filter {
        width: 100%;
        min-width: 0;
    }

    .subsidy-download-btn {
        width: 100%;
    }

    .subsidy-received-title h3 {
        font-size: 18px;
    }

}

/* =========================================================
   AUDIT LOGS - DATATABLE PAGINATION
========================================================= */


/* =========================================================
   PAGINATION CONTAINER
   No border / no background / no outer box
========================================================= */

#audit-logs-table_wrapper .dataTables_paginate,
#audit-logs-table_wrapper .dt-paging {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 5px !important;

    margin: 0 !important;
    padding: 14px 18px !important;

    /* REMOVE OUTER BOX */
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}


/* =========================================================
   REMOVE ANY PSEUDO-ELEMENT BOX
========================================================= */

#audit-logs-table_wrapper .dataTables_paginate::before,
#audit-logs-table_wrapper .dataTables_paginate::after,
#audit-logs-table_wrapper .dt-paging::before,
#audit-logs-table_wrapper .dt-paging::after {

    display: none !important;

    content: none !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 1.x
   PAGINATION BUTTONS
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button {

    box-sizing: border-box !important;

    /* Size */
    min-width: 42px !important;
    width: 42px !important;
    height: 40px !important;

    /* Remove default spacing */
    margin: 0 !important;
    padding: 0 !important;

    /* Center text */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Individual button border */
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;

    /* Background */
    background: #ffffff !important;
    background-image: none !important;

    /* Text */
    color: #495057 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;

    /* Remove default DataTables styling */
    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


/* =========================================================
   HOVER
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button:not(.current):not(.disabled):hover {

    background: #f8f9fa !important;
    background-image: none !important;

    border-color: #adb5bd !important;

    color: #212529 !important;

    box-shadow: none !important;
}


/* =========================================================
   ACTIVE / CURRENT PAGE
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button.current {

    background: #008f39 !important;
    background-image: none !important;

    border: 1px solid #008f39 !important;

    color: #ffffff !important;

    font-weight: 600 !important;

    box-shadow: none !important;
}


/* =========================================================
   ACTIVE PAGE HOVER
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button.current:hover {

    background: #008f39 !important;
    background-image: none !important;

    border-color: #008f39 !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* =========================================================
   DISABLED BUTTONS
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button.disabled {

    background: #f8f9fa !important;
    background-image: none !important;

    border: 1px solid #e9ecef !important;

    color: #adb5bd !important;

    cursor: not-allowed !important;

    opacity: 1 !important;

    box-shadow: none !important;
}


/* =========================================================
   DISABLED HOVER
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button.disabled:hover {

    background: #f8f9fa !important;

    border-color: #e9ecef !important;

    color: #adb5bd !important;

    box-shadow: none !important;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button.previous,

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button.next {

    min-width: 86px !important;
    width: 86px !important;
}


/* =========================================================
   ELLIPSIS
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.ellipsis {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 42px !important;
    width: 42px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #495057 !important;

    font-size: 14px !important;
    line-height: 1 !important;

    background: transparent !important;
    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 2.x
   PAGINATION BUTTONS
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button {

    box-sizing: border-box !important;

    min-width: 42px !important;
    width: 42px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;

    background: #ffffff !important;
    background-image: none !important;

    color: #495057 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


/* =========================================================
   DATATABLES 2.x HOVER
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button:not(.current):not(.disabled):hover {

    background: #f8f9fa !important;
    background-image: none !important;

    border-color: #adb5bd !important;

    color: #212529 !important;

    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 2.x ACTIVE
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button.current {

    background: #008f39 !important;
    background-image: none !important;

    border: 1px solid #008f39 !important;

    color: #ffffff !important;

    font-weight: 600 !important;

    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 2.x ACTIVE HOVER
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button.current:hover {

    background: #008f39 !important;

    border-color: #008f39 !important;

    color: #ffffff !important;

    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 2.x DISABLED
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button.disabled {

    background: #f8f9fa !important;
    background-image: none !important;

    border: 1px solid #e9ecef !important;

    color: #adb5bd !important;

    opacity: 1 !important;

    cursor: not-allowed !important;

    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 2.x DISABLED HOVER
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button.disabled:hover {

    background: #f8f9fa !important;

    border-color: #e9ecef !important;

    color: #adb5bd !important;

    box-shadow: none !important;
}


/* =========================================================
   DATATABLES 2.x PREVIOUS / NEXT
========================================================= */

#audit-logs-table_wrapper
.dt-paging-button.previous,

#audit-logs-table_wrapper
.dt-paging-button.next {

    min-width: 86px !important;
    width: 86px !important;
}


/* =========================================================
   REMOVE FOCUS / ACTIVE OUTLINE
========================================================= */

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button:focus,

#audit-logs-table_wrapper
.dataTables_paginate
.paginate_button:active,

#audit-logs-table_wrapper
.dt-paging-button:focus,

#audit-logs-table_wrapper
.dt-paging-button:active {

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   BOOTSTRAP PAGINATION OVERRIDE
========================================================= */

#audit-logs-table_wrapper
.pagination {

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: transparent !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}


/* =========================================================
   BOOTSTRAP PAGE ITEM
========================================================= */

#audit-logs-table_wrapper
.pagination .page-item {

    margin: 0 !important;

    border: none !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   BOOTSTRAP PAGE LINK
========================================================= */

#audit-logs-table_wrapper
.pagination .page-link {

    box-shadow: none !important;

    outline: none !important;
}


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

@media (max-width: 768px) {

    #audit-logs-table_wrapper .dataTables_paginate,
    #audit-logs-table_wrapper .dt-paging {

        justify-content: center !important;

        padding: 12px 8px !important;

        gap: 4px !important;

        flex-wrap: wrap !important;

        border: none !important;

        background: transparent !important;
    }


    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button,

    #audit-logs-table_wrapper
    .dt-paging-button {

        min-width: 38px !important;
        width: 38px !important;
        height: 38px !important;

        font-size: 13px !important;
    }


    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button.previous,

    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button.next,

    #audit-logs-table_wrapper
    .dt-paging-button.previous,

    #audit-logs-table_wrapper
    .dt-paging-button.next {

        min-width: 70px !important;
        width: 70px !important;
    }
}


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

@media (max-width: 480px) {

    #audit-logs-table_wrapper .dataTables_paginate,
    #audit-logs-table_wrapper .dt-paging {

        justify-content: center !important;

        padding: 10px 5px !important;

        gap: 3px !important;
    }


    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button,

    #audit-logs-table_wrapper
    .dt-paging-button {

        min-width: 34px !important;
        width: 34px !important;
        height: 36px !important;

        font-size: 12px !important;
    }


    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button.previous,

    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button.next,

    #audit-logs-table_wrapper
    .dt-paging-button.previous,

    #audit-logs-table_wrapper
    .dt-paging-button.next {

        min-width: 65px !important;
        width: 65px !important;
    }
}

/* =========================================================
   DATATABLE BOTTOM AREA
========================================================= */

#audit-logs-table_wrapper .dataTables_info {
    padding: 14px 18px;
    color: #6c757d;
    font-size: 14px;
}

#audit-logs-table_wrapper .dataTables_length {
    padding: 14px 18px;
}

/* Bottom DataTables row */
#audit-logs-table_wrapper
.row:last-child {
    align-items: center;
}

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

@media (max-width: 768px) {

    #audit-logs-table_wrapper .dataTables_paginate {
        justify-content: center;
        flex-wrap: wrap;
        padding: 12px;
    }

    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button {
        min-width: 38px;
        height: 38px;
        padding: 0 9px !important;
        font-size: 13px;
    }

    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button.previous,
    #audit-logs-table_wrapper
    .dataTables_paginate
    .paginate_button.next {
        min-width: 70px;
    }

    #audit-logs-table_wrapper .dataTables_info {
        text-align: center;
        padding-bottom: 5px;
    }
}

.confirmation-box {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #d4edda;
    background: #f4fff6;
    border-radius: 10px;
}

.confirmation-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.confirmation-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 50%;
    background: #d4edda;
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.confirmation-text strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.confirmation-text p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.btn-confirm-received {
    width: 100%;
    border-radius: 7px;
    padding: 10px 15px;
    font-weight: 600;
}

/* =========================================================
   TREND ANALYSIS
========================================================= */

.analytics-trend-card {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}


.analytics-trend-header {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}


.analytics-trend-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}


.analytics-trend-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}


.analytics-trend-title h3 i {
    margin-right: 8px;
}


.analytics-trend-title p {
    margin: 5px 0 0;
    color: #6c757d;
    font-size: 13px;
}


.analytics-trend-filter {
    min-width: 160px;
}


.analytics-trend-filter label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
}


.analytics-trend-filter select {
    min-width: 160px;
}


.analytics-trend-body {
    padding: 20px;
}


.trend-panel {
    padding: 20px;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 20px;
}


.trend-panel:last-child {
    margin-bottom: 0;
}


.trend-panel-header {
    margin-bottom: 15px;
}


.trend-panel-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}


.trend-panel-header h4 i {
    margin-right: 7px;
}


.trend-panel-header small {
    color: #6c757d;
}


.trend-chart-container {
    position: relative;
    width: 100%;
    height: 320px;
}


@media (max-width: 768px) {

    .analytics-trend-header-inner {
        align-items: stretch;
    }


    .analytics-trend-filter {
        width: 100%;
    }


    .analytics-trend-filter select {
        width: 100%;
    }


    .trend-chart-container {
        height: 260px;
    }

}

.status-rescheduled-card {
    border-top: 4px solid #ffc107;
}


.announcement-status.status-rescheduled {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}


.rescheduled-box {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}


.rescheduled-box-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 15px;
}


.rescheduled-box > span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
}


.rescheduled-new-date,
.rescheduled-new-time {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 193, 7, 0.12);
    border-radius: 6px;
    font-size: 13px;
}


.rescheduled-new-date i,
.rescheduled-new-time i {
    color: #856404;
}

.dashboard-card-header {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.mini-statistics {
    margin-top: 0 !important;
}
/* ============================================================
   COMPACT REGISTRATION DETAILS MODAL
============================================================ */

#registrationDetailsModal .modal-dialog {
    max-width: 800px;
}

#registrationDetailsModal .modal-header {
    padding: 12px 18px;
}

#registrationDetailsModal .modal-body {
    padding: 16px 18px;
}

#registrationDetailsModal .modal-footer {
    padding: 10px 18px;
}

#registrationDetailsModal .registration-section {
    margin-bottom: 14px;
}

#registrationDetailsModal .registration-section-title {
    margin-bottom: 8px;
}

#registrationDetailsModal .registration-info-grid {
    gap: 8px;
}

#registrationDetailsModal .registration-info-item {
    padding: 8px 10px;
}

#registrationDetailsModal .registration-label {
    font-size: 11px;
}

#registrationDetailsModal .registration-value {
    font-size: 13px;
}

#registrationDetailsModal .registration-alert {
    padding: 10px 12px;
    margin-bottom: 12px;
}

#registrationDetailsModal .registration-alert h6 {
    margin-bottom: 3px;
}

#registrationDetailsModal .registration-alert p {
    margin-bottom: 3px;
}

#registrationDetailsModal .registration-modal-icon {
    width: 36px;
    height: 36px;
}

#registrationDetailsModal .registration-modal-icon i {
    font-size: 16px;
}


#farmer_id + .select2-container {
    width: 100% !important;
}


#farmer_id + .select2-container
.select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;

    padding: 0 12px !important;

    border: 1px solid #ced4da !important;
    border-radius: 4px !important;

    background-color: #fff !important;
}

/* Farmer name / placeholder */

#farmer_id + .select2-container
.select2-selection--single
.select2-selection__rendered {
    line-height: 36px !important;

    padding-left: 0 !important;
    padding-right: 25px !important;

    color: #495057 !important;
}

/* Placeholder */

#farmer_id + .select2-container
.select2-selection--single
.select2-selection__rendered {
    color: #6c757d !important;
}


#farmer_id + .select2-container
.select2-selection--single
.select2-selection__arrow {
    height: 36px !important;

    right: 8px !important;
    top: 1px !important;
}


#farmer_id + .select2-container
.select2-dropdown {

    margin-top: 0 !important;

    border: 1px solid #ced4da !important;

    border-top: 0 !important;

    border-radius: 0 0 4px 4px !important;

    background: #fff !important;

    overflow: hidden !important;
}


#farmer_id + .select2-container
.select2-search--dropdown {

    padding: 0 !important;

    margin: 0 !important;

    background: #fff !important;
}


#farmer_id + .select2-container
.select2-search--dropdown
.select2-search__field {

    display: block !important;

    width: 100% !important;

    height: 38px !important;

    margin: 0 !important;

    padding: 6px 12px !important;

    border: 0 !important;

    border-bottom: 1px solid #ced4da !important;

    border-radius: 0 !important;

    outline: none !important;

    box-shadow: none !important;

    background: #fff !important;
}


/* Search focus */

#farmer_id + .select2-container
.select2-search--dropdown
.select2-search__field:focus {

    border: 0 !important;

    border-bottom: 1px solid #ced4da !important;

    outline: none !important;

    box-shadow: none !important;
}


#farmer_id + .select2-container
.select2-results__options {

    max-height: 220px !important;

    overflow-y: auto !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* Individual farmer */

#farmer_id + .select2-container
.select2-results__option {

    padding: 8px 12px !important;

    margin: 0 !important;
}


/* Highlighted farmer */

#farmer_id + .select2-container
.select2-results__option--highlighted {

    background-color: #007bff !important;

    color: #fff !important;
}


#farmer_id + .select2-container--open
.select2-selection--single {

    border-color: #80bdff !important;

    border-radius: 4px 4px 0 0 !important;

    box-shadow: 0 0 0 0.2rem
        rgba(0, 123, 255, 0.10) !important;
}
/* =========================================================
   LOCATION SELECT2 DESIGN
========================================================= */

.subsidy-location-filter {
    min-width: 280px;
}

.subsidy-location-filter .select2-container {
    width: 100% !important;
}

.subsidy-location-filter .select2-selection--single {
    height: 42px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.subsidy-location-filter
.select2-selection--single
.select2-selection__rendered {
    color: #495057 !important;
    font-size: 16px !important;
    line-height: 40px !important;
    padding-left: 14px !important;
    padding-right: 40px !important;
}

.subsidy-location-filter
.select2-selection--single
.select2-selection__arrow {
    height: 40px !important;
    width: 35px !important;
    right: 5px !important;
    top: 1px !important;
}

.subsidy-location-filter
.select2-selection--single
.select2-selection__arrow b {
    border-color: #777 transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}

/* Hover */
.subsidy-location-filter
.select2-container--default
.select2-selection--single:hover {
    border-color: #80bdff !important;
}

/* Focus / opened */
.subsidy-location-filter
.select2-container--default.select2-container--open
.select2-selection--single {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.10) !important;
}

/* =========================================================
   DROPDOWN LIST
========================================================= */

.select2-container--default .select2-dropdown {
    border: 1px solid #80bdff !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}

.select2-container--default
.select2-search--dropdown {
    padding: 8px !important;
    background: #fff !important;
}

.select2-container--default
.select2-search--dropdown
.select2-search__field {
    height: 36px !important;
    border: 1px solid #ced4da !important;
    border-radius: 5px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    outline: none !important;
}

.select2-container--default
.select2-search--dropdown
.select2-search__field:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.12rem rgba(0, 123, 255, 0.10) !important;
}

.select2-container--default
.select2-results__option {
    padding: 9px 12px !important;
    font-size: 14px !important;
}

.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background-color: #198754 !important;
    color: #fff !important;
}

.select2-container--default
.select2-results__option[aria-selected="true"] {
    background-color: #e9f7ef !important;
    color: #198754 !important;
}
.seed-eval-page{--se-green:#21864b;--se-green-dark:#17683a;--se-ink:#243447;--se-muted:#6b7785;--se-line:#e7edf1;--se-soft:#f6f9f7;color:var(--se-ink);padding-bottom:24px}
.seed-eval-page .se-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#17683a 0%,#21864b 58%,#42a66a 100%);border-radius:18px;padding:28px 30px;color:#fff;box-shadow:0 10px 28px rgba(25,105,59,.16);margin-bottom:22px}
.seed-eval-page .se-hero:after{content:"";position:absolute;width:240px;height:240px;border:34px solid rgba(255,255,255,.08);border-radius:50%;right:-55px;top:-100px;pointer-events:none}
.seed-eval-page .se-hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.seed-eval-page .se-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;opacity:.8;margin-bottom:7px}
.seed-eval-page .se-hero h2{font-weight:800;font-size:clamp(1.35rem,2vw,1.9rem);margin:0 0 8px;color:#fff}
.seed-eval-page .se-hero p{margin:0;max-width:690px;color:rgba(255,255,255,.86);font-size:.94rem;line-height:1.55}
.seed-eval-page .se-export{background:#fff;color:var(--se-green-dark);border:0;border-radius:10px;padding:11px 16px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.08);white-space:nowrap;transition:transform .18s,box-shadow .18s}
.seed-eval-page .se-export:hover{color:var(--se-green-dark);transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.13);text-decoration:none}
.seed-eval-page .se-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}
.seed-eval-page .se-overview-card{background:#fff;border:1px solid var(--se-line);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:15px;box-shadow:0 4px 14px rgba(27,51,73,.035)}
.seed-eval-page .se-overview-icon{width:48px;height:48px;border-radius:13px;background:#eaf6ee;color:var(--se-green);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto}
.seed-eval-page .se-overview-label{color:var(--se-muted);font-size:.82rem;margin-bottom:3px}
.seed-eval-page .se-overview-number{font-size:1.55rem;line-height:1.2;font-weight:800;color:var(--se-ink)}
.seed-eval-page .se-distribution{border:1px solid var(--se-line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 22px rgba(25,45,65,.055);margin-bottom:24px}
.seed-eval-page .se-dist-head{padding:20px 22px;background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);border-bottom:1px solid var(--se-line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:4px solid var(--se-green)}
.seed-eval-page .se-dist-title{font-size:1.12rem;font-weight:800;margin:0 0 7px;overflow-wrap:anywhere}
.seed-eval-page .se-dist-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--se-muted);font-size:.82rem}
.seed-eval-page .se-meta-pill{display:inline-flex;align-items:center;gap:6px;background:#f1f5f3;border-radius:7px;padding:5px 9px}
.seed-eval-page .se-status{display:inline-flex;align-items:center;gap:7px;border-radius:30px;padding:8px 13px;font-size:.78rem;font-weight:800;white-space:nowrap}
.seed-eval-page .se-status.badge-success{background:#e4f5e9;color:#18713b}.seed-eval-page .se-status.badge-warning{background:#fff4d7;color:#825d00}.seed-eval-page .se-status.badge-danger{background:#fde8e7;color:#a72d2a}.seed-eval-page .se-status.badge-secondary{background:#eef1f4;color:#596575}
.seed-eval-page .se-dist-body{padding:22px}
.seed-eval-page .se-note{display:flex;gap:9px;align-items:flex-start;background:#f3f8ff;border:1px solid #e0ebfa;color:#52677f;padding:11px 13px;border-radius:10px;font-size:.82rem;margin-bottom:20px}
.seed-eval-page .se-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.seed-eval-page .se-metric{border:1px solid var(--se-line);border-radius:12px;padding:16px;background:#fff;min-width:0}
.seed-eval-page .se-metric-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px;font-size:.87rem;font-weight:750}
.seed-eval-page .se-metric-label{display:flex;align-items:center;gap:8px}.seed-eval-page .se-metric-icon{font-size:1rem}
.seed-eval-page .se-metric-value{font-size:1.3rem;font-weight:850;white-space:nowrap}
.seed-eval-page .se-progress{height:7px;background:#edf1f4;border-radius:10px;overflow:hidden}.seed-eval-page .se-progress-bar{height:100%;border-radius:10px;max-width:100%}.seed-eval-page .se-progress-bar.bg-success{background:#28a745}.seed-eval-page .se-progress-bar.bg-warning{background:#f0b429}.seed-eval-page .se-progress-bar.bg-danger{background:#dc3545}
.seed-eval-page .se-metric-foot{font-size:.78rem;color:var(--se-muted);margin-top:10px}
.seed-eval-page .se-dist-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:15px;border-top:1px solid var(--se-line);color:var(--se-muted);font-size:.83rem}
.seed-eval-page .se-section{margin-top:27px}.seed-eval-page .se-section-heading{display:flex;align-items:center;gap:11px;margin-bottom:13px}.seed-eval-page .se-section-icon{width:36px;height:36px;border-radius:10px;background:#eaf6ee;color:var(--se-green);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.seed-eval-page .se-section-heading h4{font-size:1rem;font-weight:800;margin:0}.seed-eval-page .se-section-heading p{font-size:.8rem;color:var(--se-muted);margin:3px 0 0}
.seed-eval-page .se-table-wrap{border:1px solid var(--se-line);border-radius:11px;overflow:hidden}.seed-eval-page .se-table{margin:0;font-size:.84rem;min-width:930px}.seed-eval-page .se-table thead th{background:#f4f7f5;color:#526173;border-top:0;border-bottom:1px solid var(--se-line);font-size:.73rem;letter-spacing:.045em;text-transform:uppercase;padding:13px 14px;vertical-align:middle}.seed-eval-page .se-table td{padding:14px;vertical-align:top;border-color:#edf1f3;line-height:1.5}.seed-eval-page .se-table tbody tr:hover{background:#fbfdfb}.seed-eval-page .se-question-name{font-weight:800;color:#26384a;margin-bottom:4px}.seed-eval-page .se-question-title{color:var(--se-muted);font-size:.8rem;min-width:180px}.seed-eval-page .se-rating{display:inline-flex;align-items:center;gap:5px;font-weight:800;white-space:nowrap}.seed-eval-page .se-reason{min-width:190px;white-space:normal}.seed-eval-page .se-followup{min-width:220px}.seed-eval-page .se-followup ul{padding-left:18px;margin:0}.seed-eval-page .se-followup li+li{margin-top:5px}.seed-eval-page .se-empty{border:1px dashed #cfdad3;background:#f9fcfa;border-radius:12px;text-align:center;padding:30px 18px;color:var(--se-muted)}.seed-eval-page .se-empty i{font-size:1.7rem;color:#7ba78a;margin-bottom:10px}.seed-eval-page .se-empty h4{font-size:1rem;font-weight:800;color:var(--se-ink)}
.seed-eval-page .se-record-table{min-width:640px}.seed-eval-page .se-record-id{font-weight:800;color:#34465a}.seed-eval-page .se-record-summary{max-width:500px;white-space:normal}

.seed-eval-page .se-filter-panel{background:#fff;border:1px solid var(--se-line);border-radius:15px;padding:20px 22px;margin-bottom:22px;box-shadow:0 5px 18px rgba(25,45,65,.045)}
.seed-eval-page .se-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:17px}
.seed-eval-page .se-filter-heading h3{font-size:1rem;font-weight:800;margin:0 0 5px;color:var(--se-ink)}
.seed-eval-page .se-filter-heading h3 i{color:var(--se-green)}
.seed-eval-page .se-filter-heading p{font-size:.82rem;color:var(--se-muted)}
.seed-eval-page .se-filter-count{font-size:.78rem;font-weight:800;color:var(--se-green-dark);background:#eaf6ee;border-radius:30px;padding:7px 11px;white-space:nowrap}
.seed-eval-page .se-filter-controls{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(210px,1fr) auto;gap:14px;align-items:end}
.seed-eval-page .se-filter-controls label{display:block;font-size:.78rem;font-weight:750;color:#536273;margin-bottom:7px}
.seed-eval-page .se-input-wrap{position:relative}
.seed-eval-page .se-input-wrap>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8b98a5;pointer-events:none}
.seed-eval-page .se-input-wrap input{padding-left:36px;min-height:42px;border-radius:9px;border-color:#dfe6e2}
.seed-eval-page .se-filter-status select{min-height:42px;border-radius:9px;border-color:#dfe6e2}
.seed-eval-page .se-reset-filter{min-height:42px;border-radius:9px;border:1px solid #dfe6e2;background:#f7f9f8;color:#425466;font-weight:700;padding:8px 14px}
.seed-eval-page .se-reset-filter:hover{background:#eaf6ee;color:var(--se-green-dark)}
.seed-eval-page .se-no-filter-results{margin-top:18px;text-align:center;padding:22px 12px;border:1px dashed #d4dfd8;border-radius:10px;background:#f9fcfa;color:var(--se-muted)}
.seed-eval-page .se-no-filter-results i{font-size:1.35rem;color:#83a891;margin-bottom:7px}
.seed-eval-page .se-no-filter-results strong,.seed-eval-page .se-no-filter-results span{display:block}
.seed-eval-page .se-no-filter-results strong{color:var(--se-ink);margin-bottom:3px}
@media(max-width:767.98px){.seed-eval-page .se-filter-panel{padding:16px}.seed-eval-page .se-filter-controls{grid-template-columns:1fr;gap:12px}.seed-eval-page .se-reset-filter{width:100%}}

@media(max-width:767.98px){.seed-eval-page .se-hero{padding:22px 20px;border-radius:14px}.seed-eval-page .se-overview{grid-template-columns:1fr;gap:10px}.seed-eval-page .se-overview-card{padding:14px 16px}.seed-eval-page .se-metrics{grid-template-columns:1fr}.seed-eval-page .se-dist-head{padding:17px}.seed-eval-page .se-dist-body{padding:16px}.seed-eval-page .se-status{white-space:normal}.seed-eval-page .se-export{width:100%;text-align:center}}

/* =========================================================
   DASHBOARD CARDS
========================================================= */

.dashboard-card {
    height: 100%;
    border: 1px solid #e7edf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(27, 45, 67, 0.06);
    overflow: hidden;
}

.dashboard-card-header {
    padding: 20px 22px;
    background: #fff;
    border-bottom: 1px solid #edf1f5;
}

.dashboard-card-header .card-title {
    color: #233044;
    font-size: 17px;
    font-weight: 700;
}

.dashboard-card-header .card-title i {
    color: #4e944f;
}

.dashboard-card-subtitle {
    color: #8994a3;
    font-size: 12px;
    line-height: 1.5;
}

.dashboard-card-body {
    padding: 22px;
}

/* =========================================================
   ANALYTICS FILTER
========================================================= */

.analytics-filter {
    width: 210px;
    max-width: 100%;
    margin-top: 10px;
}

#effectivenessScheduleFilter {
    height: 40px;
    padding: 8px 32px 8px 12px;
    border: 1px solid #dce5ed;
    border-radius: 9px;
    background-color: #fff;
    color: #344256;
    font-size: 13px;
    box-shadow: none;
}

#effectivenessScheduleFilter:focus {
    border-color: #4e944f;
    box-shadow: 0 0 0 3px rgba(78, 148, 79, 0.12);
}

/* =========================================================
   EFFECTIVENESS CHART
========================================================= */

.chart-description {
    margin-bottom: 12px;
}

.chart-description h5 {
    margin-bottom: 5px;
    color: #293548;
    font-size: 15px;
    font-weight: 700;
}

.chart-description p {
    margin-bottom: 0;
    color: #8994a3;
    font-size: 12px;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    min-height: 240px;
}

.chart-wrapper canvas {
    max-width: 100%;
}

.effectiveness-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 15px;
}

.effectiveness-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #667386;
    font-size: 12px;
}

.legend-dot,
.feedback-indicator {
    display: inline-block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.effective-dot {
    background: #28a745;
}

.moderate-dot {
    background: #ffc107;
}

.ineffective-dot {
    background: #dc3545;
}

/* =========================================================
   FEEDBACK SUMMARY
========================================================= */

.feedback-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.feedback-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 95px;
    padding: 16px;
    border: 1px solid #eaf0f5;
    border-radius: 12px;
    background: #f8fafc;
}

.feedback-stat-label {
    color: #7d8999;
    font-size: 12px;
    line-height: 1.4;
}

.feedback-stat strong {
    color: #263448;
    font-size: 24px;
    font-weight: 700;
}

.feedback-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}

.feedback-breakdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid #edf1f5;
    color: #586578;
    font-size: 13px;
}

.feedback-breakdown-item:last-child {
    border-bottom: 0;
}

.feedback-breakdown-item strong {
    margin-left: auto;
    color: #293548;
    font-size: 14px;
}

.positive-indicator {
    background: #28a745;
}

.neutral-indicator {
    background: #ffc107;
}

.negative-indicator {
    background: #dc3545;
}

/* =========================================================
   REGISTRATION REQUESTS TABLE
========================================================= */

#registrationRequestsTable {
    width: 100%;
}

#registrationRequestsTable thead th {
    padding: 14px 12px;
    border-top: 0;
    border-bottom: 1px solid #e8edf3;
    background: #f8fafc;
    color: #758196;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

#registrationRequestsTable tbody td {
    padding: 15px 12px;
    border-top: 1px solid #edf1f5;
    color: #455166;
    font-size: 13px;
    vertical-align: middle;
}

#registrationRequestsTable tbody tr:hover {
    background: #f8fbf8;
}

#registrationRequestsTable .view-registration-btn {
    padding: 7px 12px;
    border: 1px solid #4e944f;
    border-radius: 7px;
    background: #fff;
    color: #4e944f;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

#registrationRequestsTable .view-registration-btn:hover {
    background: #4e944f;
    color: #fff;
}

/* =========================================================
   REGISTRATION MODALS
========================================================= */

#registrationDetailsModal .modal-content,
#registrationConfirmModal .modal-content,
#registrationResultModal .modal-content,
#bulkApproveConfirmModal .modal-content,
#bulkApproveResultModal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(24, 39, 58, 0.16);
    overflow: hidden;
}

#registrationDetailsModal .modal-header,
#registrationConfirmModal .modal-header,
#registrationResultModal .modal-header,
#bulkApproveConfirmModal .modal-header,
#bulkApproveResultModal .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
}

#registrationDetailsModal .modal-title,
#registrationConfirmModal .modal-title,
#registrationResultModal .modal-title,
#bulkApproveConfirmModal .modal-title,
#bulkApproveResultModal .modal-title {
    color: #263448;
    font-size: 17px;
    font-weight: 700;
}

#registrationDetailsModal .modal-body,
#registrationConfirmModal .modal-body,
#registrationResultModal .modal-body,
#bulkApproveConfirmModal .modal-body,
#bulkApproveResultModal .modal-body {
    padding: 22px;
}

#registrationDetailsModal .modal-footer,
#registrationConfirmModal .modal-footer,
#registrationResultModal .modal-footer,
#bulkApproveConfirmModal .modal-footer,
#bulkApproveResultModal .modal-footer {
    padding: 16px 22px;
    border-top: 1px solid #edf1f5;
    background: #fff;
}

#registrationModalContent {
    min-height: 100px;
}

#farmerInformationGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#farmerInformationGrid .farmer-info-item {
    padding: 12px;
    border: 1px solid #e8edf3;
    border-radius: 9px;
    overflow-wrap: anywhere;
}

#farmerInformationGrid .farmer-info-label {
    display: block;
    margin-bottom: 5px;
    color: #8994a3;
    font-size: 11px;
}

#farmerInformationGrid .farmer-info-value {
    color: #344256;
    font-size: 13px;
    font-weight: 600;
}

#duplicateFarmerAlert {
    margin-bottom: 15px;
    border-radius: 9px;
}

#registrationModalError {
    border-radius: 9px;
}

.registration-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #eef7ee;
    color: #4e944f;
    font-size: 24px;
}

.registration-modal-message {
    color: #667386;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
    .dashboard-card-header {
        padding: 18px;
    }

    .dashboard-card-body {
        padding: 18px;
    }

    .chart-wrapper {
        height: 290px;
    }
}

@media (max-width: 575.98px) {
    .analytics-filter {
        width: 100%;
    }

    .chart-wrapper {
        height: 250px;
    }

    .effectiveness-legend {
        justify-content: flex-start;
        gap: 10px 14px;
    }

    .feedback-summary-grid {
        grid-template-columns: 1fr;
    }

    #farmerInformationGrid {
        grid-template-columns: 1fr;
    }

    #registrationDetailsModal .modal-body,
    #registrationConfirmModal .modal-body,
    #registrationResultModal .modal-body,
    #bulkApproveConfirmModal .modal-body,
    #bulkApproveResultModal .modal-body {
        padding: 16px;
    }
}
    /* Soft Badges */
    .badge-soft-primary {
        background-color: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
    }
    .badge-soft-secondary {
        background-color: rgba(108, 117, 125, 0.1);
        color: #495057;
    }
    .badge-primary-light {
        background-color: rgba(13, 110, 253, 0.08);
    }
    .bg-light-subtle {
        background-color: #f8f9fa;
    }

    /* Hover Lift Effect for Buttons */
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    /* Table Sticky Header & Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f5f9;
    }

    /* Table Enhancements */
    .export-preview-table thead th {
        letter-spacing: 0.5px;
        font-size: 0.75rem;
        background-color: #f8f9fa !important;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .export-preview-table tbody tr:hover {
        background-color: rgba(13, 110, 253, 0.02);
    }
.seed-eval-page .se-distribution[hidden],
.seed-eval-page #seSelectScheduleMessage[hidden],
.seed-eval-page #seNoFilterResults[hidden],
.seed-eval-page #sePagination[hidden] {
    display: none !important;
}

.seed-eval-page .se-pagination-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.seed-eval-page .se-page-size {
    display: flex;
    align-items: center;
    gap: 10px;
}

.seed-eval-page .se-page-size label {
    margin-bottom: 0;
    font-weight: 600;
    color: #344054;
    white-space: nowrap;
}

.seed-eval-page .se-page-size select {
    width: auto;
    min-width: 85px;
    border-radius: 8px;
}

.seed-eval-page .se-page-summary {
    color: #667085;
    font-size: 0.9rem;
}

.seed-eval-page .se-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 22px 0;
}

.seed-eval-page .se-page-numbers {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.seed-eval-page .se-page-btn {
    min-width: 38px;
    padding: 7px 12px;
    border: 1px solid #d7e3db;
    border-radius: 8px;
    background: #fff;
    color: #21864b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.seed-eval-page .se-page-btn:hover:not(:disabled) {
    background: #edf7f0;
}

.seed-eval-page .se-page-btn.active,
.seed-eval-page .se-page-btn[aria-current="page"] {
    background: #21864b;
    color: #fff;
    border-color: #21864b;
}

.seed-eval-page .se-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.seed-eval-page #seScheduleFilter {
    min-width: 0;
}

.seed-eval-page .se-select-schedule {
    padding: 35px 20px;
    margin: 20px 0;
    text-align: center;
    background: #f8fbf9;
    border: 1px dashed #cfe3d5;
    border-radius: 14px;
}

.seed-eval-page .se-select-schedule > i {
    margin-bottom: 14px;
    color: #21864b;
    font-size: 36px;
}

.seed-eval-page .se-select-schedule h4 {
    margin-bottom: 8px;
    color: #26372d;
    font-size: 19px;
    font-weight: 700;
}

.seed-eval-page .se-select-schedule p {
    margin: 0;
    color: #667085;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .seed-eval-page .se-pagination-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .seed-eval-page .se-pagination {
        gap: 4px;
    }

    .seed-eval-page .se-page-btn {
        padding: 6px 9px;
    }
}
/* TOTAL BENEFICIARIES — BLUE */
.dashboard-stat-card.stat-warning {
    background: linear-gradient(135deg, #1565D8 0%, #168BEB 100%);
    color: #ffffff;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(21, 101, 216, 0.20);
}

/* REGISTERED FARMER ACCOUNTS — GREEN */
.dashboard-stat-card.stat-danger {
    background: linear-gradient(135deg, #07834F 0%, #18A765 100%);
    color: #ffffff;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(7, 131, 79, 0.20);
}

/* ICON BACKGROUND */
.dashboard-stat-card.stat-warning .stat-icon,
.dashboard-stat-card.stat-danger .stat-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 16px;
}

/* TEXT */
.dashboard-stat-card.stat-warning .stat-label,
.dashboard-stat-card.stat-danger .stat-label,
.dashboard-stat-card.stat-warning .stat-content h2,
.dashboard-stat-card.stat-danger .stat-content h2,
.dashboard-stat-card.stat-warning .stat-content small,
.dashboard-stat-card.stat-danger .stat-content small {
    color: #ffffff;
}

/* LARGE DECORATIVE ICON */
.dashboard-stat-card.stat-warning .stat-decoration,
.dashboard-stat-card.stat-danger .stat-decoration {
    color: rgba(255, 255, 255, 0.14);
}

/* HOVER EFFECT */
.dashboard-stat-card.stat-warning,
.dashboard-stat-card.stat-danger {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dashboard-stat-card.stat-warning:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(21, 101, 216, 0.28);
}

.dashboard-stat-card.stat-danger:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(7, 131, 79, 0.28);
}
/* =========================================
   SUBSIDY CONFIRMATION MODAL
========================================= */

.subsidy-confirm-modal .modal-dialog {
    max-width: 540px;
}

.subsidy-confirm-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.subsidy-confirm-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    align-items: center;
}

.modal-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 12px;
    background: #e8f5e9;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.modal-small-label {
    display: block;
    color: #198754;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.subsidy-confirm-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.subsidy-confirm-modal .close {
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #f1f3f5;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subsidy-confirm-modal .close:hover {
    background: #e9ecef;
}

.subsidy-confirm-modal .modal-body {
    padding: 28px 28px 22px;
}

.confirmation-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.confirmation-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border: 6px solid #f4fbf5;
}

.confirmation-heading h4 {
    font-size: 21px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 7px;
}

.confirmation-heading p {
    color: #6c757d;
    font-size: 14px;
    margin: 0 auto 22px;
    max-width: 390px;
    line-height: 1.6;
}

/* DETAILS */

.confirmation-details {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 5px 17px;
    margin-bottom: 18px;
}

.confirmation-detail-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.confirmation-detail-row:last-child {
    border-bottom: 0;
}

.detail-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 9px;
    background: #e8f5e9;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.detail-content {
    display: flex;
    flex-direction: column;
}

.detail-content span {
    color: #6c757d;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .4px;
}

.detail-content strong {
    color: #212529;
    font-size: 14px;
    margin-top: 1px;
}

/* WARNING */

.confirmation-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 11px;
    padding: 14px;
    margin-bottom: 17px;
}

.warning-icon {
    color: #f0a000;
    font-size: 18px;
    padding-top: 2px;
}

.confirmation-warning strong {
    display: block;
    color: #795500;
    font-size: 13px;
    margin-bottom: 3px;
}

.confirmation-warning p {
    color: #806a35;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* CHECKBOX */

.confirmation-check {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 13px;
    margin: 0;
    transition: .2s ease;
}

.confirmation-check:hover {
    border-color: #198754;
    background: #f8fff9;
}

.confirmation-check input {
    display: none;
}

.custom-checkmark {
    width: 21px;
    height: 21px;
    min-width: 21px;
    border: 2px solid #adb5bd;
    border-radius: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

.custom-checkmark i {
    color: #fff;
    font-size: 11px;
    opacity: 0;
}

.confirmation-check input:checked + .custom-checkmark {
    background: #198754;
    border-color: #198754;
}

.confirmation-check input:checked + .custom-checkmark i {
    opacity: 1;
}

.confirmation-check > span:last-child {
    color: #495057;
    font-size: 13px;
    line-height: 1.5;
}

/* FOOTER */

.subsidy-confirm-modal .modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 17px 24px;
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cancel-confirm,
.btn-confirm-final {
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
}

.btn-cancel-confirm {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
}

.btn-cancel-confirm:hover {
    background: #f1f3f5;
}

.btn-confirm-final {
    background: #198754;
    border: 1px solid #198754;
    color: #fff !important;
}

.btn-confirm-final:hover {
    background: #157347;
    border-color: #146c43;
    color: #fff !important;
}

.disabled-confirm {
    opacity: .45;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* MOBILE */

@media (max-width: 576px) {
    .subsidy-confirm-modal .modal-dialog {
        margin: 15px;
    }

    .subsidy-confirm-modal .modal-body {
        padding: 22px 18px;
    }

    .subsidy-confirm-modal .modal-header {
        padding: 16px 18px;
    }

    .subsidy-confirm-modal .modal-footer {
        padding: 15px 18px;
        flex-direction: column-reverse;
    }

    .subsidy-confirm-modal .modal-footer .btn,
    .confirm-submit-wrapper,
    .confirm-submit-wrapper form,
    .confirm-submit-wrapper a {
        width: 100%;
    }

    .confirm-submit-wrapper a {
        display: block;
        text-align: center;
    }
}
/* Smaller confirmation modal */
.subsidy-confirm-modal .modal-dialog{
    max-width:650px;
}

.confirm-modal-content{
    border:0;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.25);
}

/* Header */
.confirm-modal-header{
    background:#078b2e;
    padding:13px 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.confirm-header-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.confirm-header-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#eaf8ee;
    color:#15934b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.confirm-eyebrow{
    display:block;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
    color:rgba(255,255,255,.65);
    margin-bottom:2px;
}

.confirm-modal-header h5{
    margin:0;
    color:#fff;
    font-size:17px;
    font-weight:800;
}

.confirm-modal-close{
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#aeb5bb;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:13px;
}

/* Body */
.confirm-modal-body{
    padding:17px 18px 14px;
    text-align:center;
}

.confirm-main-check{
    width:46px;
    height:46px;
    border-radius:50%;
    margin:0 auto 8px;
    background:#edf9f0;
    border:4px solid #f5fbf6;
    color:#15934b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.confirm-modal-body h3{
    font-size:18px;
    font-weight:800;
    margin-bottom:4px;
    color:#20252b;
}

.confirm-intro{
    color:#7a838c;
    margin:0 auto 12px;
    max-width:520px;
    font-size:12px;
}

/* Information */
.confirm-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:11px;
    text-align:left;
}

.confirm-info-item{
    min-height:52px;
    border:1px solid #e1e5e8;
    border-radius:9px;
    background:#fafbfb;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:9px;
}

.confirm-info-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:8px;
    background:#eaf7ed;
    color:#15934b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}

.confirm-info-item span{
    display:block;
    font-size:8px;
    font-weight:800;
    letter-spacing:.8px;
    color:#7c858e;
    margin-bottom:2px;
}

.confirm-info-item strong{
    display:block;
    color:#252a2f;
    font-size:11px;
}

/* Warning */
.confirm-careful-box{
    margin-top:9px;
    border:1px solid #f3c451;
    border-radius:9px;
    background:#fff8df;
    padding:9px 11px;
    display:flex;
    gap:10px;
    text-align:left;
    color:#805600;
}

.confirm-warning-icon{
    font-size:17px;
    color:#e4a000;
    padding-top:1px;
}

.confirm-careful-box strong{
    display:block;
    margin-bottom:2px;
    font-size:12px;
}

.confirm-careful-box p{
    margin:0;
    font-size:11px;
    line-height:1.4;
    color:#8a6b28;
}

/* Checkbox */
.confirm-checkbox-box{
    margin:9px 0 0;
    border:1px solid #dfe4e7;
    border-radius:9px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    gap:9px;
    text-align:left;
    cursor:pointer;
    font-weight:700;
    font-size:11px;
    color:#444b52;
}

.confirm-checkbox-box input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.custom-confirm-check{
    width:21px;
    height:21px;
    flex:0 0 21px;
    border-radius:5px;
    background:#fff;
    border:2px solid #aeb7bf;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
}

.confirm-checkbox-box input:checked + .custom-confirm-check{
    background:#15934b;
    border-color:#15934b;
}

/* Footer */
.confirm-modal-footer{
    border-top:1px solid #edf0f2;
    padding:11px 17px;
    display:flex;
    justify-content:flex-end;
    gap:9px;
    background:#fff;
}

.confirm-modal-footer form{
    margin:0;
}

.confirm-cancel-btn{
    border:1px solid #d6dce0;
    background:#fff;
    color:#4d555c;
    font-weight:700;
    font-size:12px;
    padding:8px 14px;
    border-radius:8px;
}

.confirm-submit-btn{
    background:#15934b;
    color:#fff;
    font-weight:800;
    font-size:12px;
    padding:8px 15px;
    border-radius:8px;
    border:0;
}

.confirm-submit-btn:hover:not(:disabled){
    background:#0d7d3d;
    color:#fff;
}

.confirm-submit-btn:disabled{
    background:#a9cdb7;
    color:#fff;
    cursor:not-allowed;
    opacity:.75;
}

/* Mobile */
@media(max-width:767px){
    .subsidy-confirm-modal .modal-dialog{
        max-width:none;
        margin:10px;
    }

    .confirm-info-grid{
        grid-template-columns:1fr;
    }

    .confirm-modal-header{
        padding:12px 14px;
    }

    .confirm-modal-body{
        padding:15px 13px 12px;
    }

    .confirm-modal-footer{
        padding:11px 13px;
        flex-direction:column-reverse;
    }

    .confirm-modal-footer form,
    .confirm-modal-footer .btn{
        width:100%;
    }

    .confirm-submit-btn{
        width:100%;
    }
}
.subsidy-confirm-modal .modal-dialog {
    max-width: 650px;
}

.confirm-modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.confirm-modal-header {
    background: #078b2e;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.confirm-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.confirm-header-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eaf8ee;
    color: #15934b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.confirm-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.58);
    margin-bottom: 3px;
}

.confirm-modal-header h5 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.confirm-modal-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #c8ced3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.confirm-modal-body {
    padding: 24px 22px 20px;
    text-align: center;
}

.confirm-main-check {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: #edf9f0;
    border: 5px solid #f5fbf6;
    color: #15934b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.confirm-modal-body h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #20252b;
}

.confirm-intro {
    color: #7a838c;
    margin: 0 auto 16px;
    max-width: 620px;
}

/* =====================================================
   INFORMATION GRID
===================================================== */

.confirm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 15px;
    text-align: left;
}

.confirm-info-item {
    min-height: 62px;
    border: 1px solid #e1e5e8;
    border-radius: 11px;
    background: #fafbfb;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.confirm-info-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
    background: #eaf7ed;
    color: #15934b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-info-item span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #7c858e;
    margin-bottom: 3px;
}

.confirm-info-item strong {
    display: block;
    color: #252a2f;
    font-size: 13px;
}

/* =====================================================
   WARNING BOX
===================================================== */

.confirm-careful-box {
    margin-top: 13px;
    border: 1px solid #f3c451;
    border-radius: 11px;
    background: #fff8df;
    padding: 13px 15px;
    display: flex;
    gap: 13px;
    text-align: left;
    color: #805600;
}

.confirm-warning-icon {
    font-size: 21px;
    color: #e4a000;
    padding-top: 2px;
}

.confirm-careful-box strong {
    display: block;
    margin-bottom: 4px;
}

.confirm-careful-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #8a6b28;
}

/* =====================================================
   QUANTITY
===================================================== */

.confirm-quantity-box {
    margin-top: 12px;
    border: 1px solid #dfe4e7;
    border-radius: 11px;
    background: #fafbfb;
    padding: 13px;
    text-align: left;
}

.confirm-quantity-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.confirm-quantity-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    background: #eaf7ed;
    color: #15934b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-quantity-title strong {
    display: block;
    color: #252a2f;
    font-size: 13px;
}

.confirm-quantity-title span {
    display: block;
    color: #7a838c;
    font-size: 11px;
    margin-top: 2px;
}

.confirm-quantity-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.quantity-input-group label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #7c858e;
    margin-bottom: 5px;
}

.quantity-input-group .form-control {
    height: 39px;
    border: 1px solid #d6dce0;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: none;
}

.quantity-input-group .form-control:focus {
    border-color: #15934b;
    box-shadow: 0 0 0 2px rgba(21, 147, 75, 0.10);
}

/* =====================================================
   CONFIRM CHECKBOX
===================================================== */

.confirm-checkbox-box {
    margin: 12px 0 0;
    border: 1px solid #dfe4e7;
    border-radius: 11px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
    color: #444b52;
}

.confirm-checkbox-box input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-confirm-check {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 6px;
    background: #fff;
    border: 2px solid #aeb7bf;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.confirm-checkbox-box input:checked + .custom-confirm-check {
    background: #15934b;
    border-color: #15934b;
}

/* =====================================================
   MODAL FOOTER
===================================================== */

.confirm-modal-footer {
    border-top: 1px solid #edf0f2;
    padding: 15px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #fff;
}

.confirm-modal-footer form {
    margin: 0;
}

.confirm-cancel-btn {
    border: 1px solid #d6dce0;
    background: #fff;
    color: #4d555c;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 9px;
}

.confirm-submit-btn {
    background: #15934b;
    color: #fff;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 9px;
    border: 0;
}

.confirm-submit-btn:hover:not(:disabled) {
    background: #0d7d3d;
    color: #fff;
}

.confirm-submit-btn:disabled {
    background: #a9cdb7;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.75;
}

/* =====================================================
   SUCCESS MODAL
===================================================== */

.success-confirm-dialog {
    max-width: 470px;
}

.success-confirm-content {
    position: relative;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.success-confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f4;
    color: #8a9299;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.success-confirm-body {
    padding: 35px 30px 28px;
    text-align: center;
}

.success-check-circle {
    width: 72px;
    height: 72px;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #eaf8ee;
    border: 6px solid #f3fbf5;
    color: #15934b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
}

.success-confirm-body h3 {
    margin: 0 0 7px;
    color: #20252b;
    font-size: 23px;
    font-weight: 800;
}

.success-confirm-body > p {
    margin: 0 auto 20px;
    color: #7a838c;
    font-size: 13px;
    max-width: 350px;
}

.success-confirm-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 20px;
    border: 1px solid #ccebd5;
    border-radius: 11px;
    background: #f0faf3;
    text-align: left;
}

.success-confirm-message > i {
    margin-top: 2px;
    color: #15934b;
    font-size: 21px;
}

.success-confirm-message strong {
    display: block;
    margin-bottom: 3px;
    color: #137b3d;
    font-size: 13px;
}

.success-confirm-message span {
    display: block;
    color: #617068;
    font-size: 12px;
    line-height: 1.5;
}

.success-done-btn {
    width: 100%;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: #15934b;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.success-done-btn:hover,
.success-done-btn:focus {
    background: #0d7d3d;
    color: #fff;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 767px) {
    .subsidy-confirm-modal .modal-dialog {
        margin: 12px;
    }

    .confirm-info-grid {
        grid-template-columns: 1fr;
    }

    .confirm-quantity-inputs {
        grid-template-columns: 1fr;
    }

    .confirm-modal-header {
        padding: 15px;
    }

    .confirm-modal-body {
        padding: 20px 15px 15px;
    }

    .confirm-modal-footer {
        padding: 14px 15px;
        flex-direction: column-reverse;
    }

    .confirm-modal-footer form,
    .confirm-modal-footer .btn {
        width: 100%;
    }

    .confirm-submit-btn {
        width: 100%;
    }
}
.seed-eval-page .se-overall-assessment {
    margin: 0 0 1.5rem;
    padding: 1.35rem;
    border: 1px solid #dcebe0;
    border-left: 5px solid #21864b;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fcf8 0%, #ffffff 72%);
    box-shadow: 0 8px 24px rgba(28, 74, 43, .06);
}
.seed-eval-page .se-overall-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.seed-eval-page .se-overall-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    color: #21864b;
    background: #e4f4e9;
    font-size: 1.25rem;
}
.seed-eval-page .se-overall-heading {
    flex: 1 1 260px;
}
.seed-eval-page .se-overall-eyebrow {
    color: #21864b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .2rem;
}
.seed-eval-page .se-overall-heading h4 {
    margin: 0 0 .3rem;
    color: #20372a;
    font-size: 1.15rem;
    font-weight: 800;
}
.seed-eval-page .se-overall-heading p,
.seed-eval-page .se-overall-primary p {
    margin: 0;
    color: #65736a;
    font-size: .9rem;
    line-height: 1.55;
}
.seed-eval-page .se-overall-content {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
    gap: 1rem;
}
.seed-eval-page .se-overall-primary,
.seed-eval-page .se-overall-stat {
    padding: 1rem;
    border: 1px solid #e5eee7;
    border-radius: 12px;
    background: #fff;
}
.seed-eval-page .se-overall-label,
.seed-eval-page .se-overall-stat span {
    display: block;
    margin-bottom: .4rem;
    color: #738077;
    font-size: .78rem;
    font-weight: 700;
}
.seed-eval-page .se-overall-primary > strong {
    display: block;
    margin-bottom: .45rem;
    color: #21864b;
    font-size: 1.45rem;
    font-weight: 800;
}
.seed-eval-page .se-overall-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
}
.seed-eval-page .se-overall-stat strong {
    display: block;
    color: #24382b;
    font-size: 1.45rem;
    font-weight: 800;
}
.seed-eval-page .se-overall-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .85rem;
}
.seed-eval-page .se-overall-breakdown-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem .55rem;
    padding: .85rem;
    border: 1px solid #e5eee7;
    border-radius: 11px;
    background: rgba(255,255,255,.88);
    color: #56645a;
    font-size: .82rem;
}
.seed-eval-page .se-breakdown-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.seed-eval-page .se-overall-breakdown-item strong {
    color: #26372b;
    font-size: .95rem;
}
.seed-eval-page .se-overall-breakdown-item small {
    grid-column: 2 / 4;
    color: #718076;
    font-size: .78rem;
}
.seed-eval-page .se-overall-caveat {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .9rem;
    color: #68766c;
    font-size: .8rem;
    line-height: 1.5;
}
.seed-eval-page .se-overall-caveat i {
    margin-top: .15rem;
    color: #21864b;
}
@media (max-width: 767.98px) {
    .seed-eval-page .se-overall-content {
        grid-template-columns: 1fr;
    }
    .seed-eval-page .se-overall-breakdown {
        grid-template-columns: 1fr;
    }
}