/* ============================================================================
   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.
   ============================================================================ */

/* App-wide base font size - lives here because BOTH layouts load this file.
   Restores the pre-2026-upgrade 14px scale: Bootstrap 3 was 14px-based and
   the old Site111.css pinned Kendo widgets to 14px; Bootstrap 5 and the
   Kendo 2026 theme are both 16px (1rem). Everything in both frameworks is
   rem-based (the Kendo theme routes through --kendo-font-size: 1rem), so
   this single rule rescales all of it. Remove it to go back to 16px. */
html {
    font-size: 14px;
}

/* 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 search boxes: wrapper + in-box clear "X", both added at runtime by
   sqrutils.addSearchClear / wireGridNameSearch. The wrapper inherits the
   input's inline sizing so it slots into toolbars and header rows. */
.iw-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.iw-search-wrap > input,
.k-toolbar .iw-search-wrap > input.k-input {
    /* the second selector out-ranks the Kendo theme's
       ".k-toolbar .k-input { width: 10em }" */
    width: 100%;
    padding-right: 26px;
}

.iw-search-clear {
    position: absolute;
    right: 8px;
    cursor: pointer;
    color: #999;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    display: none;
}

.iw-search-clear:hover {
    color: #333;
}

/* Kendo 2026 grids are flex columns: with a fixed grid height the toolbar
   gets flex-SHRUNK (and its overflow:hidden then CLIPS the content) when a
   search box + button wrap to two lines at phone widths - let the toolbar
   keep its natural height instead. */
.k-grid .k-grid-toolbar {
    height: auto;
    max-height: none;
    flex-shrink: 0;
}

/* 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;
    }
}