/* ==========================================================================
   APP SHELL — sidebar, header, content, footer
   ========================================================================== */

#app-screen{display:none;min-height:100vh;}
#app-screen.active{display:block;}

.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);z-index:60;
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  display:flex;flex-direction:column;
  transition:transform .24s ease,width .24s ease;
}
.sidebar__brand{
  display:flex;align-items:center;gap:11px;padding:16px 16px 18px;
}
/* Ring-outline mark: transparent centre, green stroke — matches the brand logo */
.sidebar__brand .logo-badge{
  width:43px;height:43px;border-radius:50%;background:transparent;
  border:2px solid #62bc47;display:grid;place-items:center;flex:none;
}
.sidebar__brand b{
  font-family:var(--font-en);color:#fff;font-size:17px;font-weight:700;line-height:1.24;letter-spacing:-.2px;
}
.avatar{
  border-radius:50%;object-fit:cover;flex:none;background:#3c5a48;
  display:grid;place-items:center;color:#fff;font-weight:600;font-family:var(--font-bn);
}
.avatar--54{width:54px;height:54px;font-size:18px;}
.avatar--44{width:44px;height:44px;font-size:15px;}
.avatar--36{width:36px;height:36px;font-size:13px;}
/* Carrying a profile photo. The initials stay in the DOM for screen readers
   and are hidden with colour, so removing the photo brings them straight
   back — see js/core/user-avatar.js. */
.avatar--photo{background-size:cover;background-position:center;color:transparent;}
.online{display:flex;align-items:center;gap:6px;font-family:var(--font-bn);font-size:12px;color:var(--sidebar-text);margin-top:5px;}
.online i{width:8px;height:8px;border-radius:50%;background:#62bc47;box-shadow:0 0 0 0 rgba(98,188,71,.6);animation:pulse 2s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(98,188,71,0);}100%{box-shadow:0 0 0 0 rgba(98,188,71,0);}}

.sidebar__nav{flex:1;overflow-y:auto;padding:2px 10px 22px;}
.sidebar__nav::-webkit-scrollbar-thumb{background:#2b3d33;}
.nav-item{
  width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  color:var(--sidebar-text);font-size:14.5px;font-weight:500;text-align:left;
  transition:background .14s,color .14s;margin-bottom:2px;
}
.nav-item .ico{width:20px;height:20px;flex:none;display:grid;place-items:center;opacity:.92;}
.nav-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-en);}
.nav-item .lbl.bn{font-family:var(--font-bn);}
.nav-item .caret{transition:transform .2s;opacity:.7;flex:none;}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item.active{
  background:linear-gradient(90deg,var(--green-600),var(--green-500));
  color:#fff;box-shadow:0 4px 12px rgba(24,144,72,.28);
}
.nav-item.open .caret{transform:rotate(180deg);}
.submenu{overflow:hidden;max-height:0;transition:max-height .26s ease;}
.submenu.open{max-height:420px;}
.submenu .nav-item{
  padding:9px 12px 9px 44px;font-size:13.5px;color:var(--sidebar-text-dim);border-radius:8px;
}
.submenu .nav-item:hover{color:#fff;background:var(--sidebar-hover);}
.submenu .nav-item.active{background:rgba(24,144,72,.20);color:#7ee2a1;box-shadow:none;}
.nav-sep{height:1px;background:#1e2f25;margin:10px 12px;}

.sidebar-backdrop{
  position:fixed;inset:0;background:rgba(9,17,12,.5);z-index:55;opacity:0;pointer-events:none;
  transition:opacity .22s;backdrop-filter:blur(2px);
}
.sidebar-backdrop.show{opacity:1;pointer-events:auto;}

.main{margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column;transition:margin .24s ease;}

/* COLLAPSED = compact icon rail.

   The sidebar used to slide out of view entirely (translateX(-100%)), which
   left no way to navigate without opening it again. It now narrows to
   --sidebar-rail instead: every menu icon stays where it was and only the
   text is hidden, and .main follows the narrower width so the content grows
   into the space the labels gave up.

   Submenus are never shown here: their entries are text-only (no icons, see
   renderSidebar in js/shell/sidebar.js), so in a rail they would be blank
   rows. A group icon is a plain link instead - it opens that module's own
   main page without widening the sidebar, and the rest of the module is
   reached from the tab rail on the page itself. See handleGroupClick in
   js/shell/sidebar.js.

   Below 1024px the sidebar is an overlay drawer, not a rail; css/responsive.css
   keeps that behaviour by restoring the full width there. */
body.sidebar-collapsed .sidebar{width:var(--sidebar-rail);}
body.sidebar-collapsed .main{margin-left:var(--sidebar-rail);}
body.sidebar-collapsed .sidebar__brand{padding:16px 0 18px;justify-content:center;}
body.sidebar-collapsed .sidebar__brand b{display:none;}
body.sidebar-collapsed .sidebar__nav{padding:2px 8px 22px;}
body.sidebar-collapsed .nav-item{justify-content:center;gap:0;padding:11px 0;}
body.sidebar-collapsed .nav-item .lbl,
body.sidebar-collapsed .nav-item .caret{display:none;}
body.sidebar-collapsed .submenu{display:none;}
body.sidebar-collapsed .nav-sep{margin:10px 8px;}

/* Header */
.header{
  height:var(--header-h);background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:45;
}
.icon-btn{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#4b5a51;
  transition:background .14s,color .14s;position:relative;flex:none;
}
.icon-btn:hover{background:#f1f4f2;color:var(--green-600);}
.icon-btn.on{background:var(--green-050);color:var(--green-600);}
/* Back — sits between the sidebar toggle and the title, and borrows .date-btn's
   pill so it reads as existing header furniture rather than a new control. The
   router toggles [hidden]; that needs its own selector here because the plain
   .back-btn display:flex would otherwise beat the browser's [hidden] rule. */
.back-btn{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 13px;flex:none;
  border:1px solid var(--border);border-radius:10px;background:#fff;
  font-family:inherit;font-size:13.5px;font-weight:500;color:#4b5a51;
  white-space:nowrap;transition:.14s;
}
.back-btn:hover{border-color:var(--green-400);color:var(--green-600);background:var(--green-050);}
.back-btn svg{flex:none;}
.back-btn[hidden]{display:none;}
/* The title is an <h1>: its default UA margin (0.67em) must be cleared or the
   title + breadcrumb block grows taller than the fixed-height header and the
   text is pushed off-centre. */
.page-title{
  display:flex;align-items:center;gap:11px;margin:0;min-width:0;
  font-size:19px;font-weight:600;line-height:1.25;color:#18251d;
}
.page-title > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.page-head-block{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:0;flex:0 99999 auto;
}
/* The very high shrink factor is deliberate. The header is a flex row, so when
   its contents no longer fit, every shrinkable item gives up space in
   proportion to its width. The original already compressed the date button and
   the search field on pages with long titles (the date label wrapped onto two
   lines at 140px instead of its natural 153px), and adding the Back button
   would have squeezed them further. The title and breadcrumb are the one part
   of the header built to give way - both ellipsize, and min-width:0 lets them
   collapse - so weighting them this heavily makes them absorb effectively the
   whole shortfall, and the date button and search field keep their natural size.

   Weight rather than flex:none on the others: they must stay shrinkable, or the
   header overflows once the viewport is narrow enough that collapsing the title
   is not sufficient on its own. */
/* Scoped to the header. css/components.css also defines a page-level .crumbs
   with margin-bottom:14px and flex-wrap:wrap; loading later, it used to win
   here and push this block out of the header. These two selectors keep the
   header copy independent without altering the in-page breadcrumb. */
.page-head-block .crumbs{
  display:flex;align-items:center;gap:6px;
  margin:0;padding-left:0;flex-wrap:nowrap;
  min-width:0;overflow:hidden;line-height:1.3;
}
.page-head-block .crumbs .crumb{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;
}
.crumb{
  background:none;border:0;padding:0;font-size:12px;color:var(--muted);
  cursor:pointer;transition:.13s;font-family:inherit;
}
.crumb:hover{color:var(--green-600);}
.crumb--now{color:var(--ink-2);font-weight:500;cursor:default;}
.crumb-sep{display:grid;place-items:center;color:var(--muted-2);transform:rotate(180deg);flex:none;}
.header__spacer{flex:1;}

/* ==========================================================================
   MOBILE HEADER
   ==========================================================================
   The whole mobile header lives in THIS file, base rules and breakpoint
   override together, and every override is written as a descendant of
   `.header`.

   Both of those are deliberate. The rules used to sit split across two files:
   `.hdr-brand{display:none}` here and `.hdr-brand{display:flex}` inside the
   breakpoint in css/responsive.css. Those two selectors have IDENTICAL
   specificity, so which one won depended purely on css/responsive.css being
   fetched, parsed and applied after this file. That holds on a local server
   and stops holding the moment a deployment caches one stylesheet staler than
   the other, reorders the <link> tags, or bundles them — at which point the
   brand vanishes and the hidden controls come back. Keeping the pair in one
   file makes source order deterministic, and `.header X` (0,0,2,0) outranks a
   bare `.X` (0,0,1,0) so the override wins even if a bundler hoists it.

   On a phone the bar carries exactly five things: sidebar toggle, brand,
   search, notifications, profile. Messages, Language, Settings and the date
   picker are hidden here and reached from the profile menu instead.
   ========================================================================== */

/* Hidden by default; the breakpoint at the end of this block switches them on.
   Desktop never sees any of it. */
.hdr-brand{
  display:none;align-items:center;gap:8px;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
}
.hdr-brand__logo{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;background:var(--green-050);
}
.hdr-brand__logo img{width:22px;height:22px;display:block;}
.hdr-brand__name{
  font-size:12.5px;font-weight:700;line-height:1.15;color:#18251d;text-align:left;
}
.m-search-btn{display:none;}
.s-close{display:none;}

@media(max-width:760px){
  /* ---- the five things that stay ------------------------------------- */
  .header .hdr-brand{display:flex;}
  .header .m-search-btn{display:grid;}

  /* ---- and the four that go ------------------------------------------
     ID selectors so nothing later can accidentally reveal them again. */
  .header #date-wrap{display:none;}      /* date picker: pages carry their own */
  .header #msg-wrap{display:none;}       /* -> profile menu > Messages        */
  .header #lang-btn{display:none;}       /* -> profile menu > Language        */
  .header #settings-btn{display:none;}   /* -> profile menu > Settings        */
  .header .page-head-block{display:none;}/* the brand takes the title's place */

  /* ---- brand: never disappears, never wraps, never overlaps -----------
     The name is the part that has to survive, so it is the one thing given
     room to grow (flex:1) with a floor under it (min-width). It cannot
     collapse to nothing the way `flex:0 1 auto; min-width:0` allowed — that
     was the other half of the "name gone on live" report, because a webfont
     arriving late changes the measured text width and the old rule let the
     shortfall come entirely out of the name.

     Two lines maximum, clipped by height rather than by -webkit-line-clamp:
     the clamp needs display:-webkit-box, which fights the flex layout above
     it and is prefix-dependent, so it was never safe to rely on. */
  .header .hdr-brand{flex:1 1 auto;min-width:0;}
  .header .hdr-brand__name{
    flex:1 1 auto;min-width:56px;
    line-height:1.15;max-height:3.45em;overflow:hidden;
    overflow-wrap:break-word;
  }
  /* Everything else keeps its natural size, so the shortfall never lands on
     a control the user needs to tap. */
  .header > .icon-btn,
  .header .back-btn,
  .header .profile-btn,
  .header .hdr-brand__logo{flex:none;}

  /* ---- tighter metrics, so the name still fits at 320px with Back ----- */
  .header{padding:0 10px;gap:6px;}
  .header .icon-btn{width:34px;height:34px;}
  .header .hdr-brand__logo{width:28px;height:28px;}
  .header .hdr-brand__name{font-size:12px;}
  .header .profile-btn > svg{display:none;}   /* the avatar opens the menu */
  .header .profile-btn .p-meta{display:none;}
  .header .back-btn .b-txt{display:none;}
  .header .back-btn{padding:0 9px;}

  /* ---- search overlay -------------------------------------------------
     The magnifier opens the SAME #global-search input across the bar. */
  .header .search-wrap{display:none;width:auto;}
  .header.is-searching .search-wrap{
    display:flex;align-items:center;gap:6px;
    position:absolute;left:10px;right:10px;top:0;bottom:0;
    background:#fff;z-index:8;
  }
  .header.is-searching .search-wrap input{flex:1;min-width:0;}
  .header.is-searching .s-close{
    display:grid;place-items:center;flex:none;width:34px;height:34px;
    border-radius:9px;background:none;border:0;color:#4b5a51;cursor:pointer;
  }
  .header.is-searching .s-close:hover{background:#f1f4f2;color:var(--green-600);}
  .header.is-searching .s-ico{left:11px;}

  /* On the narrowest phones the name needs three short lines to spell itself
     out in full ("Arif / Natural / Agro Farm"). Three lines at 11px is 38px,
     comfortably inside the 60px header, so the name is complete rather than
     clipped — which is the point: it must never disappear or be cut. */
  @media(max-width:400px){
    .header .hdr-brand__name{font-size:11px;}
  }

  /* ---- no horizontal overflow, at any width --------------------------
     The header is the widest fixed row in the app, so if anything is going to
     push the page sideways it is this. The flex floor above stops it, and
     these two are the belt to that pair of braces. */
  .header{max-width:100%;box-sizing:border-box;}
  html,body{max-width:100%;overflow-x:hidden;}
}
.date-btn{
  display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;border:1px solid var(--border);
  border-radius:10px;background:#fff;font-family:var(--font-en);font-size:14px;font-weight:500;color:#3f4b44;
  transition:.14s;
}
.date-btn:hover{border-color:var(--green-400);color:var(--green-600);}
.search-wrap{position:relative;width:250px;}
.search-wrap input{
  width:100%;height:42px;border:1px solid var(--border);border-radius:10px;background:#fff;
  padding:0 12px 0 38px;font-family:var(--font-en);font-size:14px;transition:.14s;
}
.search-wrap input:focus{outline:none;border-color:var(--green-400);box-shadow:0 0 0 3px rgba(24,144,72,.10);}
.search-wrap .s-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9aa4ad;pointer-events:none;}
.badge-dot{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:20px;
  background:var(--danger);color:#fff;font-family:var(--font-en);font-size:10.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid #fff;
}
.badge-dot.green{background:var(--success);}
.profile-btn{
  display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border-radius:30px;transition:background .14s;
}
.profile-btn:hover{background:#f1f4f2;}
/* Name on the first line, position directly below it — never side by side.
   (responsive.css hides .p-meta entirely on small screens.) */
.profile-btn .p-meta{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.profile-btn .nm{font-family:var(--font-bn);font-size:13.5px;font-weight:600;color:#1f2d25;line-height:1.25;text-align:left;display:block;white-space:nowrap;}
.profile-btn .rl{font-family:var(--font-bn);font-size:11.5px;color:var(--muted);line-height:1.3;text-align:left;display:block;white-space:nowrap;}

/* Dropdown panels */
.pop{
  position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-lg);z-index:70;overflow:hidden;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:.16s;
  transform-origin:top right;
}
.pop.show{opacity:1;transform:none;pointer-events:auto;}
.pop__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:15px;
}
.pop__head .mini{font-size:12.5px;color:var(--green-600);font-weight:600;}
.pop__body{max-height:340px;overflow-y:auto;}
.pop__foot{padding:10px;border-top:1px solid var(--border);background:#fafbfa;}
.pop__foot button{
  width:100%;padding:9px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--green-700);
  background:var(--green-050);transition:.14s;
}
.pop__foot button:hover{background:#dff0e5;}
.pop-row{
  display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid #f1f3f2;text-align:left;width:100%;
  transition:background .12s;align-items:flex-start;
}
.pop-row:hover{background:#f7f9f8;}
.pop-row:last-child{border-bottom:none;}
/* Holds an emoji in the notification list and an SVG in the search list. The
   emoji stack and fixed metrics are stated here rather than inline so both
   the popover and the Notification Centre page draw the icon identically. */
.pop-row .r-ico{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--font-emoji);font-size:16px;line-height:1;font-weight:400;
  font-variant-emoji:emoji;font-style:normal;
}
.pop-row .r-txt{flex:1;min-width:0;}
.pop-row .r-txt b{display:block;font-size:13.5px;font-weight:600;color:#1d2a23;}
.pop-row .r-txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45;}
.pop-row .r-time{font-family:var(--font-en);font-size:11px;color:var(--muted-2);flex:none;}

/* ---- Messages inside the Settings page ----------------------------------
   Reuses .pop-row so the list looks the same as the header popover, with the
   popover's horizontal padding pulled back to the card edge. The unread marker
   is scoped to .set-msgs on purpose: msgRow() is shared with the header, and
   the desktop popover must keep looking exactly as it did. */
.set-msgs{margin:-4px -16px 0;}
.set-msgs .pop-row{align-items:center;}
.set-msgs .pop-row.is-unread{background:var(--green-050);}
.set-msgs .pop-row.is-unread:hover{background:#dff0e5;}
.set-msgs .pop-row.is-unread .r-txt b::after{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green-600);margin-left:7px;vertical-align:middle;
}
.menu-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 16px;font-size:14px;
  color:#2d3a32;text-align:left;transition:background .12s;
}
.menu-item:hover{background:#f4f7f5;}
.menu-item.danger{color:var(--danger);}

/* Messages / Language rows in the profile menu. They exist so a phone can
   reach both once the header drops the mail icon and the EN switcher, and they
   are hidden on desktop where the header already carries them. Declared here
   next to .menu-item, and revealed inside the mobile block above, for the same
   file-order reason the brand rules are grouped. */
.menu-item--mobile{display:none;}
.menu-item__badge{
  margin-left:auto;flex:none;font-family:var(--font-en);font-size:11px;
  font-weight:700;color:var(--green-700);background:var(--green-050);
  padding:2px 7px;border-radius:20px;
}
@media(max-width:760px){
  .menu-item--mobile{display:flex;}
}
.menu-item.danger:hover{background:var(--danger-bg);}
.menu-sep{height:1px;background:var(--border);margin:5px 0;}

/* Calendar */
.cal{padding:14px;width:290px;}
.cal__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cal__nav b{font-family:var(--font-en);font-size:14.5px;}
.cal__nav button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#556;}
.cal__nav button:hover{background:#f1f4f2;}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal__grid span{
  font-family:var(--font-en);font-size:11px;color:var(--muted-2);text-align:center;padding:5px 0;font-weight:600;
}
.cal__grid button{
  height:34px;border-radius:8px;font-family:var(--font-en);font-size:13px;color:#33413a;transition:.12s;
}
.cal__grid button:hover{background:var(--green-050);color:var(--green-700);}
.cal__grid button.sel{background:var(--green-600);color:#fff;font-weight:600;}
.cal__grid button.mute{color:#c4ccc7;}

/* Content */
.content{flex:1;padding:20px;}
.footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 20px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--border);background:#fff;
}
.footer .heart{color:var(--danger);}

/* --- third navigation level (Farm Management > Cow Management > page) -----
   Only Cow Management uses it; every other group renders as before. */
.nav-item--sub{justify-content:space-between;}
.nav-item--sub .caret{margin-left:auto;transition:transform .18s;}
.nav-item--sub.open .caret{transform:rotate(180deg);}
.submenu--deep{
  max-height:0;overflow:hidden;transition:max-height .22s ease;
  margin-left:10px;padding-left:9px;border-left:1px solid rgba(255,255,255,.13);
}
.submenu--deep.open{max-height:640px;}
.submenu--deep .nav-item{padding-left:16px;font-size:12.5px;}
.inp.is-cued{border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-050);}