/* ==========================================================================
   FARM MANAGEMENT OVERVIEW  (#/farm)

   Scoped to the .fm-* namespace so nothing here can affect another module.
   Colours, radii and shadows come from css/tokens.css only.

   SPACING MODEL
   Every top-level section on this page is separated by --fm-section, and every
   grid inside a section uses --fm-gap. Card heads across a row share one
   min-height, and every repeating tile aligns its rows on a shared baseline,
   so nothing shifts up or down when the text length changes.
   ========================================================================== */

:root{
  --fm-section:16px;   /* gap between the page's stacked sections */
  --fm-gap:14px;       /* gap between cards inside a grid          */
  --fm-head-h:56px;    /* shared card-head height across .fm-grid  */
}

/* --- top action bar ------------------------------------------------------ */
.fm-topbar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:var(--fm-section);}
.fm-topbar .btn{display:inline-flex;align-items:center;gap:7px;}

/* --- species summary cards ----------------------------------------------- */
.fm-species{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--fm-gap);align-items:stretch;margin-bottom:var(--fm-section);
}
.fm-sp{
  display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;
  column-gap:12px;row-gap:0;
  padding:14px 15px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
  text-align:left;cursor:pointer;transition:.16s;min-width:0;
}
.fm-sp:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.fm-sp__art{width:44px;height:44px;flex:none;}
.fm-sp__art svg{width:100%;height:100%;display:block;}
/* min-height fixes the first row, so the divider below sits at the same
   height on every card regardless of how long the species name is. */
.fm-sp__main{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  flex:1;min-width:0;min-height:46px;
}
.fm-sp__name{
  font-size:13px;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fm-sp__num{font-size:27px;font-weight:700;color:var(--ink);line-height:1.1;font-family:var(--font-en);}
/* This line carries three counts (active / sold / died). nowrap + ellipsis cut
   the last one off on a wide screen, so it wraps instead: the row already
   spans the full card, and a second line costs nothing that the card cannot
   absorb. */
.fm-sp__meta{
  flex-basis:100%;width:100%;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--border);
  font-size:11.5px;line-height:1.4;color:var(--muted);
  min-width:0;overflow-wrap:anywhere;
}
.fm-sp__meta b{font-weight:500;color:var(--muted);}
.fm-sp__meta i{color:var(--border-strong);font-style:normal;margin:0 3px;}

/* Per-species tint: background wash plus the label colour */
.fm-sp--cow{background:#fbfcfb;}                    .fm-sp--cow     .fm-sp__name{color:var(--green-600);}
.fm-sp--goat{background:#fdf8ee;border-color:#f4e6cd;} .fm-sp--goat  .fm-sp__name{color:#a15c2a;}
.fm-sp--chicken{background:#fdf1f0;border-color:#f7dcd9;} .fm-sp--chicken .fm-sp__name{color:#c5322a;}
.fm-sp--duck{background:#eff5fd;border-color:#d8e6f8;} .fm-sp--duck  .fm-sp__name{color:#1868d6;}
.fm-sp--fish{background:#f4f1fd;border-color:#e2dbf7;} .fm-sp--fish  .fm-sp__name{color:var(--purple);}
.fm-sp--veg{background:#f0f9f2;border-color:#d7ecdd;}  .fm-sp--veg   .fm-sp__name{color:var(--green-500);}

/* --- middle row: chart / production / activity --------------------------- */
.fm-grid{
  display:grid;grid-template-columns:1.15fr 1.1fr 1fr;
  gap:var(--fm-gap);align-items:stretch;margin-bottom:var(--fm-section);
}
.fm-grid .card{display:flex;flex-direction:column;min-width:0;}
/* One head height for all three cards — otherwise the "see all" pill makes the
   third head taller and its body starts lower than the other two. */
.fm-grid .card__head{min-height:var(--fm-head-h);align-items:center;flex:none;}
.fm-grid .card__body{flex:1;display:flex;flex-direction:column;min-width:0;}
.fm-grid #fm-chart{height:250px;flex:none;}
.fm-grid .chart-legend{flex:none;margin-bottom:10px;flex-wrap:wrap;row-gap:6px;}

/* --- monthly production tiles -------------------------------------------- */
.fm-prod{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  flex:1;align-content:stretch;
}
.fm-pr{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 8px;background:var(--surface);cursor:pointer;transition:.14s;min-width:0;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
}
.fm-pr:nth-child(4n){border-right:0;}
.fm-pr:nth-child(n+5){border-bottom:0;}
.fm-pr:hover{background:var(--green-050);}
.fm-pr__art{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
}
.fm-pr__art svg{width:26px;height:26px;display:block;}
.fm-pr__art--blue{background:var(--info-bg);}
.fm-pr__art--amber{background:var(--warning-bg);}
.fm-pr__art--red{background:var(--danger-bg);}
.fm-pr__art--green{background:var(--success-bg);}
/* Two-line box: one- and two-line labels then occupy the same height, so the
   value underneath lands on the same baseline across the whole row. */
.fm-pr__lbl{
  display:flex;align-items:center;justify-content:center;
  min-height:32px;width:100%;
  font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.25;
}
.fm-pr__val{font-size:12.5px;line-height:1.3;color:var(--muted);font-family:var(--font-en);}

/* --- feature directory --------------------------------------------------- */
.fm-features{margin-bottom:var(--fm-section);}
.fm-features .card__body{padding-top:0;}
/* stretch (not start) so all six cards share one bottom edge */
.fm-feat-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--fm-gap);align-items:stretch;
}
.fm-feat{
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:13px 11px;background:var(--surface);
}
.fm-feat__head{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0;}
.fm-feat__art{width:26px;height:26px;flex:none;}
.fm-feat__art svg{width:100%;height:100%;display:block;}
/* Fixed head height keeps every link list starting on the same line, whether
   the group title runs to one line or two. */
.fm-feat__head h4{
  display:flex;align-items:center;min-height:34px;min-width:0;
  margin:0;font-size:13.5px;font-weight:600;line-height:1.25;
}
.fm-feat__list{display:flex;flex-direction:column;gap:1px;}

.fm-link{
  display:flex;align-items:center;gap:8px;width:100%;min-height:30px;
  padding:6px 5px;background:none;border:0;border-radius:7px;
  text-align:left;cursor:pointer;transition:.13s;color:var(--ink-2);
}
.fm-link:hover{background:rgba(255,255,255,.75);color:var(--green-600);}
/* The tinted cards above wash to white on hover; on the untinted support cards
   that would be white-on-white, so those use the app's standard green hover. */
.fm-feat--feed .fm-link:hover,
.fm-feat--medicine .fm-link:hover,
.fm-feat--inventory .fm-link:hover,
.fm-feat--machinery .fm-link:hover,
.fm-feat--store .fm-link:hover,
.fm-feat--others .fm-link:hover{background:var(--green-050);}
.fm-link__ico{color:var(--muted-2);display:grid;place-items:center;flex:none;}
.fm-link:hover .fm-link__ico{color:inherit;}
.fm-link__lbl{flex:1;min-width:0;font-size:12.5px;line-height:1.3;overflow-wrap:anywhere;}
.fm-link__go{color:var(--muted-2);display:grid;place-items:center;flex:none;transform:rotate(180deg);}

/* Card tints mirror the species cards */
.fm-feat--cow{background:#fbfcfb;}
.fm-feat--goat{background:#fdf8ee;border-color:#f4e6cd;}
.fm-feat--chicken{background:#fdf1f0;border-color:#f7dcd9;}
.fm-feat--duck{background:#eff5fd;border-color:#d8e6f8;}
.fm-feat--fish{background:#f4f8fd;border-color:#dbe7f6;}
.fm-feat--veg{background:#f6faf6;border-color:#dfeee3;}
.fm-feat--cow     .fm-feat__head h4{color:var(--green-600);}
.fm-feat--goat    .fm-feat__head h4{color:#a15c2a;}
.fm-feat--chicken .fm-feat__head h4{color:#c5322a;}
.fm-feat--duck    .fm-feat__head h4{color:#1868d6;}
.fm-feat--fish    .fm-feat__head h4{color:#1868d6;}
.fm-feat--veg     .fm-feat__head h4{color:var(--green-500);}

/* Support groups (second row). The reference shows these on the plain white
   card surface with only the heading tinted, so they take no --fm-feat
   background override — .fm-feat's own surface and border already match. */
.fm-feat--feed      .fm-feat__head h4{color:#1868d6;}
.fm-feat--medicine  .fm-feat__head h4{color:var(--ink);}
.fm-feat--inventory .fm-feat__head h4{color:#0e7490;}
.fm-feat--machinery .fm-feat__head h4{color:var(--purple);}
.fm-feat--store     .fm-feat__head h4{color:#2f7d32;}
.fm-feat--others    .fm-feat__head h4{color:var(--ink);}

/* --- announcements ------------------------------------------------------- */
.fm-announce .card__head{flex-wrap:wrap;row-gap:10px;}
.fm-announce .card__head h3{display:flex;align-items:center;gap:9px;min-width:0;}
.fm-ann__mega{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--purple-bg);color:var(--purple);flex:none;
}
.fm-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.fm-head-actions .btn{display:inline-flex;align-items:center;gap:6px;}

.fm-ann-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--fm-gap);align-items:stretch;
}
.fm-ann{
  display:flex;flex-direction:column;gap:8px;padding:12px 13px;min-width:0;
  border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-md);
  text-align:left;cursor:pointer;transition:.16s;
}
.fm-ann:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.fm-ann__top{display:flex;align-items:center;gap:8px;min-width:0;}
.fm-ann__art{width:26px;height:26px;flex:none;}
.fm-ann__art svg{width:100%;height:100%;display:block;}
.fm-ann__top b{font-size:13px;font-weight:600;line-height:1.25;min-width:0;overflow-wrap:anywhere;}
.fm-ann__body{font-size:12.5px;color:var(--ink-2);line-height:1.55;}
/* margin-top:auto pins the footer to the bottom, so the meta line and tag sit
   on one row across all four cards even when the bodies differ in length. */
.fm-ann__foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px;
  margin-top:auto;padding-top:9px;border-top:1px solid var(--border);
}
.fm-ann__meta{font-size:11px;line-height:1.4;color:var(--muted);font-family:var(--font-en);flex:1;min-width:0;}
.fm-ann__meta i{color:var(--border-strong);font-style:normal;margin:0 4px;}
.fm-ann__foot .tag{flex:none;}

.fm-ann--ok{background:var(--success-bg);border-color:#cfe9d8;border-left-color:var(--success);}
.fm-ann--ok   .fm-ann__top b{color:var(--green-600);}
.fm-ann--warn{background:var(--warning-bg);border-color:#f2e2bf;border-left-color:var(--warning);}
.fm-ann--warn .fm-ann__top b{color:#b5730a;}
.fm-ann--info{background:var(--info-bg);border-color:#d5e2fa;border-left-color:var(--info);}
.fm-ann--info .fm-ann__top b{color:#1a5fc4;}
.fm-ann--bad{background:var(--danger-bg);border-color:#f7d8d5;border-left-color:var(--danger);}
.fm-ann--bad  .fm-ann__top b{color:#c0362d;}

/* --- "add new record" picker (inside a modal) ---------------------------- */
.fm-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.fm-pick__b{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:12px 6px;min-width:0;text-align:center;line-height:1.3;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.14s;
}
.fm-pick__b span{width:34px;height:34px;flex:none;}
.fm-pick__b span svg{width:100%;height:100%;display:block;}
.fm-pick__b:hover{border-color:var(--green-400);background:var(--green-050);color:var(--green-600);}

/* ==========================================================================
   RESPONSIVE — same breakpoints as css/responsive.css
   ========================================================================== */
@media (max-width:1450px){
  .fm-species{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fm-feat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1240px){
  .fm-grid{grid-template-columns:1fr 1fr;}
  .fm-grid .card:last-child{grid-column:1/-1;}
  .fm-ann-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1024px){
  .fm-species{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fm-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  /* match the tighter .content padding used by css/responsive.css */
  :root{--fm-section:14px;--fm-gap:12px;}
}
@media (max-width:720px){
  .fm-species{grid-template-columns:1fr;}
  .fm-grid{grid-template-columns:1fr;}
  .fm-grid .card:last-child{grid-column:auto;}
  .fm-grid .card__head{min-height:0;}
  .fm-feat-grid{grid-template-columns:1fr;}
  .fm-ann-grid{grid-template-columns:1fr;}
  .fm-prod{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fm-pr:nth-child(2n){border-right:0;}
  .fm-pr:nth-child(4n){border-right:0;}
  .fm-pr:nth-child(n+5){border-bottom:1px solid var(--border);}
  .fm-pr:nth-child(n+7){border-bottom:0;}
  .fm-topbar{justify-content:stretch;}
  .fm-topbar .btn{width:100%;justify-content:center;}
  .fm-head-actions{width:100%;}
  .fm-head-actions .btn{flex:1;justify-content:center;}
  .fm-pick{grid-template-columns:repeat(2,minmax(0,1fr));}
}