﻿/* ===== Open Data Report Page ===== */

.open-data-report-page {
    border: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
    background: #fff !important;
    margin: 24px auto !important;
}

    .open-data-report-page > .card-header {
        background: linear-gradient(135deg, #f4efe2 0%, #e8ddc6 100%) !important;
        border-bottom: 1px solid #e7decd !important;
        padding: 18px 24px !important;
        margin: 0 !important;
        text-align: right !important;
    }

        .open-data-report-page > .card-header h5 {
            margin: 0 !important;
            font-size: 30px !important;
            font-weight: 800 !important;
            color: #1f2937 !important;
        }

    .open-data-report-page > .card-body {
        padding: 26px 24px 20px !important;
        background: #fff !important;
    }

    /* filter rows */
    .open-data-report-page .row > .col-md-4 {
        margin-bottom: 10px !important;
    }

    .open-data-report-page .form-group {
        margin-bottom: 0 !important;
    }

    .open-data-report-page .k-label,
    .open-data-report-page .k-input-label,
    .open-data-report-page label {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        margin-bottom: 8px !important;
        display: inline-block !important;
    }

    /* enforce full width nicely */
    .open-data-report-page .k-dropdownlist,
    .open-data-report-page .k-picker,
    .open-data-report-page .k-textbox,
    .open-data-report-page .k-input,
    .open-data-report-page .k-datepicker,
    .open-data-report-page .form-group > span.k-widget {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* section spacing */
    .open-data-report-page .demo-section.k-content.mt-3.col-md-12 {
        margin-top: 26px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* table wrapper */
    .open-data-table-wrap,
    .open-data-report-page .responsive-teblesWRP {
        width: 100% !important;
    }

    /* table */
    .open-data-report-page table.table {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        border: 1px solid #edf1f5 !important;
        background: #fff !important;
    }

    .open-data-report-page table thead th {
        background: #f8fafc !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        padding: 16px 18px !important;
        border-bottom: 1px solid #e8edf3 !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }

    .open-data-report-page table tbody td {
        padding: 18px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        vertical-align: middle !important;
        border-top: 1px solid #eef2f6 !important;
        background: #fff !important;
    }

    .open-data-report-page table tbody tr:nth-child(even) td {
        background: #fcfcfd !important;
    }

    .open-data-report-page table tbody tr:hover td {
        background: #f8fafc !important;
    }

    /* subject column stronger */
    .open-data-report-page table tbody td:first-child {
        color: #1e293b !important;
        font-weight: 700 !important;
    }

    /* file icon */
    .open-data-report-page .con-tooltip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: #fff8e8 !important;
        border: 1px solid #f2ddb0 !important;
        transition: 0.2s ease !important;
        cursor: pointer !important;
        padding-inline: 42px !important;
    }

        .open-data-report-page .con-tooltip:hover {
            background: #f7e8bf !important;
            border-color: #e0c174 !important;
            transform: translateY(-1px) !important;
        }

        .open-data-report-page .con-tooltip img {
            width: 22px !important;
            height: 22px !important;
            object-fit: contain !important;
        }

    /* back button area */
    .open-data-report-page + .col-md-12,
    .open-data-report-page .btn.btn-primary#Back {
        margin-top: 16px !important;
        margin-inline: 16px;
    }

.btn.btn-primary {
    min-width: 140px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #8a6240 0%, #6e4a2f 100%) !important;
    box-shadow: 0 12px 24px rgba(110, 74, 47, 0.20) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* modal */
#attachmentModal .modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.18) !important;
}

#attachmentModal .modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e9edf2 !important;
    padding: 16px 20px !important;
}

#attachmentModal .modal-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
}

#attachmentModal .modal-body {
    padding: 20px !important;
    background: #fff !important;
}

#attachmentModal .modal-footer {
    border-top: 1px solid #eef2f6 !important;
    padding: 14px 20px !important;
}

#attachmentContainer embed,
#attachmentContainer iframe,
#attachmentContainer img {
    max-width: 100% !important;
    border-radius: 12px !important;
}

/* responsive */
@media (max-width: 991.98px) {
    .open-data-report-page > .card-header h5 {
        font-size: 24px !important;
    }

    .open-data-report-page > .card-body {
        padding: 20px 16px !important;
    }

    .open-data-report-page table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   Global Premium Form Fields - Kendo Old + New
   ========================================================= */

.app-form {
    --field-height: 54px;
    --field-radius: 16px;
    --field-bg: #ffffff;
    --field-text: #1f2f46;
    --field-placeholder: #97a4b3;
    --field-border: #d9e2ec;
    --field-border-hover: #c4cfdb;
    --field-border-focus: #b2874b;
    --field-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
    --field-shadow-hover: 0 10px 22px rgba(15, 23, 42, 0.07);
    --field-focus-ring: 0 0 0 4px rgba(178, 135, 75, 0.14);
    --label-color: #24364b;
    --error-color: #d14343;
}

    /* labels */
    .app-form .k-input-label,
    .app-form .k-label,
    .app-form label,
    .app-form .form-label {
        display: inline-block !important;
        margin-bottom: 10px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        color: var(--label-color) !important;
    }

    /* =========================
   Bootstrap normal fields
   ========================= */
    .app-form input.form-control,
    .app-form textarea.form-control,
    .app-form select.form-select,
    .app-form input[type="text"],
    .app-form input[type="password"],
    .app-form input[type="email"],
    .app-form input[type="number"],
    .app-form input[type="search"],
    .app-form input[type="tel"],
    .app-form input[type="date"],
    .app-form textarea,
    .app-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
    .app-form select,
    .app-form #Subject {
        width: 100% !important;
        min-height: var(--field-height) !important;
        border: 1px solid var(--field-border) !important;
        border-radius: var(--field-radius) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
        box-shadow: var(--field-shadow) !important;
        color: var(--field-text) !important;
        font-size: 14px !important;
        transition: all 0.22s ease !important;
        padding-inline: 16px !important;
    }
/*checkbox*/
input[type="checkbox"] {
    width: 28px !important;
    height: 18px !important;
    border-radius: 5px !important;
    flex: 0 0 auto !important;
}

.form-check-input:checked[type="checkbox"] {
    background: #8a6240;
}
    .form-check:not(.form-switch) .form-check-input[type="checkbox"]:after, .form-check-input:checked[type="checkbox"]:after, .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:after {
        content: "✓";
        transition: opacity 0.25s ease-in-out;
        width: 100%;
        height: 100%;
        color: #fff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.67rem;
    }
/* textarea */
.app-form textarea.form-control,
.app-form textarea {
    min-height: 120px !important;
    border-radius: 18px !important;
    resize: vertical !important;
    padding-top: 14px !important;
}

            /* hover/focus normal inputs */
            .app-form input.form-control:hover,
            .app-form textarea.form-control:hover,
            .app-form select.form-select:hover,
            .app-form input[type="text"]:hover,
            .app-form input[type="password"]:hover,
            .app-form input[type="email"]:hover,
            .app-form input[type="number"]:hover,
            .app-form input[type="search"]:hover,
            .app-form input[type="tel"]:hover,
            .app-form input[type="date"]:hover,
            .app-form textarea:hover,
            .app-form input:hover,
            .app-form select:hover,
            .app-form #Subject:hover {
                border-color: var(--field-border-hover) !important;
                box-shadow: var(--field-shadow-hover) !important;
            }

            .app-form input.form-control:focus,
            .app-form textarea.form-control:focus,
            .app-form select.form-select:focus,
            .app-form input[type="text"]:focus,
            .app-form input[type="password"]:focus,
            .app-form input[type="email"]:focus,
            .app-form input[type="number"]:focus,
            .app-form input[type="search"]:focus,
            .app-form input[type="tel"]:focus,
            .app-form input[type="date"]:focus,
            .app-form textarea:focus,
            .app-form input:focus,
            .app-form select:focus,
            .app-form #Subject:focus {
                border-color: var(--field-border-focus) !important;
                box-shadow: var(--field-focus-ring) !important;
                outline: none !important;
                background: #fff !important;
            }

            /* placeholders */
            .app-form input::placeholder,
            .app-form textarea::placeholder {
                color: var(--field-placeholder) !important;
                opacity: 1 !important;
            }

    /* =========================
   Kendo new wrappers
   ========================= */
    .app-form .k-textbox,
    .app-form .k-input,
    .app-form .k-picker,
    .app-form .k-dropdownlist,
    .app-form .k-datepicker,
    .app-form .k-dateinput,
    .app-form .k-combobox,
    .app-form .k-multiselect {
        width: 100% !important;
        min-height: var(--field-height) !important;
        border: 1px solid var(--field-border) !important;
        border-radius: var(--field-radius) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
        box-shadow: var(--field-shadow) !important;
        transition: all 0.22s ease !important;
    }

        .app-form .k-textbox:hover,
        .app-form .k-input:hover,
        .app-form .k-picker:hover,
        .app-form .k-dropdownlist:hover,
        .app-form .k-datepicker:hover,
        .app-form .k-dateinput:hover,
        .app-form .k-combobox:hover,
        .app-form .k-multiselect:hover {
            border-color: var(--field-border-hover) !important;
            box-shadow: var(--field-shadow-hover) !important;
        }

        .app-form .k-textbox:focus-within,
        .app-form .k-input:focus-within,
        .app-form .k-picker:focus-within,
        .app-form .k-dropdownlist:focus-within,
        .app-form .k-datepicker:focus-within,
        .app-form .k-dateinput:focus-within,
        .app-form .k-combobox:focus-within,
        .app-form .k-multiselect:focus-within {
            border-color: var(--field-border-focus) !important;
            box-shadow: var(--field-focus-ring) !important;
            background: #fff !important;
        }

        /* inner text */
        .app-form .k-input-inner,
        .app-form .k-textbox input,
        .app-form .k-picker input,
        .app-form .k-dropdownlist .k-input-inner,
        .app-form .k-dateinput input {
            color: var(--field-text) !important;
            font-size: 14px !important;
            line-height: 1.4 !important;
            padding-inline: 16px !important;
        }

            .app-form .k-input-inner::placeholder,
            .app-form .k-textbox input::placeholder,
            .app-form .k-picker input::placeholder,
            .app-form .k-dateinput input::placeholder {
                color: var(--field-placeholder) !important;
                opacity: 1 !important;
            }

    /* =========================
   Kendo old wrappers
   ========================= */
    .app-form .k-widget.k-dropdown,
    .app-form .k-widget.k-datepicker,
    .app-form .k-widget.k-numerictextbox,
    .app-form span.k-widget.k-dropdown,
    .app-form span.k-widget.k-datepicker,
    .app-form span.k-widget.k-numerictextbox {
        width: 100% !important;
    }

    .app-form .k-dropdown-wrap,
    .app-form .k-picker-wrap,
    .app-form .k-numeric-wrap {
        min-height: var(--field-height) !important;
        border: 1px solid var(--field-border) !important;
        border-radius: var(--field-radius) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
        box-shadow: var(--field-shadow) !important;
        transition: all 0.22s ease !important;
        display: flex !important;
        align-items: center !important;
    }

        .app-form .k-dropdown-wrap:hover,
        .app-form .k-picker-wrap:hover,
        .app-form .k-numeric-wrap:hover {
            border-color: var(--field-border-hover) !important;
            box-shadow: var(--field-shadow-hover) !important;
        }

        .app-form .k-dropdown-wrap.k-state-focused,
        .app-form .k-picker-wrap.k-state-focused,
        .app-form .k-numeric-wrap.k-state-focused,
        .app-form .k-state-focused .k-dropdown-wrap,
        .app-form .k-state-focused .k-picker-wrap,
        .app-form .k-state-focused .k-numeric-wrap {
            border-color: var(--field-border-focus) !important;
            box-shadow: var(--field-focus-ring) !important;
            background: #fff !important;
        }

        .app-form .k-dropdown-wrap .k-input,
        .app-form .k-picker-wrap .k-input,
        .app-form .k-numeric-wrap .k-input {
            min-height: auto !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            color: var(--field-text) !important;
            font-size: 14px !important;
            padding-inline: 16px !important;
            display: flex;
        }

    /* buttons/icons */
    .app-form .k-input-button,
    .app-form .k-picker .k-button,
    .app-form .k-dropdownlist .k-button,
    .app-form .k-combobox .k-button,
    .app-form .k-select,
    .app-form .k-icon,
    .app-form .k-svg-icon {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 0.78 !important;
    }

    /* validation */
    .app-form .text-danger,
    .app-form .field-validation-error,
    .app-form span.text-danger {
      
        margin-top: 6px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        color: var(--error-color) !important;
    }

    /* invalid */
    .app-form .is-invalid,
    .app-form .input-validation-error,
    .app-form .k-invalid,
    .app-form .field-error .k-input,
    .app-form .field-error .k-picker,
    .app-form .field-error .k-dropdownlist,
    .app-form .field-error .k-textbox,
    .app-form .field-error .k-dropdown-wrap,
    .app-form .field-error .k-picker-wrap {
        border-color: #df6a6a !important;
        box-shadow: 0 0 0 4px rgba(209, 67, 67, 0.10) !important;
    }

    /* disabled */
    .app-form input:disabled,
    .app-form textarea:disabled,
    .app-form select:disabled,
    .app-form .k-disabled,
    .app-form .k-state-disabled {
        background: #f5f7fa !important;
        color: #94a3b8 !important;
        border-color: #e2e8f0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

    /* checkbox */
    .app-form .form-check {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .app-form .form-check-input,
    .app-form input[type="checkbox"] {
        width: 24px !important;
        min-height: 30px !important;
        border-radius: 5px !important;
        border: 1px solid #c9d3de !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

        .app-form .form-check-input:checked,
        .app-form input[type="checkbox"]:checked {
            background-color: #8a6240 !important;
            border-color: #8a6240 !important;
        }

    .app-form .form-check-label {
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        cursor: pointer !important;
    }

    /* spacing */
    .app-form .form-group,
    .app-form .demo-section,
    .app-form .k-form-field-wrap {
        margin-bottom: 20px !important;
    }

    /* badge */
    
    .app-form .textBadge {
        min-width: 52px !important;
        height: 54px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

/* rtl/ltr */
html[dir="rtl"] .app-form label,
html[dir="rtl"] .app-form .k-input-label,
html[dir="rtl"] .app-form .text-danger,
html[dir="rtl"] .app-form .form-check-label {
    text-align: right !important;
}

html[dir="ltr"] .app-form label,
html[dir="ltr"] .app-form .k-input-label,
html[dir="ltr"] .app-form .text-danger,
html[dir="ltr"] .app-form .form-check-label {
    text-align: left !important;
}

/* legacy helpers */
.app-form .btn-block {
    width: 100% !important;
}

.app-form .ml-1 {
    margin-left: .25rem !important;
}

.app-form .ml-2 {
    margin-left: .5rem !important;
}

.app-form .mr-auto {
    margin-right: auto !important;
}

/* action buttons wrapper */
.action-btn-wrap {
    display: flex !important;
    align-items: center !important;
}

.action-btn-wrap-top {
    justify-content: flex-start !important;
}

.action-btn-wrap-bottom {
    justify-content: flex-end !important;
}

/* base button */
.app-btn {
    min-width: 148px !important;
    height: 48px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
    transition: all 0.22s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

    /* hover / focus */
    .app-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14) !important;
    }

    .app-btn:focus,
    .app-btn:active,
    .app-btn:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(178, 135, 75, 0.15) !important;
    }

/* add new */
.app-btn-add {
    background: linear-gradient(135deg, #b38a2e 0%, #94711f 100%) !important;
    color: #fff !important;
}

    .app-btn-add:hover {
        background: linear-gradient(135deg, #c19531 0%, #9d7821 100%) !important;
        color: #fff !important;
    }

/* save */
.app-btn-save {
    background: linear-gradient(135deg, #7a5a3b 0%, #5f452d 100%) !important;
    color: #fff !important;
}

    .app-btn-save:hover {
        background: linear-gradient(135deg, #876345 0%, #694b30 100%) !important;
        color: #fff !important;
    }



/* mobile */
@media (max-width: 767.98px) {
    .action-btn-wrap,
    .action-btn-wrap-top,
    .action-btn-wrap-bottom {
        justify-content: stretch !important;
    }

    .app-btn {
        width: 100% !important;
        min-width: 100% !important;
    }
}

.card-footer {
    margin-top: 16px !important;
    border-top: 1px solid #efefef !important;
}


/* ===== Grid action buttons - no HTML change ===== */

.k-grid tbody .k-button.k-grid-Approve,
.k-grid tbody .k-button.k-grid-View {
    min-width: 76px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.2s ease !important;
    margin: 2px !important;
    color: #fff !important;
}

    /* hover */
    .k-grid tbody .k-button.k-grid-Approve:hover,
    .k-grid tbody .k-button.k-grid-View:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12) !important;
        color: #fff !important;
    }

/* approve */
.k-grid tbody .k-button.k-grid-Approve {
    background: linear-gradient(135deg, #2eaf50 0%, #249141 100%) !important;
}

/* reject / view حسب الزر الحالي عندك */
.k-grid tbody .k-button.k-grid-View {
    background: linear-gradient(135deg, #e54855 0%, #cf3140 100%) !important;
}



/* ===== Grid edit + delete buttons ===== */

.k-grid tbody .k-button.k-grid-edit,
.k-grid tbody .k-button.k-grid-Delete {
    min-width: 56px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.2s ease !important;
    margin: 2px !important;
    color: #fff !important;
}

    /* hover */
    .k-grid tbody .k-button.k-grid-edit:hover,
    .k-grid tbody .k-button.k-grid-Delete:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12) !important;
        color: #fff !important;
    }

/* edit */
.k-grid tbody .k-button.k-grid-edit {
    background: linear-gradient(135deg, #4f8df7 0%, #376fd6 100%) !important;
}

/* delete */
.k-grid tbody .k-button.k-grid-Delete {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}


/* =========================
   Global Badge System
   ========================= */

.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}

/* info */
.badge-info {
    background: linear-gradient(135deg, #e8f3ff 0%, #d7ebff 100%) !important;
    color: #2166a5 !important;
    border-color: #bfdcff !important;
}

/* primary */
.badge-primary {
    background: linear-gradient(135deg, #efe7d6 0%, #e4d3ad 100%) !important;
    color: #7b5b20 !important;
    border-color: #d8bf83 !important;
}

/* success */
.badge-success {
    background: linear-gradient(135deg, #e6f7eb 0%, #d2f0dc 100%) !important;
    color: #1f7a41 !important;
    border-color: #b8e3c6 !important;
}

/* danger */
.badge-danger {
    background: linear-gradient(135deg, #fdeaea 0%, #f9d6d8 100%) !important;
    color: #b42332 !important;
    border-color: #efb7be !important;
}

/* warning */
.badge-warning {
    background: linear-gradient(135deg, #fff5df 0%, #fde9b8 100%) !important;
    color: #936312 !important;
    border-color: #f0d28a !important;
}

/* secondary */
.badge-secondary {
    background: linear-gradient(135deg, #f1f4f8 0%, #e4e9f0 100%) !important;
    color: #5b6878 !important;
    border-color: #d3dbe5 !important;
}

/* dark */
.badge-dark {
    background: linear-gradient(135deg, #4c5663 0%, #37414d 100%) !important;
    color: #fff !important;
    border-color: #37414d !important;
}

/* light */
.badge-light {
    background: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

/* hover لو البادج لينك أو interactive */
a.badge:hover,
button.badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.10) !important;
    text-decoration: none !important;
}

/* size صغير لو احتجتي */
.badge.badge-sm {
    min-height: 24px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
}

/* size أكبر */
.badge.badge-lg {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.k-grid tbody .btn.btn-link, a.k-button.k-button-icontext.k-grid-View {
    border: 1px solid #eadfd0 !important;
    background: linear-gradient(135deg, #fbf8f2 0%, #f4ecdf 100%) !important;
    color: #8a6240 !important;
    box-shadow: 0 6px 14px rgba(138, 98, 64, 0.08) !important;
}

    .k-grid tbody .btn.btn-link:hover, a.k-button.k-button-icontext.k-grid-View:hover {
        background: linear-gradient(135deg, #f8f1e6 0%, #efe4d1 100%) !important;
        border-color: #dcc7a5 !important;
        color: #6e4b2f !important;
    }

/* =========================================
   General Kendo/Bootstrap field cleanup
   removes double borders globally
   ========================================= */

.app-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.app-form textarea,
.app-form select,
.app-form .k-input,
.app-form .k-textbox,
.app-form .k-picker,
.app-form .k-dropdownlist,
.app-form .k-datepicker,
.app-form .k-dateinput,
.app-form .k-combobox,
.app-form .k-multiselect,
.app-form .k-dropdown-wrap,
.app-form .k-picker-wrap,
.app-form .k-numeric-wrap {
    border-radius: 16px !important;
}

/* outer wrapper only */
.app-form .k-textbox,
.app-form .k-picker,
.app-form .k-dropdownlist,
.app-form .k-datepicker,
.app-form .k-dateinput,
.app-form .k-combobox,
.app-form .k-multiselect,
.app-form .k-dropdown-wrap,
.app-form .k-picker-wrap,
.app-form .k-numeric-wrap,
.app-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.app-form textarea,
.app-form select {
    border: 1px solid #d9e2ec !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    min-height: 54px !important;
    transition: all 0.2s ease !important;
}

    /* inner input must not draw another border */
    .app-form .k-input-inner,
    .app-form .k-textbox input,
    .app-form .k-picker input,
    .app-form .k-dropdownlist .k-input-inner,
    .app-form .k-dateinput input,
    .app-form .k-dropdown-wrap .k-input,
    .app-form .k-picker-wrap .k-input,
    .app-form .k-numeric-wrap .k-input {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        min-height: 52px !important;
        height: 52px !important;
        padding-inline: 16px !important;
    }

    /* disabled / readonly inner inputs */
    .app-form .k-state-disabled .k-input,
    .app-form .k-disabled .k-input,
    .app-form input[readonly],
    .app-form input:disabled,
    .app-form textarea:disabled,
    .app-form select:disabled {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

/* old kendo wrappers */
.app-form span.k-widget.k-dropdown,
.app-form span.k-widget.k-datepicker,
.app-form span.k-widget.k-numerictextbox,
.app-form span.k-widget.k-textbox {
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* hover */
.app-form .k-textbox:hover,
.app-form .k-picker:hover,
.app-form .k-dropdownlist:hover,
.app-form .k-datepicker:hover,
.app-form .k-dateinput:hover,
.app-form .k-combobox:hover,
.app-form .k-multiselect:hover,
.app-form .k-dropdown-wrap:hover,
.app-form .k-picker-wrap:hover,
.app-form .k-numeric-wrap:hover,
.app-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.app-form textarea:hover,
.app-form select:hover {
    border-color: #c7d2df !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

/* focus only on wrapper */
.app-form .k-textbox:focus-within,
.app-form .k-picker:focus-within,
.app-form .k-dropdownlist:focus-within,
.app-form .k-datepicker:focus-within,
.app-form .k-dateinput:focus-within,
.app-form .k-combobox:focus-within,
.app-form .k-multiselect:focus-within,
.app-form .k-dropdown-wrap.k-state-focused,
.app-form .k-picker-wrap.k-state-focused,
.app-form .k-numeric-wrap.k-state-focused,
.app-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.app-form textarea:focus,
.app-form select:focus {
    border-color: #b2874b !important;
    box-shadow: 0 0 0 4px rgba(178, 135, 75, 0.12) !important;
    outline: none !important;
}

/* remove red double border on validation */
.app-form .input-validation-error,
.app-form .k-invalid,
.app-form .field-validation-error + input,
.app-form .field-validation-error + .k-widget,
.app-form .field-validation-error + .k-textbox,
.app-form .field-validation-error + .k-picker {
    box-shadow: none !important;
}

.app-form .k-invalid,
.app-form .k-textbox.k-invalid,
.app-form .k-picker.k-invalid,
.app-form .k-dropdownlist.k-invalid,
.app-form input.input-validation-error,
.app-form textarea.input-validation-error,
.app-form select.input-validation-error {
    border-color: #e06a6a !important;
    box-shadow: 0 0 0 4px rgba(224, 106, 106, 0.10) !important;
}

/* labels spacing */
.app-form .k-input-label,
.app-form .k-label,
.app-form label {
    margin-bottom: 10px !important;
    display: inline-block !important;
}

/* form rows spacing */
.app-form .row > [class*="col-"] {
    margin-bottom: 14px !important;
}
