/* ============================================================================
   Shared Kendo grid styling for BOTH layouts (_Layout and _MapLayout).
   Loaded via Url.Versioned in each layout. Anything grid-related that must
   look the same on normal pages AND on the Map page/popups belongs here,
   NOT in Site.css (which _MapLayout does not load) or Map.css.
   ============================================================================ */

/* Accent bar colours (grid headers, Capture farm panel, sidebar Menu bar,
   page header rows). Steel blue, chosen 2026-07 - the original navy was
   --iw-bar-top: #35648F / --iw-bar-bottom: #033D73. */
:root {
    --iw-bar-top: #4A7FB5;
    --iw-bar-bottom: #1E4E79;
}

/* Grid header bars */
.k-grid th.k-header,
.k-grid-header {
    background-image: linear-gradient(to bottom, var(--iw-bar-top) 0%, var(--iw-bar-bottom) 60%);
    background-repeat: no-repeat;
}

.k-grid th.k-header,
.k-grid th.k-header .k-link {
    color: white;
}

/* Compact grid command buttons, icon + text centred */
.k-grid .k-grid-table > tbody > tr .k-button {
    min-width: 28px;
    min-height: 24px;
    max-height: 24px;
    padding: 1px;
    margin: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.k-widget.k-grid table > tbody > tr .k-button > .k-icon {
    margin-left: 3px;
}

/* Mute the theme's saturated primary (#0d6efd) on grid command buttons -
   jarring against the Cerulean palette. Includes the edit/update/save
   command classes that the solid-primary selector alone misses. */
.k-grid .k-button-solid-primary,
.k-grid .k-grid-edit-command,
.k-grid .k-grid-update-command,
.k-grid .k-grid-save-command {
    background-color: rgb(222, 226, 230);
    border-color: rgb(222, 226, 230);
    color: rgb(33, 37, 41);
}

/* ...and their hover/active/focus states, which the theme styles separately
   (otherwise mouse-over flips back to the bright primary blue). Slightly
   darker gray keeps the hover feedback. */
.k-grid .k-button-solid-primary:hover,
.k-grid .k-button-solid-primary:active,
.k-grid .k-button-solid-primary:focus,
.k-grid .k-grid-edit-command:hover,
.k-grid .k-grid-edit-command:active,
.k-grid .k-grid-edit-command:focus,
.k-grid .k-grid-update-command:hover,
.k-grid .k-grid-update-command:active,
.k-grid .k-grid-update-command:focus,
.k-grid .k-grid-save-command:hover,
.k-grid .k-grid-save-command:active,
.k-grid .k-grid-save-command:focus {
    background-color: rgb(202, 208, 214);
    border-color: rgb(202, 208, 214);
    color: rgb(33, 37, 41);
}

/* Capture grids (both the Capture page and the Map "Irrigation and
   Rainfall" popup use these grid names). */
#IrrigationCaptureDetails .k-button,
#raingrid .k-button {
    font-size: 13px;
}

.GridEditDeleteBtn {
    margin-left: 0.16em !important;
    margin-right: 0.16em !important;
    min-width: 52px !important;
    font-size: 13px !important;
    padding: 2px 2px 2px 2px !important;
}

.GridStopBtn {
    background-color: red;
    color: white !important;
}

.cellAutoStopped {
    float: right;
    margin-top: 4px;
}

#IrrigationCaptureDetails .k-command-cell,
#raingrid .k-command-cell {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Rounded grid + header bars: rounded top corners, sharp bottom. */
#IrrigationCaptureDetails.k-grid,
#raingrid.k-grid {
    border-radius: 6px;
}

#IrrigationCaptureDetails .k-grid-header,
#raingrid .k-grid-header {
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    padding-right: 0 !important; /* no header drift/scrollbar gutter */
}

#IrrigationCaptureDetails .k-grid-header th.k-header:first-child,
#raingrid .k-grid-header th.k-header:first-child {
    border-top-left-radius: 6px;
}

#IrrigationCaptureDetails .k-grid-header th.k-header:last-child,
#raingrid .k-grid-header th.k-header:last-child {
    border-top-right-radius: 6px;
}

/* Narrow-width behaviour */
#IrrigationCaptureDetails,
#raingrid {
    overflow: hidden;
    max-width: 100%;
}

#IrrigationCaptureDetails .k-grid-header-wrap,
#IrrigationCaptureDetails .k-grid-content,
#raingrid .k-grid-header-wrap,
#raingrid .k-grid-content {
    overflow-x: auto;
}

#IrrigationCaptureDetails .k-resize-handle,
#raingrid .k-resize-handle {
    right: 0;
}

#IrrigationCaptureDetails th,
#IrrigationCaptureDetails td,
#raingrid th,
#raingrid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kendo 2026 grids are a single table (k-grid-header is the THEAD; table
   parts don't clip to radius), and column resizing writes an inline pixel
   width on the table. At phone widths force the table to fit so columns
   squeeze (the ellipsis rules above handle the text) and the rounded
   last-child header cell sits at the visible right edge. */
@media (max-width: 950px) {
    #IrrigationCaptureDetails table,
    #raingrid table {
        width: 100% !important;
        table-layout: fixed;
    }

    /* Fixed-layout tables still grow to the SUM of the colgroup's pixel
       widths (Kendo emits the designed column widths there), so release
       the data columns to share the available width. The last column
       (Edit/Del buttons) keeps its designed width so the buttons fit. */
    #IrrigationCaptureDetails col:not(:last-child),
    #raingrid col:not(:last-child) {
        width: auto !important;
    }

    #IrrigationCaptureDetails .k-command-cell .k-button-text,
    #raingrid .k-command-cell .k-button-text {
        display: none;
    }

    #IrrigationCaptureDetails .k-command-cell,
    #raingrid .k-command-cell {
        white-space: nowrap;
    }
}