:root {
  --primary:#1a6b4a; --primary-lt:#e6f4ee; --primary-md:#a8d5bc;
  --accent:#c07a1a; --accent-lt:#fdf3e1; --accent-bd:#f0c97a;
  --danger-lt:#fdf0f0; --danger-bd:#f0aaaa;
  --blue-lt:#eef4fc; --blue-bd:#aac4e8;
  --font:'Nunito',sans-serif; --font-serif:'Playfair Display',serif;
  --shadow:0 2px 12px rgba(0,0,0,.07); --shadow-lg:0 6px 24px rgba(0,0,0,.11);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font);background:#f5f4f0;color:#1a1916;font-size:14px}

/* TOPBAR */
.topbar{background:#fff;border-bottom:1px solid #e8e6df;box-shadow:0 1px 4px rgba(0,0,0,.06);position:sticky;top:0;z-index:1050;height:58px}
.brand-name{font-family:var(--font-serif);font-style:italic;font-size:1.2rem;color:var(--primary)}
.brand-tagline{font-size:.67rem;color:#8a8880;letter-spacing:.3px}
.brand-icon{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* SIDEBAR */
.sidebar{width:224px;min-height:calc(100vh - 58px);background:#fff;border-right:1px solid #e8e6df;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;flex-shrink:0}
.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.nav-sec-label{font-size:.67rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#aaa;padding:.5rem 1rem .2rem}
.sidebar .nav-link{font-size:.83rem;font-weight:500;color:#4a4844;border-radius:8px;margin:1px 8px;padding:8px 10px;display:flex;align-items:center;gap:8px;transition:all .16s;cursor:pointer}
.sidebar .nav-link:hover{background:var(--primary-lt);color:var(--primary)}
.sidebar .nav-link.active{background:var(--primary-lt);color:var(--primary);font-weight:600}
.sidebar .nav-link .bi{font-size:.95rem;width:18px;text-align:center}
.sidebar-badge{font-size:.62rem;font-weight:700;background:var(--danger-lt);color:#a02020;border:1px solid var(--danger-bd);border-radius:20px;padding:1px 6px;margin-left:auto}

/* LAYOUT */
.layout-wrap{display:flex;min-height:calc(100vh - 58px)}
.main-content{flex:1;min-width:0;padding:1.4rem}

/* PAGES */
.page{display:none}.page.active{display:block;animation:fadeUp .2s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* PAGE HEADER */
.page-title{font-family:var(--font-serif);font-style:italic;font-size:1.55rem;color:#1a1916}
.page-subtitle{font-size:.8rem;color:#8a8880;margin-top:2px}

/* STAT CARDS */
.stat-card{background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:1.1rem 1.3rem;box-shadow:var(--shadow);transition:box-shadow .18s}
.stat-card:hover{box-shadow:var(--shadow-lg)}
.stat-label{font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8a8880;margin-bottom:.35rem}
.stat-value{font-size:1.7rem;font-weight:700;color:#1a1916;line-height:1}
.stat-meta{font-size:.73rem;color:#8a8880;margin-top:.3rem}
.stat-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}

/* CONTENT CARD */
.content-card{background:#fff;border:1px solid #e8e6df;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.2rem}
.card-header-custom{background:#fff;border-bottom:1px solid #e8e6df;padding:.85rem 1.2rem}
.card-body-custom{padding:1.2rem}
.card-footer-custom{background:#f9f8f5;border-top:1px solid #e8e6df;padding:.8rem 1.2rem}

/* FORM */
.form-label-custom{font-size:.77rem;font-weight:600;color:#4a4844;margin-bottom:.28rem;display:block}
.req{color:#a02020;margin-left:2px}
.form-control,.form-select{font-family:var(--font);font-size:.83rem;color:#1a1916;border:1px solid #d8d6cf;border-radius:8px;padding:.48rem .72rem;transition:border-color .18s,box-shadow .18s}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,107,74,.1);outline:none}
.form-control[readonly]{background:#f9f8f5;color:#8a8880}
.form-hint{font-size:.7rem;color:#8a8880;margin-top:2px}
.sec-divider{font-size:.67rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#aaa;display:flex;align-items:center;gap:.7rem;margin:.4rem 0}
.sec-divider::after{content:'';flex:1;height:1px;background:#e8e6df}

/* BUTTONS */
.btn-main{background:var(--primary);color:#fff;border:none;border-radius:8px;font-family:var(--font);font-weight:600;font-size:.82rem;padding:.48rem 1.1rem;transition:all .18s;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.btn-main:hover{background:#155a3d;color:#fff}
.btn-out{background:#fff;color:#4a4844;border:1px solid #d8d6cf;border-radius:8px;font-family:var(--font);font-weight:500;font-size:.82rem;padding:.48rem 1.1rem;transition:all .18s;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.btn-out:hover{background:#f5f4f0;border-color:#b8b6b0;color:#1a1916}
.btn-icon{border:1px solid #e8e6df;background:#fff;border-radius:6px;padding:3px 8px;color:#8a8880;cursor:pointer;transition:all .16s;font-size:.8rem;line-height:1.4}
.btn-icon:hover{background:#f5f4f0;color:#4a4844}

/* BADGES */
.bg-green{background:var(--primary-lt);color:var(--primary);border:1px solid var(--primary-md);font-size:.69rem;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block}
.bg-amber{background:var(--accent-lt);color:var(--accent);border:1px solid var(--accent-bd);font-size:.69rem;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block}
.bg-red{background:var(--danger-lt);color:#a02020;border:1px solid var(--danger-bd);font-size:.69rem;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block}
.bg-blue{background:var(--blue-lt);color:#1a4f8a;border:1px solid var(--blue-bd);font-size:.69rem;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block}
.bg-gray{background:#f2f1ee;color:#6a6862;border:1px solid #d8d6cf;font-size:.69rem;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block}

/* TABLE */
.tbl thead th{font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8a8880;background:#f9f8f5;border-bottom:1px solid #e8e6df;padding:.62rem 1rem;white-space:nowrap}
.tbl tbody td{font-size:.82rem;padding:.72rem 1rem;border-bottom:1px solid #f0efe9;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:#fafaf7}
.td-mono{font-size:.73rem;color:#6a6862}

/* SUB TABS */
.sub-nav{border-bottom:1px solid #e8e6df;margin-bottom:1.2rem;display:flex;gap:0;overflow-x:auto}
.sub-nav::-webkit-scrollbar{display:none}
.sub-tab{background:none;border:none;border-bottom:2px solid transparent;font-family:var(--font);font-size:.82rem;font-weight:500;color:#8a8880;padding:.52rem .9rem;margin-bottom:-1px;cursor:pointer;transition:all .16s;white-space:nowrap}
.sub-tab:hover{color:#4a4844}.sub-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* NOTICE */
.notice{border-radius:8px;padding:.65rem .9rem;font-size:.8rem;margin-bottom:.9rem;display:flex;align-items:flex-start;gap:.55rem}
.n-info{background:var(--blue-lt);color:#1a4f8a;border:1px solid var(--blue-bd)}
.n-warn{background:var(--accent-lt);color:var(--accent);border:1px solid var(--accent-bd)}
.n-ok{background:var(--primary-lt);color:var(--primary);border:1px solid var(--primary-md)}

/* QUICK TILES */
.quick-tile{background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:1.25rem .9rem;cursor:pointer;transition:all .2s;text-align:center;box-shadow:var(--shadow)}
.quick-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--primary-md)}
.quick-tile .tile-icon{font-size:1.8rem;margin-bottom:.5rem}
.quick-tile .tile-label{font-size:.8rem;font-weight:600;color:#1a1916}
.quick-tile .tile-sub{font-size:.7rem;color:#8a8880;margin-top:1px}

/* HERO */
.hero-strip{background:linear-gradient(135deg,#1a6b4a 0%,#0f5038 100%);border-radius:16px;color:#fff;padding:1.5rem 1.8rem;margin-bottom:1.4rem;position:relative;overflow:hidden}
.hero-strip::before{content:'🥛';position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);font-size:4.5rem;opacity:.12}
.hero-strip h2{font-family:var(--font-serif);font-style:italic;font-size:1.4rem;margin-bottom:.25rem}
.hero-strip p{font-size:.8rem;opacity:.8;margin:0}

/* TOAST */
.toast-wrap{position:fixed;bottom:1.3rem;right:1.3rem;z-index:9999}
.toast-msg{background:#1a1916;color:#fff;border-radius:10px;padding:.7rem 1rem;font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:.55rem;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:250px;transform:translateY(18px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.toast-msg.show{transform:translateY(0);opacity:1}

/* SEARCH */
.search-box{font-family:var(--font);font-size:.8rem;border:1px solid #d8d6cf;border-radius:8px;padding:.4rem .75rem;width:190px;outline:none;transition:border-color .18s}
.search-box:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,107,74,.08)}

/* ═══════════════════════════════════════
   MOBILE SIDEBAR — complete offcanvas fix
═══════════════════════════════════════ */

/* Offcanvas panel itself */
.offcanvas-sidebar {
  width: 272px !important;
  background: #fff !important;
  border-right: 1px solid #e8e6df !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.12) !important;
}

/* Offcanvas header strip */
.offcanvas-sidebar .offcanvas-header {
  background: #fff;
  border-bottom: 1px solid #e8e6df;
  padding: 14px 16px;
  min-height: 58px;
}

/* Offcanvas body scroll area */
.offcanvas-sidebar .offcanvas-body {
  padding: 8px 0 24px !important;
  overflow-y: auto;
  background: #fff;
}
.offcanvas-sidebar .offcanvas-body::-webkit-scrollbar { width: 3px; }
.offcanvas-sidebar .offcanvas-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* Nav section labels inside offcanvas */
.offcanvas-sidebar .nav-sec-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #bbb;
  padding: 12px 16px 4px;
  display: block;
}

/* Nav links inside offcanvas */
.offcanvas-sidebar .nav-link {
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 500;
  color: #4a4844;
  border-radius: 10px;
  margin: 1px 8px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: all .16s;
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - 16px);
  text-align: left;
  text-decoration: none;
}
.offcanvas-sidebar .nav-link:hover { background: var(--primary-lt); color: var(--primary); }
.offcanvas-sidebar .nav-link.active { background: var(--primary-lt); color: var(--primary); font-weight: 600; }
.offcanvas-sidebar .nav-link .bi { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.offcanvas-sidebar .sidebar-badge {
  font-size: .65rem; font-weight: 700;
  background: var(--danger-lt); color: #a02020;
  border: 1px solid var(--danger-bd);
  border-radius: 20px; padding: 2px 7px;
  margin-left: auto; flex-shrink: 0;
}

/* Hamburger button */
.mob-menu-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid #e8e6df !important;
  background: #fff !important;
  color: #4a4844;
  transition: all .16s;
  flex-shrink: 0;
}
.mob-menu-btn:hover { background: #f5f4f0 !important; border-color: #d8d6cf !important; }
.mob-menu-btn .bi { font-size: 1.1rem; }

/* Bottom user strip inside offcanvas */
.mob-user-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 8px 8px 0;
  background: #f9f8f5; border-radius: 10px;
  border: 1px solid #e8e6df;
}
.mob-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-lt); color: var(--primary);
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mob-user-name { font-size: .82rem; font-weight: 600; color: #1a1916; }
.mob-user-role { font-size: .7rem; color: #8a8880; }

@media (max-width: 767px) {
  .sidebar-desktop { display: none !important; }
  .main-content { padding: .9rem; }
  .stat-value { font-size: 1.4rem; }
  .page-title { font-size: 1.3rem; }
  .hero-strip { padding: 1.1rem 1.2rem; }
  .hero-strip::before { font-size: 3rem; }
  table { min-width: 520px; }
}
@media (min-width: 768px) {
  .mob-menu-btn { display: none !important; }
}

/* ── MILK TYPE TOGGLE BUTTONS ── */
.milk-toggle-bar {
  display: flex; gap: 8px; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.milk-toggle {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid #e2e0d9;
  border-radius: 12px; padding: 10px 18px; cursor: pointer;
  transition: all .2s; font-family: var(--font); text-align: left;
  min-width: 170px; flex: 1;
}
.milk-toggle:hover { border-color: var(--primary-md); background: var(--primary-lt); }
.milk-toggle.active.cow  { border-color: #1a6b4a; background: #e6f4ee; }
.milk-toggle.active.buffalo { border-color: #1a4f8a; background: #eef4fc; }
.milk-toggle .tog-emoji { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.milk-toggle .tog-info { min-width: 0; }
.milk-toggle .tog-name { font-size: .85rem; font-weight: 700; color: #1a1916; line-height: 1.2; }
.milk-toggle .tog-desc { font-size: .7rem; color: #8a8880; margin-top: 2px; }
.milk-toggle.active.cow  .tog-name { color: var(--primary); }
.milk-toggle.active.buffalo .tog-name { color: #1a4f8a; }
.milk-toggle .tog-check {
  margin-left: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #d8d6cf; display: flex; align-items: center; justify-content: center;
  font-size: .65rem; flex-shrink: 0; transition: all .2s;
}
.milk-toggle.active.cow  .tog-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.milk-toggle.active.buffalo .tog-check { background: #1a4f8a; border-color: #1a4f8a; color: #fff; }

/* ── RATE CARDS ── */
.rc-card {
  border-radius: 12px; border: 1.5px solid #e2e0d9; background: #fff;
  padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .18s, border-color .18s; margin-bottom: 0; height: 100%;
}
.rc-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.rc-card.cow   { border-top: 3px solid var(--primary); }
.rc-card.buffalo { border-top: 3px solid #1a4f8a; }
.rc-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rc-animal-tag {
  font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.rc-animal-tag.cow    { background: var(--primary-lt); color: var(--primary); border: 1px solid var(--primary-md); }
.rc-animal-tag.buffalo{ background: #eef4fc; color: #1a4f8a; border: 1px solid #aac4e8; }
.rc-grade { font-size: 1rem; font-weight: 700; color: #1a1916; margin-bottom: 2px; }
.rc-fat-snf { font-size: .72rem; color: #8a8880; margin-bottom: 12px; }
.rc-rate-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rc-rate-box { flex: 1; background: #f9f8f5; border-radius: 8px; padding: 8px 10px; text-align: center; }
.rc-rate-box.sell { background: var(--primary-lt); }
.rc-rate-box.sell-buf { background: #eef4fc; }
.rc-rate-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #8a8880; }
.rc-rate-val { font-size: 1.15rem; font-weight: 700; color: #1a1916; }
.rc-rate-val.sell { color: var(--primary); }
.rc-rate-val.sell-buf { color: #1a4f8a; }
.rc-arrow { color: #b8b6b0; font-size: .9rem; flex-shrink: 0; }
.rc-margin-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #f5f4f0; border-radius: 6px; padding: 5px 10px; margin-bottom: 10px;
  font-size: .75rem;
}
.rc-margin-amt { font-weight: 700; color: var(--accent); }
.rc-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid #f0efe9; }
.rc-eff-date { font-size: .7rem; color: #8a8880; }