/* ========================================
   POLLAROO ADMIN - TELERIK KENDO UI OVERRIDES
   Customizes Telerik components to match Pollaroo branding
   Uses global colors defined in colors.css
   ======================================== */

/* ====> AppBar & Dropdowns <==== */

/* Fix AppBar clipping dropdowns - allow overflow */
.k-appbar {
    overflow: visible !important;
}

/* Fix dropdown menus appearing behind content */
.dropdown-menu {
    z-index: 9999 !important;
}

/* ====> Kendo Buttons <==== */

/* Primary Button - Pollaroo Yellow */
.k-button-solid-primary,
.k-button.k-button-solid-primary {
    background-color: var(--pollaroo-yellow) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--pollaroo-yellow) !important;
}

.k-button-solid-primary:hover,
.k-button.k-button-solid-primary:hover {
    background-color: var(--pollaroo-yellow-dark) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--pollaroo-yellow-dark) !important;
}

.k-button-solid-primary:active,
.k-button.k-button-solid-primary:active {
    background-color: var(--pollaroo-yellow-darker) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--pollaroo-yellow-darker) !important;
}

.k-button-solid-primary:focus,
.k-button.k-button-solid-primary:focus {
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

/* ====> Kendo Grid <==== */

/* Grid Corner Fix - Force square corners for all grids */
.k-grid,
.k-grid .k-grid-pager,
.k-grid .k-pager-wrap,
.k-grid .k-grid-header,
.k-grid .k-grid-content {
    border-radius: 0 !important;
}

/* Grid Hierarchy Column Hiding - Desktop only (hides expand/collapse column for mobile detail templates) */
@media (min-width: 768px) {
    .k-grid .k-hierarchy-cell {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .k-grid .k-detail-cell {
        display: none !important;
    }

    .k-grid tbody > tr > td:first-child:not(.k-hierarchy-cell) {
        display: table-cell !important;
    }

    .k-grid colgroup col:first-child {
        width: 0 !important;
        display: none !important;
    }
}

/* Grid Header */
.k-grid-header {
    background-color: var(--surface-tertiary) !important;
    border-color: var(--border-color) !important;
}

.k-grid-header .k-header {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    border-color: var(--border-color) !important;
}

.k-grid-header .k-header:hover {
    background-color: var(--surface-hover) !important;
}

/* Grid Body */
.k-grid {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
}

.k-grid td {
    background-color: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--divider-color) !important;
}

.k-grid tr:hover td {
    background-color: var(--surface-secondary) !important;
}

.k-grid tr.k-selected td,
.k-grid tr.k-state-selected td {
    background-color: var(--pollaroo-yellow-alpha-08) !important;
    color: var(--text-primary) !important;
}

.k-grid tr.k-alt {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Grid Filter Row */
.k-grid .k-filter-row th {
    background-color: var(--surface-secondary) !important;
    border-color: var(--border-color) !important;
}

.k-grid .k-filter-row .k-textbox,
.k-grid .k-filter-row .k-input {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.k-grid .k-filter-row .k-textbox:focus,
.k-grid .k-filter-row .k-input:focus {
    border-color: var(--pollaroo-yellow) !important;
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

/* ====> Kendo Pager <==== */

.k-pager {
    background-color: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Unselected page number links - use yellow with low opacity */
.k-pager .k-link,
.k-pager-numbers .k-link,
.k-pager .k-pager-numbers .k-link,
.k-pager-wrap .k-link,
.k-pager .k-button,
.k-pager-numbers .k-button,
.k-pager a.k-link,
.k-pager span.k-link {
    color: var(--pollaroo-yellow-alpha-35) !important;
    background-color: var(--surface-secondary) !important;
    border-color: var(--pollaroo-yellow-alpha-15) !important;
}

.k-pager .k-link:hover,
.k-pager-numbers .k-link:hover,
.k-pager .k-pager-numbers .k-link:hover,
.k-pager-wrap .k-link:hover,
.k-pager .k-button:hover,
.k-pager-numbers .k-button:hover,
.k-pager a.k-link:hover,
.k-pager span.k-link:hover {
    background-color: var(--pollaroo-yellow-alpha-15) !important;
    color: var(--pollaroo-yellow) !important;
    border-color: var(--pollaroo-yellow) !important;
}

/* Selected page number - full yellow */
.k-pager .k-selected,
.k-pager .k-state-selected,
.k-pager-numbers .k-selected,
.k-pager-numbers .k-state-selected,
.k-pager .k-pager-numbers .k-selected,
.k-pager-wrap .k-selected,
.k-pager a.k-selected,
.k-pager span.k-selected {
    background-color: var(--pollaroo-yellow) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--pollaroo-yellow) !important;
    font-weight: 700 !important;
}

.k-pager .k-selected:hover,
.k-pager .k-state-selected:hover,
.k-pager-numbers .k-selected:hover,
.k-pager-wrap .k-selected:hover,
.k-pager a.k-selected:hover,
.k-pager span.k-selected:hover {
    background-color: var(--pollaroo-yellow-dark) !important;
    color: var(--text-on-primary) !important;
}

/* Disabled buttons (prev/next when at boundaries) */
.k-pager .k-disabled,
.k-pager .k-state-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ====> Kendo Inputs <==== */

.k-input,
.k-textbox,
.k-picker {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.k-input:focus,
.k-textbox:focus,
.k-picker:focus {
    border-color: var(--pollaroo-yellow) !important;
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

.k-input::placeholder,
.k-textbox::placeholder {
    color: var(--text-disabled) !important;
}

/* ====> Kendo Dropdowns <==== */

.k-dropdown,
.k-dropdownlist {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.k-dropdown:hover,
.k-dropdownlist:hover {
    background-color: var(--surface-hover) !important;
}

.k-dropdown:focus,
.k-dropdownlist:focus {
    border-color: var(--pollaroo-yellow) !important;
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

/* Dropdown Popup */
.k-list-container,
.k-popup {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.k-list-item {
    color: var(--text-secondary) !important;
}

.k-list-item:hover {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

.k-list-item.k-selected,
.k-list-optionlabel.k-selected {
    background-color: var(--pollaroo-yellow-alpha-15) !important;
    color: var(--pollaroo-yellow) !important;
    font-weight: 600 !important;
}

/* ====> Kendo Checkboxes & Radios <==== */

.k-checkbox:checked,
.k-radio:checked {
    background-color: var(--pollaroo-yellow) !important;
    border-color: var(--pollaroo-yellow) !important;
}

.k-checkbox:checked::before,
.k-radio:checked::before {
    color: var(--text-on-primary) !important;
}

.k-checkbox:focus,
.k-radio:focus {
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

/* ====> Kendo Switch <==== */

.k-switch-on .k-switch-thumb {
    background-color: var(--pollaroo-yellow) !important;
}

.k-switch-on .k-switch-track {
    background-color: var(--pollaroo-yellow-dark) !important;
    border-color: var(--pollaroo-yellow-dark) !important;
}

.k-switch:focus {
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

/* ====> Kendo Tabs <==== */

.k-tabstrip {
    background-color: transparent !important;
}

.k-tabstrip-items {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
}

.k-tabstrip-items .k-item {
    color: var(--text-secondary) !important;
    background-color: var(--surface-secondary) !important;
    border-color: var(--border-color) !important;
}

.k-tabstrip-items .k-item:hover {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

.k-tabstrip-items .k-item.k-selected {
    background-color: var(--surface-primary) !important;
    color: var(--pollaroo-yellow) !important;
    border-bottom-color: var(--pollaroo-yellow) !important;
    font-weight: 600 !important;
}

.k-tabstrip-content {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* ====> Kendo Progress Bar <==== */

.k-progressbar {
    background-color: var(--surface-tertiary) !important;
    border-color: var(--border-color) !important;
}

.k-progressbar-value {
    background-color: var(--pollaroo-yellow) !important;
}

/* Progress bar text needs to be dark on yellow background */
.k-progressbar .k-progress-status-wrap {
    color: var(--text-on-primary) !important;
}

/* ====> Kendo DatePicker / TimePicker <==== */

.k-datepicker,
.k-timepicker,
.k-datetimepicker {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.k-datepicker:focus,
.k-timepicker:focus,
.k-datetimepicker:focus {
    border-color: var(--pollaroo-yellow) !important;
    box-shadow: 0 0 0 3px var(--pollaroo-yellow-alpha-15) !important;
}

/* Calendar Popup */
.k-calendar {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
}

.k-calendar .k-header {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.k-calendar .k-content th {
    color: var(--text-tertiary) !important;
}

.k-calendar .k-content td {
    color: var(--text-secondary) !important;
}

.k-calendar .k-content .k-link:hover {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

.k-calendar .k-content .k-selected {
    background-color: var(--pollaroo-yellow) !important;
    color: var(--text-on-primary) !important;
}

.k-calendar .k-content .k-today {
    border-color: var(--pollaroo-yellow) !important;
}

/* ====> Kendo Window / Dialog <==== */

.k-window,
.k-dialog {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-xl) !important;
    border-radius: var(--radius-xl) !important;
}

.k-window-titlebar,
.k-dialog-titlebar {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.k-window-content,
.k-dialog-content {
    background-color: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
}

.k-dialog-buttongroup {
    background-color: var(--surface-secondary) !important;
    border-color: var(--border-color) !important;
}

/* ====> Kendo Notification <==== */
/* NOTE: Toast notification colors and styles are defined in site.css */
/* This section only defines Telerik-specific structural overrides */

.k-notification {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ====> Kendo Tooltip <==== */

.k-tooltip {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ====> Kendo Menu <==== */

.k-menu {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
}

.k-menu .k-item {
    color: var(--text-secondary) !important;
}

.k-menu .k-item:hover {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

.k-menu .k-item.k-selected {
    background-color: var(--pollaroo-yellow-alpha-15) !important;
    color: var(--pollaroo-yellow) !important;
}

/* ====> Kendo Links <==== */

.k-link {
    color: var(--text-secondary) !important;
}

.k-link:hover,
.k-link:focus {
    color: var(--pollaroo-yellow) !important;
}

/* ====> Kendo Loading Indicator <==== */

.k-loading-mask {
    background-color: rgba(30, 33, 36, 0.8) !important;
}

.k-loading-image {
    border-top-color: var(--pollaroo-yellow) !important;
}

/* ====> Kendo TreeView <==== */

.k-treeview {
    background-color: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
}

.k-treeview .k-item {
    color: var(--text-secondary) !important;
}

.k-treeview .k-item:hover {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

.k-treeview .k-item.k-selected {
    background-color: var(--pollaroo-yellow-alpha-15) !important;
    color: var(--pollaroo-yellow) !important;
    font-weight: 600 !important;
}

/* ====> Kendo Upload <==== */

.k-upload {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-color) !important;
}

.k-upload .k-dropzone {
    background-color: var(--surface-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.k-upload .k-dropzone:hover {
    background-color: var(--surface-tertiary) !important;
    border-color: var(--pollaroo-yellow) !important;
}

.k-upload .k-file {
    background-color: var(--surface-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.k-upload .k-file-success {
    background-color: var(--success-alpha-12) !important;
    border-left: 4px solid var(--success) !important;
}

.k-upload .k-file-error {
    background-color: var(--error-alpha-12) !important;
    border-left: 4px solid var(--error) !important;
}