/* =========================================================
   SHERQ - GLOBAL KENDO UI THEME
   File: wwwroot/css/kendo-theme-custom.css
   ========================================================= */

:root {
    --brand-900: #003366;
    --brand-700: #004080;
    --brand-500: #1a5fa8;
    --brand-50: #eef3f9;
    --sb-sky: #19b5e6;
    --shadow: 0 30px 70px rgba(0, 10, 30, .12), 0 0 0 1px rgba(255, 255, 255, .06);
    --grid-border: #e2e8f0;
    --grid-text: #243447;
    --grid-muted: #64748b;
    --grid-surface: #ffffff;
    --grid-row-hover: #f0f7ff;
    --grid-radius: 12px;
}

/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

.k-grid,
.k-grid *,
.k-popup,
.k-popup *,
.k-pager,
.k-pager *,
.k-toolbar,
.k-toolbar *,
.k-button,
.k-input,
.k-input-inner,
.k-dropdownlist,
.k-picker,
.k-checkbox,
.k-radio {
    font-family: 'Roboto', sans-serif !important;
}

.k-grid {
    font-size: 13px;
    color: var(--grid-text);
}

/* =========================================================
   GRID CONTAINER
   ========================================================= */

.k-grid {
    border: 1px solid var(--grid-border) !important;
    border-radius: var(--grid-radius) !important;
    overflow: hidden;
    background: var(--grid-surface);
    box-shadow: 0 4px 18px rgba(0, 35, 80, .06);
}

    .k-grid .k-grid-header {
        background: var(--brand-900) !important;
        border-bottom: 0 !important;
    }

    .k-grid .k-grid-header-wrap {
        border-color: rgba(255, 255, 255, .14) !important;
    }

    /* =========================================================
   COLUMN HEADERS
   ========================================================= */

    .k-grid .k-grid-header th,
    .k-grid .k-grid-header .k-table-th {
        background: var(--brand-900) !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        font-size: 12px;
        letter-spacing: .2px;
        padding: 14px 12px !important;
        border-color: rgba(255, 255, 255, .15) !important;
        vertical-align: middle;
        white-space: normal;
        overflow-wrap: anywhere;
    }

        .k-grid .k-grid-header th .k-link,
        .k-grid .k-grid-header th .k-column-title,
        .k-grid .k-grid-header th .k-icon,
        .k-grid .k-grid-header th .k-svg-icon {
            color: #ffffff !important;
        }

        .k-grid .k-grid-header th a:hover {
            color: var(--sb-sky) !important;
        }

    /* =========================================================
   GRID ROWS AND CELLS
   ========================================================= */

    .k-grid .k-grid-content {
        background: var(--grid-surface);
    }

    .k-grid tbody tr,
    .k-grid .k-table-row {
        transition: background-color .15s ease-in-out;
    }

        .k-grid tbody tr:nth-child(even) {
            background-color: #f8fafc;
        }

        .k-grid tbody tr:hover,
        .k-grid .k-table-row:hover {
            background-color: var(--grid-row-hover) !important;
        }

    .k-grid td,
    .k-grid .k-table-td {
        padding: 11px 12px !important;
        border-color: var(--grid-border) !important;
        color: var(--grid-text);
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

    .k-grid tbody tr:last-child td {
        border-bottom: 0;
    }

    /* =========================================================
   TOOLBAR
   ========================================================= */

    .k-grid .k-grid-toolbar,
    .k-grid .k-toolbar {
        padding: 14px 16px !important;
        background: #ffffff !important;
        border-bottom: 1px solid var(--grid-border) !important;
        gap: 8px;
    }

        .k-grid .k-grid-toolbar .k-button,
        .k-grid .k-toolbar .k-button {
            border-radius: 8px !important;
            font-weight: 500 !important;
            min-height: 36px;
            transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
        }

            .k-grid .k-grid-toolbar .k-button:hover,
            .k-grid .k-toolbar .k-button:hover {
                box-shadow: 0 3px 8px rgba(0, 35, 80, .12);
            }

        /* Export buttons */

        .k-grid .k-grid-toolbar .k-grid-excel,
        .k-grid .k-grid-toolbar .k-grid-pdf {
            color: var(--brand-700) !important;
            background: var(--brand-50) !important;
            border: 1px solid #d7e4f2 !important;
        }

            .k-grid .k-grid-toolbar .k-grid-excel:hover,
            .k-grid .k-grid-toolbar .k-grid-pdf:hover {
                background: #dceafa !important;
            }

/* Create button */

#button,
#button.k-button {
    background: var(--sb-sky) !important;
    color: #ffffff !important;
    border: 1px solid var(--sb-sky) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

    #button:hover,
    #button.k-button:hover {
        background: var(--brand-700) !important;
        border-color: var(--brand-700) !important;
        color: #ffffff !important;
    }

/* =========================================================
   SEARCH AND INPUTS
   ========================================================= */

.k-grid .k-grid-search,
.k-grid .k-searchbox {
    border-radius: 8px !important;
    border-color: #d7e0eb !important;
    background: #ffffff !important;
}

    .k-grid .k-grid-search:focus-within,
    .k-grid .k-searchbox:focus-within {
        border-color: var(--sb-sky) !important;
        box-shadow: 0 0 0 3px rgba(25, 181, 230, .13);
    }

.k-grid .k-input-inner,
.k-grid input {
    font-size: 13px;
}

    .k-grid .k-input-inner::placeholder,
    .k-grid input::placeholder {
        color: #94a3b8;
    }

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

.k-grid .k-pager,
.k-grid .k-grid-pager {
    background: #ffffff !important;
    border-top: 1px solid var(--grid-border) !important;
    padding: 10px 14px !important;
    color: var(--grid-muted);
}

    .k-grid .k-pager .k-button,
    .k-grid .k-pager .k-link,
    .k-grid .k-grid-pager .k-button,
    .k-grid .k-grid-pager .k-link {
        border-radius: 7px !important;
    }

    .k-grid .k-pager .k-selected,
    .k-grid .k-pager .k-selected:hover,
    .k-grid .k-grid-pager .k-selected {
        background: var(--brand-900) !important;
        color: #ffffff !important;
        border-color: var(--brand-900) !important;
    }

    .k-grid .k-pager .k-button:hover,
    .k-grid .k-pager .k-link:hover {
        background: var(--brand-50) !important;
        color: var(--brand-900) !important;
    }

/* =========================================================
   SORTING AND FILTER ICONS
   ========================================================= */

.k-grid .k-grid-header .k-sort-icon,
.k-grid .k-grid-header .k-icon,
.k-grid .k-grid-header .k-svg-icon {
    opacity: .95;
}

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

.k-grid .k-button:focus-visible,
.k-grid .k-link:focus-visible,
.k-grid input:focus-visible {
    outline: 2px solid var(--sb-sky) !important;
    outline-offset: 2px;
}

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

@media (max-width: 768px) {
    .k-grid .k-grid-toolbar,
    .k-grid .k-toolbar {
        padding: 10px !important;
        flex-wrap: wrap;
    }

    .k-grid .k-grid-header th,
    .k-grid .k-grid-header .k-table-th {
        padding: 10px 8px !important;
        font-size: 11px;
    }

    .k-grid td,
    .k-grid .k-table-td {
        padding: 9px 8px !important;
    }

    .k-grid .k-pager,
    .k-grid .k-grid-pager {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* =========================================================
   PDF EXPORT
   Keep the export clean and printable
   ========================================================= */

.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager,
.k-pdf-export .k-grid-pager {
    display: none !important;
}

.k-pdf-export .k-grid-header th {
    background: var(--brand-900) !important;
    color: #ffffff !important;
}