/* Light Theme (Default) */
:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #ebf2e3;
    --rz-base-50: #fafbf8;
    --rz-base-100: #f6f9f3;
    --rz-base-200: #ebf2e3;
    --rz-base-300: #e6ecdf;
    --rz-base-400: #e1e6db;
    --rz-base-500: #dce0d7;
    --rz-base-600: #ccd2c6;
    --rz-base-700: #797e74;
    --rz-base-800: #4a4f45;
    --rz-base-900: #1d201b;
    --rz-base-light: #f6f9f3;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #4a4f45;
    --rz-base-darker: #1d201b;
    --rz-primary: #496727;
    --rz-primary-light: #deffbc;
    --rz-primary-lighter: rgba(135, 255, 0, 0.13);
    --rz-primary-dark: #628b37;
    --rz-primary-darker: #2a5d00;
    --cnps-green: #639a67;
    --cnps-green-dark: #4a7a4d;
    --cnps-green-darker: #2f6734;
    --cnps-green-light: #c9ddbf;
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-darker);
    --rz-secondary: #66715b;
    --rz-secondary-light: #cfdcc2;
    --rz-secondary-lighter: rgba(131, 255, 0, 0.13);
    --rz-secondary-dark: #4e5844;
    --rz-secondary-darker: #222b19;
    --rz-info: #085786;
    --rz-info-light: #aadaff;
    --rz-info-lighter: rgba(170, 218, 255, 0.5);
    --rz-info-dark: #086791;
    --rz-info-darker: #002d41;
    --rz-success: #386A20;
    --rz-success-light: #c0ffaa;
    --rz-success-lighter: rgba(192, 255, 170, 0.5);
    --rz-success-dark: #3e9108;
    --rz-success-darker: #194100;
    --rz-warning: #e8e971;
    --rz-warning-light: #f9ffaa;
    --rz-warning-lighter: rgba(249, 255, 170, 0.5);
    --rz-warning-dark: #918908;
    --rz-warning-darker: #413d00;
    --rz-danger: #b3261e;
    --rz-danger-light: #ffb4aa;
    --rz-danger-lighter: rgba(255, 180, 170, 0.5);
    --rz-danger-dark: #91080a;
    --rz-danger-darker: #410001;
    --rz-on-base: #1d201b;
    --rz-on-base-light: #1d201b;
    --rz-on-base-lighter: #1d201b;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #fafbf8;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #2a5d00;
    --rz-on-primary-lighter: #2a5d00;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #deffbc;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #222b19;
    --rz-on-secondary-lighter: #222b19;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #cfdcc2;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #002d41;
    --rz-on-info-lighter: #086791;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #aadaff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #194100;
    --rz-on-success-lighter: #194100;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #c0ffaa;
    --rz-on-warning: #1d201b;
    --rz-on-warning-light: #413d00;
    --rz-on-warning-lighter: #413d00;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #f9ffaa;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #410001;
    --rz-on-danger-lighter: #410001;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffb4aa;
    --rz-series-1: #b6f075;
    --rz-series-2: #75f090;
    --rz-series-3: #75f0ec;
    --rz-series-4: #7598f0;
    --rz-series-5: #af75f0;
    --rz-series-6: #f075d5;
    --rz-series-7: #f07579;
    --rz-series-8: #f0cd75;
    --rz-series-9: #9eeb47;
    --rz-series-10: #47eb6b;
    --rz-series-11: #47ebe6;
    --rz-series-12: #4775eb;
    --rz-series-13: #9447eb;
    --rz-series-14: #eb47c7;
    --rz-series-15: #eb474d;
    --rz-series-16: #ebbd47;
    --rz-series-17: #7eb83d;
    --rz-series-18: #3db858;
    --rz-series-19: #3db8b4;
    --rz-series-20: #3d60b8;
    --rz-series-21: #773db8;
    --rz-series-22: #b83d9d;
    --rz-series-23: #b83d41;
    --rz-series-24: #b8953d;
}

/* Dark Theme */
[data-theme="dark"],
.rz-material3-dark,
body.dark {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #4a4f45;
    --rz-base-50: #e1e9e0;
    --rz-base-100: #cad0c4;
    --rz-base-200: #94998f;
    --rz-base-300: #4a4f45;
    --rz-base-400: #3b3e38;
    --rz-base-500: #383b34;
    --rz-base-600: #2d3029;
    --rz-base-700: #23261f;
    --rz-base-800: #1e201b;
    --rz-base-900: #151812;
    --rz-base-light: #94998f;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #151812;
    --rz-base-darker: #000000;
    --rz-primary: #aed285;
    --rz-primary-light: #dfffbc;
    --rz-primary-lighter: rgba(174, 210, 133, 0.24);
    --rz-primary-dark: #628b37;
    --rz-primary-darker: #2a5d00;
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-light);
    --rz-secondary: #cedcc2;
    --rz-secondary-light: #cedcc2;
    --rz-secondary-lighter: rgba(194, 255, 144, 0.28);
    --rz-secondary-dark: #4d5844;
    --rz-secondary-darker: #212b19;
    --rz-info: #085786;
    --rz-info-light: #aadaff;
    --rz-info-lighter: rgba(170, 218, 255, 0.24);
    --rz-info-dark: #086791;
    --rz-info-darker: #002d41;
    --rz-success: #386A20;
    --rz-success-light: #c0ffaa;
    --rz-success-lighter: rgba(192, 255, 170, 0.24);
    --rz-success-dark: #3e9108;
    --rz-success-darker: #194100;
    --rz-warning: #e8e971;
    --rz-warning-light: #f9ffaa;
    --rz-warning-lighter: rgba(249, 255, 170, 0.24);
    --rz-warning-dark: #918908;
    --rz-warning-darker: #413d00;
    --rz-danger: #b3261e;
    --rz-danger-light: #ffb4aa;
    --rz-danger-lighter: rgba(255, 180, 170, 0.24);
    --rz-danger-dark: #91080a;
    --rz-danger-darker: #410001;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #151812;
    --rz-on-base-lighter: #151812;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    --rz-on-primary: #2a5d00;
    --rz-on-primary-light: #2a5d00;
    --rz-on-primary-lighter: #dfffbc;
    --rz-on-primary-dark: #dfffbc;
    --rz-on-primary-darker: #dfffbc;
    --rz-on-secondary: #212b19;
    --rz-on-secondary-light: #212b19;
    --rz-on-secondary-lighter: #cedcc2;
    --rz-on-secondary-dark: #cedcc2;
    --rz-on-secondary-darker: #cedcc2;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #002d41;
    --rz-on-info-lighter: #aadaff;
    --rz-on-info-dark: #aadaff;
    --rz-on-info-darker: #aadaff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #194100;
    --rz-on-success-lighter: #c0ffaa;
    --rz-on-success-dark: #c0ffaa;
    --rz-on-success-darker: #c0ffaa;
    --rz-on-warning: #151812;
    --rz-on-warning-light: #413d00;
    --rz-on-warning-lighter: #f9ffaa;
    --rz-on-warning-dark: #f9ffaa;
    --rz-on-warning-darker: #f9ffaa;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #410001;
    --rz-on-danger-lighter: #ffb4aa;
    --rz-on-danger-dark: #ffb4aa;
    --rz-on-danger-darker: #ffb4aa;
    --rz-series-1: #7eb83d;
    --rz-series-2: #3db858;
    --rz-series-3: #3db8b4;
    --rz-series-4: #3d60b8;
    --rz-series-5: #763db8;
    --rz-series-6: #b83d9d;
    --rz-series-7: #b83d41;
    --rz-series-8: #b8953d;
    --rz-series-9: #9eeb47;
    --rz-series-10: #47eb6b;
    --rz-series-11: #47ebe5;
    --rz-series-12: #4775eb;
    --rz-series-13: #9447eb;
    --rz-series-14: #eb47c7;
    --rz-series-15: #eb474d;
    --rz-series-16: #ebbd47;
    --rz-series-17: #cff5a3;
    --rz-series-18: #a3f5b5;
    --rz-series-19: #a3f5f2;
    --rz-series-20: #a3baf5;
    --rz-series-21: #c9a3f5;
    --rz-series-22: #f5a3e3;
    --rz-series-23: #f5a3a6;
    --rz-series-24: #f5dea3;
    --rz-body-background-color: var(--rz-base-700);
    --rz-layout-background-color: var(--rz-body-background-color);
    --rz-button-base-background-color: var(--rz-primary);
}

/* Blooming Calendar Styles */
.blooming-calendar {
    --month-min: clamp(1.4rem, 7vw, 2.1rem);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
    margin-top: .5rem;
    width: 100%;
    max-width: 100%;
}

.month-box {
    align-items: center;
    background-color: var(--rz-base-200);
    border: 2px solid var(--rz-base-600);
    border-radius: 4px;
    color: var(--rz-base-700);
    display: flex;
    font-size: 0.78rem;
    font-weight: 600;
    justify-content: center;
    min-height: 32px;
    padding: 6px 4px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    min-width: 0;
}

.month-box.blooming {
    background: linear-gradient(135deg, var(--rz-success) 0%, var(--rz-success-dark) 100%);
    border-color: var(--rz-success-dark);
    box-shadow: 0 2px 4px rgba(56, 106, 32, 0.3);
    color: white;
    font-weight: 700;
}

.month-box.blooming-start {
    background: linear-gradient(135deg, #a8d5ae 0%, #90c695 100%);
    border-color: var(--rz-success);
    box-shadow: 0 2px 4px rgba(56, 106, 32, 0.2);
    color: white;
    font-weight: 700;
}

@media (min-width: 768px) {
    .blooming-calendar {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .month-box {
        padding: 4px 3px;
        min-height: 30px;
        font-size: .78rem;
    }
}

/* ============================================
   BLAZOR RECONNECTION STYLES
   ============================================ */
/* Hidden by default — blazor.web.js (.NET 10) clears all state classes on each transition,
   so any state without an explicit rule below must fall back to hidden, not block */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }

.reconnect-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--rz-warning-light);
    color: var(--rz-on-warning-light);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-align: center;
}

.reconnect-content { display: none; }

#components-reconnect-modal.components-reconnect-show .reconnect-attempting,
#components-reconnect-modal.components-reconnect-retrying .reconnect-attempting,
#components-reconnect-modal.components-reconnect-paused .reconnect-attempting { display: block; }
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-msg,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-failed-msg,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-msg { display: block; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Panel with collapse icon on the left */
.rz-panel-titlebar {
    flex-direction: row-reverse;
    justify-content:left;
}

/* NFX-022-A (BUG-022 testing follow-up): on clearable RadzenDropDowns (AllowClear="true")
   the clear "X" sat flush against the dropdown chevron with no gap — reading as an overlap
   on the Plant Edit picklists (Review Status, CA Rare Plant Rank, Federal/State Listing
   Status). The theme parks the chevron trigger at the right edge (glyph ~0.5rem–2rem in)
   and the clear icon's right edge at exactly 2rem, so the two icons touch. Push the clear
   icon further left to open a visible gap, and reserve matching label padding so a long
   value never slides under the X. Scoped to .rz-dropdown so date/time pickers — which
   position their own clear icon under .rz-datepicker/.rz-timespanpicker — are unaffected. */
/* Real fix: the bundled (older) material3 theme never reset the clear <button>'s default
   browser chrome, so the X rendered as a gray bordered box. Strip it to a bare icon — this
   is exactly what the newer Radzen theme does itself (color:inherit;background:none;
   border:none;padding:0;cursor:pointer). The inset just opens a small (~8px) gap from the
   chevron; label padding keeps the selected value from sliding under the X. */
.rz-dropdown .rz-dropdown-clear-icon {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    inset-inline-end: calc(var(--rz-dropdown-trigger-icon-width, 1.5rem) + 1rem);
}

.rz-dropdown.rz-clear .rz-dropdown-label {
    padding-inline-end: calc(var(--rz-dropdown-trigger-icon-width, 1.5rem) + 2.5rem);
}

/* BUG-124: HtmlEditor FormFields stay on the filled floating-label position even when
   empty (rz-state-empty). Default theme parks empty labels at top:50% of the 200px editor,
   which reads as placeholder text inside the box; populated fields already float to the
   top border. Always apply the filled-state label rules for these editors. */
.plant-notes-card .rz-form-field:has(.rz-html-editor) .rz-form-field-label {
    inset-inline-start: var(--rz-form-field-label-inset-inline-start);
    inset-inline-end: auto;
    inset-block-start: var(--rz-form-field-label-floating-top);
    padding-block-start: 0;
    padding-block-end: 0;
    transform: translate(0, 0);
    color: var(--rz-input-placeholder-color);
    background-color: var(--rz-form-field-label-floating-background-color);
    font-size: .75rem;
    line-height: 1rem;
    max-width: calc(100% - 1.5rem);
}

.plant-notes-card .rz-form-field:has(.rz-html-editor).rz-state-focused .rz-form-field-label,
.plant-notes-card .rz-form-field:has(.rz-html-editor):focus-within .rz-form-field-label {
    color: var(--rz-form-field-label-focus-color);
}

/* Content hyperlinks (not nav/button chrome). /plants SciName public-detail URLs
   are bare <a> tags (BUG-127) and were picking up the browser blue/purple visited
   colors against the green theme. Keep visited in the primary green family. */
.rz-body a:not(.rz-button),
.rz-body a:not(.rz-button):visited,
.rz-data-grid a:not(.rz-button),
.rz-data-grid a:not(.rz-button):visited {
    color: var(--rz-link-color);
}

.rz-body a:not(.rz-button):hover,
.rz-body a:not(.rz-button):focus-visible,
.rz-data-grid a:not(.rz-button):hover,
.rz-data-grid a:not(.rz-button):focus-visible {
    color: var(--rz-link-hover-color);
}