/* =============================================================================
   FARM DETAIL — the interface layer
   =============================================================================
   WHY THIS IS A SEPARATE FILE RATHER THAN EDITS TO farm-detail.css
   ----------------------------------------------------------------
   farm-detail.css (1,829 lines) loads BEFORE app-shell.css on this page, and
   the two share eight class names — .active, .dropdown-item, .pond-item,
   .dashboard-content, .main-workspace among them. Moving it after app-shell to
   win the cascade would silently flip all eight, including two that decide the
   page's layout.

   So the old sheet keeps its slot and its behaviour, and this one loads last,
   after nz-console.css. Nothing below overrides by accident: every rule here is
   one I intend to win.

   WHAT IT DOES
   ------------
     1. The header becomes a hero band with a photograph, like every other page
        in this console. It was a white bar with dark text and four pastel
        pills — correct, and indistinguishable from a settings screen.
     2. The tabs become a real segmented control with the console's lime
        pointer, and scroll rather than squeeze on a narrow window.
     3. The panes get ONE card: one radius, one hairline, one shadow. There
        were four different cards on this page.
     4. The three empty states — Photo, Notes, Cycles — become one component
        with a pond photograph behind it, so an empty tab reads as a place the
        farm has not reached yet rather than a page that failed to load.

   COLOUR RULE, unchanged from the rest of the console: the lime is the
   pointer, the blue is structure, and neither of them is ever a status.
   ========================================================================== */


/* =============================================================================
   1 — THE HERO
   ========================================================================== */

.farm-top-header--detail {
    position: relative;
    isolation: isolate;
    /* NOT overflow:hidden. The farm switcher and the ... menu both drop out of
       this band, and clipping them would break the page's two menus to gain
       nothing: the photograph is inset:0 with object-fit:cover and cannot
       spill. z-index beats .farm-tabs (40) below, which is sticky and would
       otherwise paint over an open dropdown. */
    z-index: 50;
    padding: 26px 40px 24px;
    border-bottom: 0;
    background: var(--nz-navy, #00243c);
    color: #fff;
    /* flex-wrap so the stat pills drop below the title on a narrow window
       instead of squeezing the farm name into an ellipsis. */
    flex-wrap: wrap;
    gap: 16px 24px;
}

/* The photograph and its scrim, injected by js/farm-detail-ui.js so no markup
   has to change. -2 and -1 sit under the content, over the navy; the header's
   own stacking context keeps them from falling behind the page. */
.farm-top-header--detail .fd-hero-media,
.farm-top-header--detail .fd-hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.farm-top-header--detail .fd-hero-media { z-index: -2; overflow: hidden; }

.farm-top-header--detail .fd-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}

/* Two layers. A flat wash dark enough for white type kills the picture; a
   gradient keeps the water readable on the right and holds the heading at
   15.9:1 on the left. */
.farm-top-header--detail .fd-hero-scrim {
    z-index: -1;
    background:
        linear-gradient(98deg, rgba(0, 24, 48, .95) 0%,
                               rgba(0, 24, 48, .86) 42%,
                               rgba(0, 24, 48, .52) 100%),
        linear-gradient(0deg, rgba(0, 24, 48, .30), rgba(0, 24, 48, .30));
}

.farm-top-header--detail .farm-top-left { gap: 14px; min-width: 0; }

/* The back chevron was a grey glyph on white. On the photograph it needs a
   surface of its own, and a target worth the name. */
.farm-top-header--detail .back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    font-size: 21px;
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    text-decoration: none;
    transition: background .16s var(--nz-ease, ease);
}

.farm-top-header--detail .back-link:hover { background: rgba(255, 255, 255, .22); }
/* farm-detail.css puts a 15px right margin on the glyph, which is now inside
   a centred box. */
.farm-top-header--detail .back-link i { margin-right: 0 !important; font-size: 21px; }

.farm-top-header--detail .farm-title {
    /* Was uppercased by farm-detail.css, which shouted a name the farmer chose
       and made long ones unreadable. Their capitalisation, their name. */
    text-transform: none !important;
    font-family: var(--nz-font-display);
    font-size: clamp(21px, 1.5vw + 13px, 30px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15;
    color: #fff !important;
    margin: 0 10px 0 0 !important;
}

.farm-top-header--detail .farm-title-caret { color: var(--nz-lime, #3BD304) !important; }
.farm-top-header--detail .dropdown-farms { cursor: pointer; }

/* ---- the stat pills ----
   Four pastel chips designed for a white bar. On the photograph they become
   glass: one treatment, so they read as a set of readings rather than four
   unrelated badges. */
.farm-top-header--detail .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff !important;
    background: rgba(255, 255, 255, .11) !important;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}

/* The icon carries the only colour, so the numbers stay white and legible. */
.farm-top-header--detail .stat-pill i { color: var(--nz-lime, #3BD304); font-size: 13px; }
.farm-top-header--detail .stat-pill:nth-of-type(2) i,
.farm-top-header--detail .stat-pill:nth-of-type(4) i { color: #7FB0FF; }

.farm-top-header--detail .top-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff !important;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 12px;
    cursor: pointer;
}

.farm-top-header--detail .top-menu-btn:hover { background: rgba(255, 255, 255, .22); }

/* Both menus open onto the photograph, so they keep their own white surface
   and a shadow strong enough to sit on it. */
.farm-top-header--detail .dropdown-farms-content,
.farm-top-header--detail #topRightDropdown {
    box-shadow: 0 18px 40px rgba(0, 20, 40, .28) !important;
    border: 1px solid rgba(0, 36, 60, .10) !important;
    border-radius: 12px !important;
}

@media (max-width: 900px) {
    .farm-top-header--detail { padding: 20px 20px 18px; }
    .farm-top-header--detail .fd-hero-media { display: none; }
}


/* =============================================================================
   2 — THE TABS
   -----------------------------------------------------------------------------
   Seven panes. The active one is marked by a lime bar rather than a blue
   hairline — the same pointer the sidebar uses — and the row scrolls on a
   phone instead of crushing seven labels into the width.
   ========================================================================== */

.farm-tabs {
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 4px !important;
    padding: 0 28px !important;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--nz-border, #e5eaf2) !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.farm-tabs::-webkit-scrollbar { display: none; }

.farm-tab {
    padding: 15px 14px 13px !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 10px 10px 0 0;
    color: var(--nz-text-2, #475569) !important;
    white-space: nowrap;
    transition: color .16s var(--nz-ease, ease),
                background .16s var(--nz-ease, ease),
                border-color .16s var(--nz-ease, ease);
}

.farm-tab i { color: var(--nz-text-3, #94a3b8); transition: color .16s var(--nz-ease, ease); }

.farm-tab:hover {
    color: var(--nz-navy, #00243c) !important;
    background: var(--nz-surface-alt, #f8fafd);
    border-bottom-color: transparent !important;
}

.farm-tab:hover i { color: var(--nz-navy, #00243c); }

.farm-tab.active {
    color: var(--nz-navy, #00243c) !important;
    border-bottom-color: var(--nz-lime, #3BD304) !important;
    background: transparent;
}

.farm-tab.active i { color: var(--nz-lime-text, #217A00); }


/* =============================================================================
   3 — ONE CARD
   -----------------------------------------------------------------------------
   .overview-card, .map-card, .op-card, .infra-card, .ponds-sidebar and the
   note/photo panels were six different cards, with four radii and three
   shadows between them. One of each.
   ========================================================================== */

.overview-card,
.map-card,
.op-card,
.infra-card,
.photo-grid-panel,
.cycle-form-panel,
.ponds-sidebar,
.ponds-map-area,
.note-editor,
.border-shell {
    border: 1px solid var(--nz-border, #e5eaf2) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 36, 60, .04), 0 8px 22px rgba(0, 36, 60, .05);
}

/* The two menus in the hero are .border-shell too and are shadowed above. */
.farm-top-header--detail .border-shell { box-shadow: 0 18px 40px rgba(0, 20, 40, .28) !important; }

.map-card, .ponds-map-area { overflow: hidden; }

/* One section heading, everywhere a card has one. */
.card-section-title,
.sidebar-title,
.infra-title,
.cycles-title,
.panel-title {
    font-family: var(--nz-font-display);
    letter-spacing: -0.01em;
    color: var(--nz-navy, #00243c) !important;
}

.card-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--nz-text-3, #64748b) !important;
    padding-bottom: 14px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--nz-border, #e5eaf2) !important;
}


/* ---- the farm information rows ----
   A label/value list, which is a table in everything but markup. Hairlines
   between rows, the value in tabular figures so the numbers line up, and no
   rule under the last one. */

/* THE CARD HOLDS THE PADDING, NOT THE ROWS.
   farm-detail.css gives .overview-card `overflow: hidden` and NO padding of
   its own — the original markup paid for the inset with `padding: 20px` on
   .card-section-title and matching padding on each row. When the rule below
   set the rows to `14px 2px`, the values lost their right-hand inset and the
   card's overflow:hidden then CLIPPED them: "Patnam Fisheries AQUA Farms" was
   cut off mid-word at the card edge.

   Putting the horizontal padding on the card fixes it once for the title, the
   rows and anything added later, instead of every child having to remember. */
.overview-card { padding: 0 22px !important; }

.card-section-title { padding: 20px 0 14px !important; }

.overview-row {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0 !important;
    border-bottom: 1px solid #f1f5f9;
}

.overview-row:last-child { border-bottom: 0; }

.overview-label,
.infra-label {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--nz-text-3, #64748b) !important;
    white-space: nowrap;
}

.overview-value,
.infra-value {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--nz-text, #0f172a) !important;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.overview-value {
    /* min-width:0 lets a flex item shrink below its content width — without it
       a long value pushes past the row and the card clips it again. */
    min-width: 0;
    text-align: right;
    /* Wrap rather than clip. A farm name the farmer typed is worth two lines. */
    overflow-wrap: anywhere;
    white-space: normal;
}

/* The label is short by definition, so it keeps its single line and gives up
   width to the value. */
.overview-label { flex: none; }

/* An unfilled field is a hole in the record, not a value. farm-detail.js
   writes "--" or "-" into one it has nothing for; greying those stops a row of
   dashes reading as loudly as a row of facts. */
.overview-value[data-unset],
.infra-value[data-unset] {
    font-weight: 500 !important;
    color: var(--nz-text-3, #94a3b8) !important;
}

.infra-group--view {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 13px !important;
    margin-bottom: 13px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.infra-group--view .infra-label { margin: 0; }


/* ---- the map ----
   It is the most valuable thing on the Overview tab and it was an unlabelled
   rectangle. A caption strip says what it is showing. */

.map-card, .ponds-map-area { position: relative; }

.fd-map-cap {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 500;              /* over Leaflet's panes, under its controls */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 24, 48, .78);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

.fd-map-cap i { color: var(--nz-lime, #3BD304); }


/* =============================================================================
   4 — THE OPERATION SUB-TABS
   -----------------------------------------------------------------------------
   The same pointer as the tabs above them, so the page has one idea of what
   "you are here" looks like rather than two.
   ========================================================================== */

.op-tab {
    padding: 13px 12px 11px !important;
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid transparent !important;
    color: var(--nz-text-2, #475569) !important;
}

.op-tab i { color: var(--nz-text-3, #94a3b8); }

.op-tab:hover {
    color: var(--nz-navy, #00243c) !important;
    background: var(--nz-surface-alt, #f8fafd);
    border-bottom-color: transparent !important;
}

.op-tab.active {
    color: var(--nz-navy, #00243c) !important;
    border-bottom-color: var(--nz-lime, #3BD304) !important;
}

.op-tab.active i { color: var(--nz-lime-text, #217A00); }

.op-toolbar, .op-tabs-bar {
    border: 1px solid var(--nz-border, #e5eaf2);
    border-radius: 14px 14px 0 0;
}

.op-tabs-bar { border-radius: 0 0 14px 14px; border-top: 0; overflow-x: auto; scrollbar-width: none; }
.op-tabs-bar::-webkit-scrollbar { display: none; }
.op-toolbar { border-bottom: 0; }


/* =============================================================================
   5 — BUTTONS
   ========================================================================== */

.btn-pill, .ctrl-btn, .btn-ctrl-md, .btn-new-cycle {
    min-height: 42px;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: transform .16s var(--nz-out, ease), box-shadow .16s var(--nz-out, ease);
}

.btn-pill { padding: 0 20px !important; }

.btn-overview, .btn-outline-primary.bg-brand {
    background: var(--nz-blue, #004af7) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 74, 247, .24), 0 6px 16px rgba(0, 74, 247, .18);
}

.btn-overview:hover, .btn-outline-primary.bg-brand:hover { transform: translateY(-1px); }
.btn-overview:active { transform: translateY(0); }

.farm-bottom-bar {
    border-top: 1px solid var(--nz-border, #e5eaf2);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =============================================================================
   6 — EMPTY STATES
   -----------------------------------------------------------------------------
   Photo, Notes and Cycles all start empty on a new farm, and all three said so
   differently: a blue icon box, a bare grey glyph, a dashed rectangle. One
   treatment, with a pond photograph behind it faded to a texture.

   The picture is set at .10 opacity under a white wash. An empty state is not
   a place to put a photograph you want looked at; it is a place to stop the
   panel being a grey rectangle.
   ========================================================================== */

.photo-empty,
.note-empty-state,
.cycles-empty {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 300px;
    padding: 46px 32px !important;
    border-radius: 16px !important;
    border: 1px solid var(--nz-border, #e5eaf2) !important;
    background: var(--nz-surface, #fff);
}

.photo-empty::before,
.note-empty-state::before,
.cycles-empty::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../img/site/ponds-aerial.webp');
    background-size: cover;
    background-position: center 55%;
    opacity: .10;
    filter: saturate(.8);
}

.photo-empty::after,
.note-empty-state::after,
.cycles-empty::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .90));
}

/* One icon plate, whichever glyph the pane uses. */
.empty-icon-box,
.note-empty-state > i,
.cycles-empty > i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 14px !important;
    font-size: 22px !important;
    color: var(--nz-lime-text, #217A00) !important;
    background: var(--nz-lime-soft, #EBFBE6) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 0 1px rgba(59, 211, 4, .2), 0 0 0 8px rgba(59, 211, 4, .06);
}

.empty-icon-box i { color: var(--nz-lime-text, #217A00) !important; font-size: 22px; }

.empty-title {
    margin: 0 0 6px !important;
    font-family: var(--nz-font-display);
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--nz-navy, #00243c) !important;
}

.empty-text,
.note-empty-state p,
.cycles-empty p {
    margin: 0 !important;
    max-width: 42ch !important;
    font-size: 14px !important;
    line-height: 1.6;
    color: var(--nz-text-2, #475569) !important;
}

/* The dashed rectangle goes; the card above replaced what it was for. */
.cycles-empty.border-dashed-surface { border-style: solid !important; }

/* Photo and Notes render their empty state INSIDE a panel that is already a
   card, so the rule above would draw a card in a card. Inside one, the empty
   state keeps the photograph and the icon plate and drops its own edge. */
.photo-grid-panel > .photo-empty,
.note-editor > .note-empty-state {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    border-radius: 15px !important;   /* one less than the panel's 16 */
    flex: 1;
}

/* The smaller in-pane messages are not empty STATES — they are one line in a
   panel that is otherwise working. They only need to stop being invisible. */
.op-pane-empty, .chart-empty {
    color: var(--nz-text-2, #475569) !important;
    font-size: 13.5px !important;
}

.op-pane-empty { line-height: 1.6; }
.chart-empty i, .op-pane-empty i { color: var(--nz-text-3, #94a3b8); }


/* =============================================================================
   7 — MOTION
   ========================================================================== */

.tab-content.active > * { animation: fdIn .32s var(--nz-out, cubic-bezier(.33, 1, .68, 1)) both; }

@keyframes fdIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tab-content.active > * { animation: none; }
    .btn-pill, .ctrl-btn, .farm-tab, .op-tab, .back-link { transition: none !important; }
    .btn-overview:hover, .btn-outline-primary.bg-brand:hover { transform: none; }
}