/* ===========================================================================
   Crop Schedule UI: core
   /Asserts/Main/cs-core.css

   Split out of cs-ui.css. This sheet holds everything shared by more than one
   category of page, plus every rule that names a third party or legacy class
   (.export-btn, select2, DataTables, .modalPopupL, .LockOn), because those
   reach pages that have not been redesigned.

   LOAD ORDER. Site.Master links this sheet, so it is on every page in the
   site. Each redesigned page then re-links it after its folder copy of
   nicepage.css and follows it with its own category sheet:

       cs-core.css  ->  cs-dashboards.css | cs-sensordata.css | cs-account.css

   Core must load first. Three selectors are deliberately redefined by a
   category sheet and rely on that order:

       .cs-hint    a muted form hint here, the dismissible strip on a chart page
       .cs-picker  a row here, a label-over-control column on a chart page
       .pref-card  the card shell here, a Preferences override in cs-account.css

   Do not reorder the links and do not move these rules.
   =========================================================================== */

:root {
    /* Neutrals */
    --cs-ink: #4B515D;
    --cs-ink-strong: #1C2331;
    --cs-ink-muted: #9AA0AA;
    --cs-ink-faint: #A5ABB4;
    --cs-label: #6B7280;
    --cs-line: #E6E8EC;
    --cs-line-soft: #EEF0F3;
    --cs-surface: #FFFFFF;
    --cs-surface-alt: #F7F8FA;
    --cs-surface-sunk: #F1F3F6;
    --cs-field-border: #D9DDE3;
    --cs-link: #2C367E;
    /* State colours. Same bands as myColor in the code-behind. */
    --cs-state-above: #5B8DEF; /* above field capacity */
    --cs-state-good: #57B77C; /* optimal */
    --cs-state-warn: #E8A33D; /* refill soon */
    --cs-state-bad: #DC5B4B; /* stress */
    --cs-state-stale: #9AA0AA; /* no data 24h+ */
    /* Wash backgrounds for the states that need attention */
    --cs-wash-warn: #FEFBF6;
    --cs-wash-bad: #FEF8F7;
    --cs-wash-stale: #FAFAFB;
    /* Shape */
    --cs-radius: 12px;
    --cs-radius-sm: 6px;
    --cs-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --cs-shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.08);
    --cs-focus: 0 0 0 3px rgba(134, 139, 148, 0.15);
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */

.cs-page,
.pd-page,
.pref-wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 22px 22px 48px;
    color: var(--cs-ink);
    font-family: 'Roboto', sans-serif;
}

.pref-wrap {
    max-width: 1180px;
    padding: 28px 20px 56px;
}

.cs-title,
.pd-title,
.pref-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.cs-intro,
.pref-intro {
    font-size: 13px;
    color: var(--cs-ink-muted);
    max-width: 760px;
    margin: 0 0 22px;
}

.cs-toolbar,
.pd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.cs-subbar,
.pd-subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--cs-line);
}

.cs-view-actions,
.pd-view-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.cs-footnote,
.pd-footnote {
    display: inline-block;
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   Tabs and views
   --------------------------------------------------------------------------- */

.cs-tabs,
.pd-tabs {
    display: flex;
    gap: 4px;
    background: var(--cs-surface-sunk);
    border-radius: 8px;
    padding: 3px;
}

.cs-tab,
.pd-tab {
    border: none;
    background: transparent;
    color: var(--cs-label);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--cs-radius-sm);
    cursor: pointer;
}

    .cs-tab i,
    .pd-tab i {
        margin-right: 7px;
    }

    .cs-tab:hover,
    .pd-tab:hover {
        color: var(--cs-ink);
    }

    .cs-tab.is-active,
    .pd-tab.is-active {
        background: var(--cs-surface);
        color: var(--cs-ink);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    }

.cs-view,
.pd-view {
    display: none;
}

    .cs-view.is-active,
    .pd-view.is-active {
        display: block;
    }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.cs-card,
.pd-card,
.pref-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
}

.cs-card-head,
.pref-card-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--cs-line-soft);
}

    .cs-card-head h6,
    .pref-card-head h6 {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        margin: 0;
        color: var(--cs-ink);
    }

    .cs-card-head span,
    .pref-card-head span {
        display: block;
        font-size: 12px;
        color: var(--cs-ink-muted);
        margin-top: 3px;
    }

.cs-card-body,
.pref-card-body {
    padding: 18px 20px 20px;
}

/* Grid of cards. Four across on a wide screen, one on a phone. */
.cs-grid,
.pd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

/* ---------------------------------------------------------------------------
   Status: chips, dots, legend, card states
   --------------------------------------------------------------------------- */

.cs-chip,
.pd-chip {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.cs-legend,
.pd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: #7D838D;
}

    .cs-legend span,
    .pd-legend span {
        display: flex;
        align-items: center;
    }

.cs-dot,
.pd-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   Card figures: micro label, value, footer

   Shared, and not obviously so. These were written for the probe card, which
   is why they sat in the dashboard's block, but the latest reading strip on
   every chart page uses .cs-stat-label for its uppercase cell captions. Split
   into the dashboard sheet they vanished from five sensor pages at once and
   the captions fell back to inherited type.

   They live here now. cs-dashboards.css still carries an identical copy,
   which is dead weight rather than a conflict: same values, and core loads
   first. Delete it from there the next time that sheet is open.
   --------------------------------------------------------------------------- */

.cs-stats,
.pd-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cs-line-soft);
}

.cs-stat-label,
.pd-stat-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin-bottom: 2px;
}

.cs-stat-value,
.pd-stat-value {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cs-ink);
}

    /* A unit is not part of the figure, so it does not carry the figure's
       weight. Same relationship as .pd-fc-num to .pd-fc-unit, one tier down. */
    .cs-stat-value em,
    .pd-stat-value em {
        font-style: normal;
        font-size: 11.5px;
        font-weight: 400;
        color: var(--cs-ink-muted);
        margin-left: 2px;
    }

.cs-card-foot,
.pd-card-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cs-line-soft);
}

    .cs-card-foot a,
    .pd-card-foot a {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--cs-link);
        text-decoration: none;
    }

        .cs-card-foot a:hover,
        .pd-card-foot a:hover {
            text-decoration: underline;
        }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.cs-group,
.pref-group {
    margin-bottom: 18px;
}

.cs-group-title,
.pref-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7D838D;
    border-left: 3px solid #B9BEC6;
    padding-left: 8px;
    margin-bottom: 10px;
}

.cs-field,
.pref-field {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

    .cs-field label,
    .pref-field label {
        flex: 0 0 90px;
        font-size: 13px;
        margin: 0;
    }

    .cs-field input,
    .pref-field input {
        width: 96px;
        height: 32px;
        font-size: 13px;
        padding: 3px 8px;
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        background: var(--cs-surface);
        color: var(--cs-ink);
    }

        .cs-field input:focus,
        .pref-field input:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

.cs-unit,
.pref-unit {
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-left: 8px;
    min-width: 30px;
}

.cs-error,
.pref-error {
    font-size: 12px;
    color: #C0392B;
    margin-left: 6px;
}

.cs-check,
.pref-check {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 9px;
}

    .cs-check input,
    .pref-check input {
        margin-right: 9px;
    }

    .cs-check label,
    .pref-check label {
        margin: 0;
    }

.cs-picker-label,
.cs-farm-label,
.pd-farm-label,
.pref-farm-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-ink-faint);
    margin: 0;
}

.cs-picker,
.cs-farm,
.pd-farm {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-note,
.pref-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: #7A5B12;
    background: #FDF6E3;
    border: 1px solid #F0E2B6;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.cs-actions,
.pref-actions {
    border-top: 1px solid var(--cs-line-soft);
    padding-top: 14px;
    margin-top: 4px;
}

.cs-hint,
.pref-hint {
    font-size: 12px;
    color: var(--cs-ink-muted);
    margin-left: 6px;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.cs-btn,
.export-btn {
    background-color: var(--cs-ink);
    border: 1px solid var(--cs-ink);
    color: #fff;
    padding: 7px 14px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--cs-radius-sm);
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

    .cs-btn:hover,
    .export-btn:hover {
        background-color: #3B4048;
        border-color: #3B4048;
        color: #fff;
    }

        .cs-btn:hover span,
        .export-btn:hover span {
            color: #fff;
        }

.cs-btn-ghost,
.export-btn-ghost {
    background-color: var(--cs-surface);
    color: var(--cs-ink);
    border: 1px solid var(--cs-field-border);
}

    .cs-btn-ghost:hover,
    .export-btn-ghost:hover {
        background-color: #F4F5F7;
        border-color: #C9CED6;
        color: var(--cs-ink);
    }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.cs-table,
.pd-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--cs-ink);
}

    .cs-table thead th,
    .pd-table thead th {
        background: var(--cs-surface-alt);
        color: var(--cs-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 10px 12px;
        border-bottom: 1px solid var(--cs-line);
    }

    .cs-table tbody td,
    .pd-table tbody td {
        padding: 9px 12px;
        border-bottom: 1px solid var(--cs-surface-sunk);
        white-space: nowrap;
    }

    .cs-table tbody tr:hover td,
    .pd-table tbody tr:hover td {
        background: #F7F9FC;
    }

    .cs-table tbody a,
    .pd-table tbody a {
        color: var(--cs-link);
        text-decoration: none;
    }

        .cs-table tbody a:hover,
        .pd-table tbody a:hover {
            text-decoration: underline;
        }

/* Text left, numbers right, actions right. Never centre. */
.cs-table th.cell-text, .cs-table td.cell-text,
.pd-table th.cell-text, .pd-table td.cell-text {
    text-align: left;
}

.cs-table th.cell-num, .cs-table td.cell-num,
.pd-table th.cell-num, .pd-table td.cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* DataTables reserves room on the right of each header for the sort arrow.
   The detailed list gets the same room on its numbers so they line up. */
table.dataTable thead > tr > th.cell-num,
table.dataTable thead > tr > th.cell-icon {
    padding-right: 26px;
}

.cs-table th.cell-icon, .cs-table td.cell-icon,
.pd-table th.cell-icon, .pd-table td.cell-icon {
    text-align: right;
    width: 36px;
    padding-left: 4px;
    padding-right: 8px;
}

/* DataTables 2.x shell, with the 1.x class names kept as a fallback */
.dt-container,
.dataTables_wrapper {
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 12px 14px 6px;
}

.dt-search,
.dataTables_filter {
    text-align: right;
    margin-bottom: 10px;
}

    .dt-search input,
    .dataTables_filter input {
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        height: 34px;
        width: 240px;
        padding: 4px 10px;
        font-size: 13px;
        margin-left: 0;
    }

        .dt-search input:focus,
        .dataTables_filter input:focus {
            outline: none;
            border-color: #868B94;
            box-shadow: var(--cs-focus);
        }

.dt-info,
.dataTables_info {
    font-size: 12px;
    color: var(--cs-ink-muted);
    padding-top: 8px;
}

table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover {
    background: var(--cs-line-soft);
}

table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
    color: var(--cs-ink);
}

.dt-scroll-body {
    border-bottom: 1px solid var(--cs-line-soft);
}

/* ---------------------------------------------------------------------------
   select2
   --------------------------------------------------------------------------- */

/* select2 writes its own inline width, so the sheet has to use !important to
   own the sizing at all. 260px is the default, wide enough for a farm name.

   Scoped to the house picker wrappers, and it has to stay that way. This
   sheet is linked from Site.Master, so it reaches every page in the site,
   and select2 is used on pages that have not been redesigned yet. An
   unscoped `.select2-container` with !important pinned those pickers at
   260px too, where nicepage had them at 100%, which shrank the field and
   pulled its label up alongside it. Every select2 on a redesigned page sits
   inside .cs-picker, .cs-farm or .pd-farm, so the wrapper costs us nothing.

   The modifiers carry both classes so they are (0,3,0) against the base
   rule's (0,2,0) and win on specificity rather than on source order. A
   picker whose whole vocabulary is short words has no business holding 260px
   open: that is what wrapped the temp-humidity page's four pickers onto
   their own row. */
.cs-picker .select2-container,
.cs-farm .select2-container,
.pd-farm .select2-container {
    width: 260px !important;
}

/* Meter and probe names: long enough to need room, short enough not to need
   all of it. */
.cs-picker.cs-picker-md .select2-container {
    width: 210px !important;
}

/* Sensor and Period. The longest entries either will ever hold are "Not
   addressed" and "Last 3 months". */
.cs-picker.cs-picker-sm .select2-container {
    width: 140px !important;
}

    .select2-container--default .select2-selection--single {
        border: 1px solid var(--cs-field-border);
        border-radius: var(--cs-radius-sm);
        height: 36px;
        font-size: 13px;
        text-align: left;
    }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px;
            padding-left: 10px;
            color: var(--cs-ink);
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 34px;
        }

.select2-dropdown {
    font-size: 13px;
    border: 1px solid var(--cs-field-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--cs-field-border);
    border-radius: var(--cs-radius-sm);
    height: 32px;
    padding: 4px 8px;
}

.select2-results__option {
    font-size: 13px;
    padding: 7px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cs-ink);
}

/* ---------------------------------------------------------------------------
   Modal and loading overlay
   --------------------------------------------------------------------------- */

.modalPopupL {
    background-color: var(--cs-surface);
    width: 90%;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    padding: 20px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
}

.LockOn {
    display: none;
    visibility: visible;
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url("/images/loading.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .cs-stats,
    .pd-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-page,
    .pd-page,
    .pref-wrap {
        padding: 16px 12px 40px;
    }
}

/* ---------------------------------------------------------------------------
   Segmented control

   Shared: the sensor dashboard uses it for Cards / Detailed list, the chart
   pages use it for scales and chart type.
   --------------------------------------------------------------------------- */

.cs-seg {
    display: inline-flex;
    background: var(--cs-surface-sunk);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}

    .cs-seg button {
        border: none;
        background: transparent;
        color: var(--cs-label);
        font-size: 13px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: var(--cs-radius-sm);
        cursor: pointer;
        white-space: nowrap;
    }

        /* Same icon gap as a tab. Without it the glyph sits against the word. */
        .cs-seg button i {
            margin-right: 7px;
        }

        .cs-seg button:hover {
            color: var(--cs-ink);
        }

        .cs-seg button.is-active {
            background: var(--cs-surface);
            color: var(--cs-ink);
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
        }

/* ---------------------------------------------------------------------------
   Tab count and empty tab

   Shared: the sensor dashboard counts sensors per type, the rain page dims
   Monthly on a period that does not span two calendar months.
   --------------------------------------------------------------------------- */

.cs-tab-count {
    display: inline-block;
    margin-left: 7px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cs-ink-muted);
}

.cs-tab.is-active .cs-tab-count {
    color: var(--cs-ink);
}

/* A type with nothing on this farm still holds its place, so the strip does
   not reshuffle as the user changes farm. */
.cs-tab.is-empty {
    opacity: 0.45;
    pointer-events: none;
}

/* A reading older than a day says so in words beside the timestamp. Colour
   alone would not carry it.

   cs-ui.css defined .cs-stale twice, once in the probe section and once in
   the sensor dashboard section, with different colours. The second won
   everywhere on source order, so the second is the one kept here and the
   first is gone. Nothing changes on screen. */

.cs-stale {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: #6E747E;
    background: var(--cs-surface-sunk);
}

/* ---------------------------------------------------------------------------
   Page title, pinned

   nicepage restyles bare h1 and, on a page that links its own folder copy of
   nicepage.css, that copy loads after this sheet. Rather than depend on load
   order, these selectors carry an element and two classes so they outrank
   anything nicepage can throw at a heading. Pin the rule, do not reorder the
   links: the folder copies are hand edited and are load bearing.
   --------------------------------------------------------------------------- */

.cs-page h1.cs-title,
.pd-page h1.pd-title,
.pref-wrap h1.pref-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--cs-ink-strong) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* A sub page sits one tier down. The probe data page has a back control, a two
   line title block and three pickers on the same row, so the smaller title is
   what lets that row stay a single line. */
.cs-probe-head h1.cs-title {
    font-size: 22px !important;
}

/* nicepage restyles bare h2 as well, and a section heading inside the page is
   the one place we use one. `.cs-section-title` alone is (0,1,0) and loses to
   nicepage's (0,1,1), which is why "Depth detail" and "Channel detail" both
   render at heading size. Same fix as the titles above: element plus two
   classes, so it outranks anything nicepage can reach it with.

   This corrects Probe.aspx as well, which carries the same markup. */
.cs-page h2.cs-section-title {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--cs-ink) !important;
    margin: 0 !important;
    padding: 0 !important;
}