/* ==========================================================================
   FARM RULES & AUTOMATION (#/rules and its tabs)

   Scoped entirely to the .fr-* namespace so nothing here can reach another
   module. Every colour, radius, shadow and font comes from css/tokens.css —
   no new palette is introduced.

   Layout follows the reference design: title block with a green glyph tile,
   a five-card KPI strip, a tab strip, then a split of category rail +
   working table, and the "how automation works" flow strip at the bottom.
   ========================================================================== */

:root{
  --fr-gap:14px;        /* gap inside a grid                */
  --fr-section:16px;    /* gap between stacked sections     */
  --fr-rail:268px;      /* width of the category rail       */
}

/* --- page title block ----------------------------------------------------- */
.fr-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:var(--fr-section);
}
.fr-head__left{display:flex;align-items:center;gap:14px;min-width:0;}
.fr-head__art{
  width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:var(--green-050);color:var(--green-600);
}
.fr-head__txt h2{margin:0;font-size:23px;font-weight:700;color:#16241c;line-height:1.25;}
.fr-head__txt p{margin:5px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5;}
.fr-head .btn--primary{background:var(--green-700);}
.fr-head .btn--primary:hover{background:var(--green-800);}

/* --- KPI strip ------------------------------------------------------------ */
.fr-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--fr-gap);margin-bottom:var(--fr-section);align-items:stretch;
}
.fr-kpi{
  display:flex;align-items:center;gap:13px;min-width:0;width:100%;text-align:left;
  padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.fr-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0d5;}
.fr-kpi__art{width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;}
.fr-kpi__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.fr-kpi__lbl{
  font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fr-kpi__val{
  font-family:var(--font-en);font-size:27px;font-weight:700;line-height:1.15;
  color:#12261a;letter-spacing:-.6px;
}
.fr-kpi__sub{font-size:11.5px;color:var(--muted-2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.fr-kpi--green  .fr-kpi__art{background:var(--green-050);color:var(--green-600);}
.fr-kpi--blue   .fr-kpi__art{background:#e8f0fe;color:#1b5fb8;}
.fr-kpi--amber  .fr-kpi__art{background:#fdf3e3;color:#d97706;}
.fr-kpi--purple .fr-kpi__art{background:var(--purple-bg);color:var(--purple);}
.fr-kpi--red    .fr-kpi__art{background:var(--danger-bg);color:var(--danger);}

/* --- tab strip ------------------------------------------------------------ */
.fr-tabs{
  display:flex;gap:2px;overflow-x:auto;margin-bottom:var(--fr-section);
  border-bottom:1px solid var(--border);scrollbar-width:thin;
}
.fr-tab{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px 13px;font-size:13.5px;font-weight:600;color:var(--muted);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:.14s;border-radius:8px 8px 0 0;
}
.fr-tab:hover{color:var(--green-700);background:#f7faf8;}
.fr-tab.is-on{color:var(--green-600);border-bottom-color:var(--green-500);}
.fr-tab__ico{display:inline-flex;flex:none;opacity:.9;}

/* --- split: category rail + working panel --------------------------------- */
.fr-split{
  display:grid;grid-template-columns:var(--fr-rail) minmax(0,1fr);
  gap:var(--fr-gap);align-items:start;margin-bottom:var(--fr-section);
}
.fr-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.fr-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;flex-wrap:wrap;border-bottom:1px solid var(--border);
}
.fr-panel__head h3{margin:0;font-size:16px;font-weight:600;color:#18251d;}
.fr-panel__tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.fr-panel__tools .inp{height:36px;font-size:13px;}
.fr-panel__tools select.inp{width:auto;padding-right:30px;}

/* search box with a leading glyph, as in the reference */
.fr-search{position:relative;display:inline-flex;align-items:center;min-width:0;}
.fr-search__ico{position:absolute;left:11px;display:inline-flex;color:var(--muted-2);pointer-events:none;}
.fr-search .inp{padding-left:33px;width:210px;}

/* square icon button used beside the filters */
.fr-iconbtn{
  width:36px;height:36px;flex:none;border:1px solid var(--border);border-radius:9px;
  background:#fff;display:grid;place-items:center;color:#6b7a71;transition:.14s;
}
.fr-iconbtn:hover{border-color:var(--green-400);color:var(--green-700);}
.fr-iconbtn.is-on{border-color:var(--green-500);background:var(--green-050);color:var(--green-700);}

/* --- category rail -------------------------------------------------------- */
.fr-cats{display:flex;flex-direction:column;padding:6px;}
.fr-cat{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 11px;border-radius:10px;transition:background .13s;
}
.fr-cat:hover{background:#f6faf8;}
.fr-cat.is-on{background:var(--green-050);}
.fr-cat__art{width:29px;height:29px;flex:none;border-radius:9px;display:grid;place-items:center;}
.fr-cat__lbl{flex:1;min-width:0;font-size:13.5px;color:#33413a;line-height:1.35;}
.fr-cat.is-on .fr-cat__lbl{color:var(--green-700);font-weight:600;}
.fr-cat__n{
  font-family:var(--font-en);font-size:12.5px;font-weight:700;color:var(--muted);
  flex:none;min-width:22px;text-align:right;
}
.fr-cat.is-on .fr-cat__n{color:var(--green-600);}

/* category glyph tints — keyed to the CATEGORY CODE, never to its label */
.fr-c-feed        {background:var(--green-050);color:var(--green-600);}
.fr-c-vaccine     {background:#e8f0fe;color:#1b5fb8;}
.fr-c-deworm      {background:var(--purple-bg);color:var(--purple);}
.fr-c-health_check{background:#e4f5ef;color:#0e7490;}
.fr-c-growth      {background:#fdf3e3;color:#b45309;}
.fr-c-breeding    {background:var(--danger-bg);color:var(--danger);}
.fr-c-care        {background:#fff1e6;color:#c2620d;}
.fr-c-other       {background:#f1f3f2;color:#5b6a61;}

/* --- table ---------------------------------------------------------------- */
.fr-panel .tbl-wrap{border:0;border-radius:0;box-shadow:none;}
.fr-tbl{min-width:940px;}
.fr-tbl th{white-space:nowrap;background:#fbfcfb;font-weight:600;}
.fr-tbl td{padding:11px 16px;vertical-align:middle;}

/* rule name cell: tinted glyph + Bengali name + English sub */
.fr-name{display:flex;align-items:center;gap:11px;min-width:0;}
.fr-name__art{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;}
.fr-name__txt{min-width:0;}
.fr-name__bn{display:block;font-size:13.5px;font-weight:600;color:#1c2b23;line-height:1.35;}
.fr-name__en{display:block;font-family:var(--font-en);font-size:11.5px;color:var(--muted);margin-top:1px;}

.fr-species{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#37453d;white-space:nowrap;}
.fr-species__ico{color:var(--green-600);display:inline-flex;flex:none;}

/* two-line "start age" cell */
.fr-when{line-height:1.4;}
.fr-when b{display:block;font-size:13px;font-weight:500;color:#2c3a32;}
.fr-when small{display:block;font-size:11.5px;color:var(--muted-2);margin-top:1px;}
.fr-next{font-size:13px;color:#37453d;}

/* row action buttons */
.fr-act{white-space:nowrap;text-align:right;}
.fr-ib{
  width:29px;height:29px;border-radius:8px;display:inline-grid;place-items:center;
  color:#7c8a82;transition:.14s;vertical-align:middle;
}
.fr-ib:hover{background:#eef4f0;color:var(--green-700);}
.fr-ib--danger:hover{background:var(--danger-bg);color:var(--danger);}
.fr-empty{text-align:center;padding:46px 16px;color:var(--muted);font-size:13.5px;}

/* --- pills ----------------------------------------------------------------
   The five shared .tag--* tones cannot express eight categories, so the module
   adds its own. The hue comes from the CODE, never from the label, so
   translating a category can never change its colour.                        */
.fr-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.65;
}
.fr-pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.fr-pill--green {background:var(--success-bg);color:#15803d;}
.fr-pill--amber {background:var(--warning-bg);color:#b45309;}
.fr-pill--red   {background:var(--danger-bg);color:#b3312a;}
.fr-pill--blue  {background:var(--info-bg);color:#1d4ed8;}
.fr-pill--purple{background:var(--purple-bg);color:#6b3fc4;}
.fr-pill--cyan  {background:#e4f5ef;color:#0e7490;}
.fr-pill--orange{background:#fff1e6;color:#c2620d;}
.fr-pill--grey  {background:#f1f3f2;color:#5b6a61;}

/* --- table footer + pager ------------------------------------------------- */
.fr-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:13px 18px;border-top:1px solid var(--border);
}
.fr-foot__info{font-size:12.5px;color:var(--muted);}
.fr-foot__per{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);}
.fr-foot__per .inp{height:32px;width:auto;padding:0 26px 0 9px;font-size:12.5px;}
.fr-pg{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.fr-pg__b{
  min-width:32px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--border);
  background:#fff;font-family:var(--font-en);font-size:12.5px;font-weight:600;color:#4b5a51;
  transition:.14s;
}
.fr-pg__b:hover:not([disabled]):not(.is-on){border-color:var(--green-400);color:var(--green-700);}
.fr-pg__b.is-on{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.fr-pg__b[disabled]{opacity:.4;cursor:not-allowed;}
.fr-pg__gap{padding:0 2px;color:var(--muted-2);font-size:13px;}

/* --- "how automation works" flow strip ------------------------------------ */
.fr-flow{padding:6px 18px 20px;}
.fr-flow__row{display:flex;align-items:flex-start;gap:6px;flex-wrap:nowrap;overflow-x:auto;}
.fr-flow__step{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:9px;flex:1 1 0;min-width:150px;padding:4px 6px;
}
.fr-flow__art{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--green-050);color:var(--green-600);
}
.fr-flow__ttl{display:block;font-size:13.5px;font-weight:600;color:#1c2b23;line-height:1.4;}
.fr-flow__sub{display:block;font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:3px;max-width:190px;}
.fr-flow__arrow{
  flex:none;align-self:center;color:#c4d3ca;margin-top:14px;display:inline-flex;
}

/* --- animal-rule tab ------------------------------------------------------ */
.fr-animals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--fr-gap);margin-bottom:var(--fr-section);}
.fr-animal{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s;
}
.fr-animal:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0d5;}
.fr-animal.is-on{border-color:var(--green-500);background:#fbfefc;box-shadow:0 0 0 3px rgba(24,144,72,.09);}
.fr-animal__art{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--green-050);color:var(--green-600);}
.fr-animal__lbl{font-size:13.5px;font-weight:600;color:#1c2b23;}
.fr-animal__n{font-family:var(--font-en);font-size:11.5px;color:var(--muted);}

/* criteria chips on the animal tab */
.fr-crit{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 4px;}
.fr-crit span{
  background:#f5f7f6;border:1px solid var(--border);border-radius:20px;
  padding:4px 11px;font-size:12px;color:#55635b;
}

/* --- calendar ------------------------------------------------------------- */
.fr-calbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--border);}
.fr-calbar__nav{display:flex;align-items:center;gap:8px;}
.fr-calbar__month{font-size:15px;font-weight:600;color:#18251d;min-width:150px;text-align:center;}
.fr-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);padding:1px;}
.fr-cal__wd{
  background:#fbfcfb;padding:9px 4px;text-align:center;font-size:12px;font-weight:600;color:var(--muted);
}
.fr-cal__day{
  background:#fff;min-height:96px;padding:7px 8px;display:flex;flex-direction:column;gap:4px;
  text-align:left;align-items:stretch;transition:background .12s;
}
.fr-cal__day:hover{background:#f8fbf9;}
.fr-cal__day.is-out{background:#fafbfa;}
.fr-cal__day.is-today{background:var(--green-050);box-shadow:inset 0 0 0 2px var(--green-400);}
.fr-cal__n{font-family:var(--font-en);font-size:12.5px;font-weight:600;color:#3d4a42;}
.fr-cal__day.is-out .fr-cal__n{color:var(--muted-2);}
.fr-cal__day.is-today .fr-cal__n{color:var(--green-700);}
.fr-cal__ev{
  display:block;font-size:10.5px;line-height:1.4;padding:2px 6px;border-radius:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.fr-cal__more{font-size:10.5px;color:var(--muted);text-align:left;padding-left:2px;}

/* --- notification settings ------------------------------------------------ */
.fr-set{display:flex;flex-direction:column;}
.fr-set__row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid #f1f3f2;flex-wrap:wrap;
}
.fr-set__row:last-child{border-bottom:none;}
.fr-set__txt{min-width:0;flex:1 1 260px;}
.fr-set__ttl{display:block;font-size:13.5px;font-weight:600;color:#22302a;line-height:1.4;}
.fr-set__sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.55;}
.fr-set__ctl{display:flex;align-items:center;gap:9px;flex:none;flex-wrap:wrap;}
.fr-set__ctl .inp{height:36px;width:auto;font-size:13px;}

/* switch */
.fr-sw{
  width:42px;height:24px;border-radius:20px;background:#d7dce4;position:relative;
  transition:background .16s;flex:none;
}
.fr-sw::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);transition:transform .16s;
}
.fr-sw.is-on{background:var(--green-500);}
.fr-sw.is-on::after{transform:translateX(18px);}

/* channel chips */
.fr-chip{
  height:32px;padding:0 13px;border-radius:20px;border:1px solid var(--border-strong);
  background:#fff;font-size:12.5px;font-weight:600;color:#4b5a51;transition:.14s;
}
.fr-chip:hover{border-color:var(--green-400);color:var(--green-700);}
.fr-chip.is-on{background:var(--green-050);border-color:var(--green-500);color:var(--green-700);}

/* --- task tab ------------------------------------------------------------- */
.fr-task-tabs{display:flex;gap:4px;padding:0 18px;overflow-x:auto;border-bottom:1px solid var(--border);}
.fr-task-tab{
  flex:none;padding:9px 14px 11px;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:.14s;border-radius:8px 8px 0 0;
}
.fr-task-tab:hover{color:var(--green-700);background:#f7faf8;}
.fr-task-tab.is-on{color:var(--green-600);border-bottom-color:var(--green-500);}
.fr-task-tab__n{font-family:var(--font-en);font-weight:700;}
.fr-tid{font-family:var(--font-en);font-size:12.5px;font-weight:600;color:var(--green-600);}
.fr-tid:hover{text-decoration:underline;}
.fr-due{font-family:var(--font-en);font-size:13px;color:#37453d;white-space:nowrap;}
.fr-due small{display:block;font-family:var(--font-bn);font-size:11px;color:var(--muted-2);margin-top:1px;}

/* --- detail modal --------------------------------------------------------- */
.fr-dt{display:flex;flex-direction:column;gap:15px;}
.fr-dt__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
.fr-box{border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;background:#fbfcfb;}
.fr-box h4{margin:0 0 9px;font-size:12.5px;font-weight:700;color:var(--muted);}
.fr-box__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px;}
.fr-box__k{color:var(--muted);flex:none;}
.fr-box__v{color:#22302a;font-weight:600;text-align:right;min-width:0;word-break:break-word;}
.fr-box__v.en{font-family:var(--font-en);}

/* --- responsive ----------------------------------------------------------- */
@media(max-width:1500px){
  .fr-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:1320px){
  .fr-split{grid-template-columns:minmax(0,1fr);}
  .fr-animals{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
  .fr-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fr-flow__row{flex-wrap:wrap;justify-content:center;}
  .fr-flow__arrow{display:none;}
  .fr-flow__step{flex:1 1 150px;}
}
@media(max-width:760px){
  .fr-head__txt h2{font-size:20px;}
  .fr-panel__head{align-items:flex-start;flex-direction:column;}
  .fr-panel__tools{width:100%;}
  .fr-search{flex:1;}
  .fr-search .inp{width:100%;}
  .fr-animals{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fr-foot{justify-content:center;}
  .fr-dt__grid{grid-template-columns:1fr;}
  .fr-cal__day{min-height:74px;}
  .fr-cal__ev{font-size:9.5px;}
  .fr-set__row{align-items:flex-start;}
}
@media(max-width:480px){
  .fr-kpis{grid-template-columns:1fr;}
  .fr-animals{grid-template-columns:1fr;}
  .fr-cal__day{min-height:60px;padding:5px;}
}
@media print{
  .fr-head .btn,.fr-tabs,.fr-panel__tools,.fr-foot,.fr-act,.fr-flow{display:none !important;}
}