@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Leaflet map overrides */

.ranch-map-popup .leaflet-popup-content-wrapper{border-radius:10px;padding:0;box-shadow:0 4px 20px rgba(0,0,0,.18);}

.ranch-map-popup .leaflet-popup-content{margin:10px 12px;}

.ranch-map-popup .leaflet-popup-tip{background:#fff;}

.leaflet-container{font-family:system-ui,sans-serif;}

.pen-name-tip{background:rgba(0,0,0,.72)!important;color:#fff!important;font-size:10px!important;font-weight:700!important;border:none!important;border-radius:3px!important;padding:2px 6px!important;white-space:nowrap!important;box-shadow:none!important;}

.pen-name-tip::before{display:none!important;}

.leaflet-draw-toolbar a{background-color:#f0fdf4!important;border-bottom:1px solid #d1e8d4!important;}

.leaflet-draw-toolbar a:hover{background-color:#dcfce7!important;}

.leaflet-draw-toolbar{border:2px solid #15803d!important;border-radius:5px!important;box-shadow:0 2px 10px rgba(0,0,0,.3)!important;}

.leaflet-draw-actions a{background-color:#15803d!important;color:white!important;}

.leaflet-draw-actions a:hover{background-color:#16a34a!important;}

/* ── Design Tokens ──────────────────────────────────────────────────── */

:root{
  /* Slate — structure & navigation */
  --slate-950:#020617;--slate-900:#0f172a;--slate-800:#1e293b;--slate-700:#334155;
  --slate-600:#475569;--slate-500:#64748b;--slate-400:#94a3b8;--slate-300:#cbd5e1;
  --slate-200:#e2e8f0;--slate-100:#f1f5f9;--slate-50:#f8fafc;

  /* Green — primary action & accent */
  --green-900:#14532d;--green-800:#166534;--green-700:#15803d;--green-600:#16a34a;
  --green-500:#22c55e;--green-400:#4ade80;--green-200:#bbf7d0;--green-100:#dcfce7;--green-50:#f0fdf4;

  /* Amber — alerts & warnings */
  --amber-700:#b45309;--amber-600:#d97706;--amber-500:#f59e0b;--amber-400:#fbbf24;
  --amber-100:#fef3c7;--amber-50:#fffbeb;

  /* Status */
  --red-700:#b91c1c;--red-600:#dc2626;--red-100:#fee2e2;--red-50:#fef2f2;
  --blue-700:#1d4ed8;--blue-600:#2563eb;--blue-100:#dbeafe;--blue-50:#eff6ff;
  --sky-700:#0369a1;--sky-100:#e0f2fe;

  /* ── Component aliases ─────────────────────────────────────────────── */
  /* p = primary (green for actions, slate for chrome) */
  --p950:#020617;--p900:#0f172a;--p800:#1e293b;--p700:#15803d;--p600:#16a34a;
  --p500:#22c55e;--p400:#4ade80;--p200:#bbf7d0;--p100:#dcfce7;--p50:#f0fdf4;

  /* n = neutral (clean slate grays) */
  --n900:#0f172a;--n800:#1e293b;--n700:#334155;--n600:#475569;--n500:#64748b;
  --n400:#94a3b8;--n300:#cbd5e1;--n200:#e2e8f0;--n100:#f1f5f9;--n50:#f8fafc;

  /* Legacy color aliases — keep for component compatibility */
  --a600:#d97706;--a500:#f59e0b;--a400:#fbbf24;--a100:#fef3c7;--a50:#fffbeb;
  --r100:#fee2e2;--r600:#dc2626;--r700:#b91c1c;--r50:#fef2f2;
  --b100:#dbeafe;--b600:#2563eb;--b700:#1d4ed8;--b50:#eff6ff;

  --ease:cubic-bezier(.4,0,.2,1);

  /* Shadow system */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.1),0 2px 4px rgba(15,23,42,.06);
  --shadow-lg:0 10px 28px rgba(15,23,42,.12),0 4px 8px rgba(15,23,42,.06);
  --shadow-xl:0 24px 48px rgba(15,23,42,.16),0 8px 16px rgba(15,23,42,.08);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#e9eff7;min-height:100vh;color:#0f172a;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ── Splash ────────────────────────────────────────────────────── */

.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--green-600);font-size:1rem;font-weight:600;}

@keyframes cowGallop{0%,100%{transform:translateY(0) rotate(0deg);}40%{transform:translateY(-8px) rotate(-1.5deg);}80%{transform:translateY(-2px) rotate(1deg);}}

@keyframes cmPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.75;transform:scale(.92);}}

/* ── Auth ──────────────────────────────────────────────────────── */

.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:linear-gradient(150deg,var(--slate-950) 0%,var(--slate-800) 60%,#1e3a2e 100%);}

.auth-card{background:white;border-radius:16px;box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.04);width:100%;max-width:400px;overflow:hidden;}

.auth-logo{text-align:center;padding:2.5rem 2rem 1.5rem;background:linear-gradient(160deg,var(--slate-900) 0%,var(--slate-800) 100%);color:white;position:relative;}

.auth-logo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(22,163,74,.5),transparent);}

.auth-logo h1{font-size:1.7rem;font-weight:800;margin:.5rem 0 .25rem;letter-spacing:-.04em;}

.auth-logo p{opacity:.55;font-size:.83rem;font-weight:400;}

.auth-tabs{display:flex;padding:0 1.25rem;border-bottom:1px solid #f1f5f9;}

.auth-tab{flex:1;padding:.85rem .5rem;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.875rem;font-weight:600;color:var(--n400);cursor:pointer;transition:all .15s var(--ease);font-family:inherit;}

.auth-tab:hover{color:var(--green-600);}

.auth-tab.active{color:var(--green-700);border-bottom-color:var(--green-600);}

.auth-msg{margin:.75rem 1.25rem 0;padding:.7rem 1rem;border-radius:8px;background:var(--r50);color:var(--r700);font-size:.85rem;border:1px solid #fecaca;}

.auth-msg.ok{background:var(--green-50);color:var(--green-800);border-color:var(--green-200);}

.auth-form{padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;}

/* ── App Shell ─────────────────────────────────────────────────── */

.app{width:100%;min-height:100vh;background:#f8fafc;}

/* ── Header ────────────────────────────────────────────────────── */

.header{
  background:linear-gradient(180deg,#243447 0%,#1a2535 100%);
  position:sticky;top:0;z-index:200;
  box-shadow:0 1px 0 rgba(255,255,255,.05),0 4px 24px rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.04);}

.header-content{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.75rem;}

.header-content h1{
  font-size:1.05rem;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.9);
  text-transform:uppercase;display:flex;align-items:center;gap:.55rem;}

.header-content h1::before{display:none;}

/* ── Account / Avatar ──────────────────────────────────────────── */

.avatar-btn{
  width:2.1rem;height:2.1rem;border-radius:8px;
  background:linear-gradient(135deg,#16a34a,#15803d);
  border:none;color:white;font-weight:700;font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s var(--ease);font-family:inherit;line-height:1;
  box-shadow:0 2px 8px rgba(22,163,74,.35);}

.avatar-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,163,74,.45);}

/* ── Dropdown Menus — platinum quality ─────────────────────────── */

.account-menu{
  position:absolute;right:0;top:calc(100% + .6rem);
  background:white;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(15,23,42,.18),0 4px 16px rgba(15,23,42,.1),0 0 0 1px rgba(15,23,42,.06);
  min-width:220px;overflow:hidden;z-index:300;}

.account-menu-email{
  padding:.75rem 1rem .6rem;font-size:.72rem;color:var(--n500);
  border-bottom:1px solid #f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(to bottom,#f8fafc,white);font-weight:500;}

.account-menu-item{
  display:block;width:100%;text-align:left;padding:.65rem 1rem;
  background:none;border:none;cursor:pointer;font-size:.84rem;color:#334155;
  font-family:inherit;transition:background .1s,color .1s;font-weight:500;
  display:flex;align-items:center;gap:.55rem;}

.account-menu-item:hover{background:#f8fafc;color:#16a34a;}

.account-menu-signout{color:#dc2626;border-top:1px solid #f1f5f9;}

.account-menu-signout:hover{background:#fef2f2;color:#b91c1c;}

/* ── Tab Navigation ────────────────────────────────────────────── */

.tabs{
  display:flex;background:#111827;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.45rem .75rem;gap:.25rem;}

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

.tab{
  flex:1 1 0;min-width:56px;padding:.38rem .5rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.71rem;font-weight:600;color:rgba(255,255,255,.55);
  transition:all .15s var(--ease);white-space:nowrap;text-transform:uppercase;
  letter-spacing:.06em;font-family:inherit;position:relative;text-decoration:none;}

.tab:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2);}

.tab.active{color:#fff;background:#16a34a;border-color:#16a34a;font-weight:700;}

/* ── Main ──────────────────────────────────────────────────────── */

.main{padding:1.5rem 1.75rem;min-height:500px;}

.tab-content{animation:fadeIn .18s var(--ease);}

@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── Section Headers ───────────────────────────────────────────── */

.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem;}

.header-row h2{
  font-size:.92rem;font-weight:700;color:#0f172a;letter-spacing:-.01em;
  text-transform:uppercase;border-left:3px solid #16a34a;padding-left:.65rem;
  line-height:1.3;}

.header-row h3{font-size:1rem;font-weight:700;color:#1e293b;letter-spacing:-.02em;}

/* ── Buttons ───────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.48rem 1.15rem;border:none;border-radius:7px;font-size:.78rem;font-weight:600;
  cursor:pointer;transition:all .14s var(--ease);line-height:1;font-family:inherit;
  white-space:nowrap;letter-spacing:.03em;text-transform:uppercase;}

.btn-primary{
  background:linear-gradient(135deg,#16a34a,#15803d);color:white;
  box-shadow:0 1px 3px rgba(21,128,61,.25),0 0 0 1px rgba(21,128,61,.15);}

.btn-primary:hover:not(:disabled){
  background:linear-gradient(135deg,#15803d,#166534);
  box-shadow:0 4px 14px rgba(21,128,61,.35);transform:translateY(-1px);}

.btn-primary:active:not(:disabled){transform:translateY(0);}

.btn-primary:disabled{opacity:.4;cursor:not-allowed;}

.btn-secondary{
  background:white;color:#334155;
  border:1.5px solid #e2e8f0;
  box-shadow:var(--shadow-xs);}

.btn-secondary:hover{background:#f8fafc;border-color:#cbd5e1;color:#16a34a;}

.btn-sm{padding:.28rem .65rem;font-size:.71rem;}

.btn-full{width:100%;border-radius:7px;}

.btn-icon{
  background:none;border:none;padding:.32rem .38rem;cursor:pointer;
  color:#64748b;border-radius:6px;font-size:.9rem;
  transition:all .13s;font-family:inherit;}

.btn-icon:hover{background:#f1f5f9;color:#0f172a;}

/* ── Forms ─────────────────────────────────────────────────────── */

.form{padding:1.5rem;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

.form-group{margin-bottom:.9rem;}

.form-group label{
  display:block;margin-bottom:.3rem;font-weight:600;color:#475569;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;}

.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.58rem .82rem;
  border:1.5px solid #e2e8f0;border-radius:8px;
  font-size:.875rem;font-family:inherit;
  transition:all .15s var(--ease);
  background:white;color:#0f172a;
  box-shadow:var(--shadow-xs);}

.form-group select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;
  padding-right:2.25rem;}

.form-group input::placeholder{color:#94a3b8;}

.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:#cbd5e1;}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.15),var(--shadow-xs);}

.form-group small{display:block;margin-top:.28rem;color:#64748b;font-size:.74rem;}

.form-actions{
  display:flex;gap:.6rem;justify-content:flex-end;
  margin-top:1rem;padding-top:1rem;border-top:1px solid #f1f5f9;}

.inventory-info{
  display:block;margin-top:.28rem;padding:.35rem .65rem;
  background:var(--green-50);border:1px solid var(--green-200);
  border-radius:6px;color:var(--green-800);font-size:.76rem;font-weight:600;}

/* ── Modal ─────────────────────────────────────────────────────── */

.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:1.5rem;animation:fadeIn .15s ease;}

.modal{
  background:white;border-radius:16px;width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(15,23,42,.04);
  animation:slideUp .2s var(--ease);}

.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.4rem;border-bottom:1px solid #f1f5f9;
  position:sticky;top:0;background:white;z-index:1;
  border-radius:16px 16px 0 0;}

.modal-header h3{font-size:.95rem;font-weight:700;color:#0f172a;letter-spacing:-.02em;}

/* ── Tables ─────────────────────────────────────────────────────── */

.table-container{
  background:white;border-radius:12px;overflow-x:auto;overflow-y:visible;
  box-shadow:var(--shadow-sm);border:1px solid #e2e8f0;
  -webkit-overflow-scrolling:touch;}

.table-container table{border-radius:0;}

.table-container thead tr:first-child th:first-child{border-radius:11px 0 0 0;}

.table-container thead tr:first-child th:last-child{border-radius:0 11px 0 0;}

table{width:100%;border-collapse:collapse;}

thead{background:linear-gradient(to bottom,#f8fafc,#f1f5f9);}

th{
  text-align:left;padding:.68rem 1rem;font-weight:700;color:#475569;
  border-bottom:1px solid #e2e8f0;white-space:nowrap;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;}

td{padding:.78rem 1rem;border-bottom:1px solid #f1f5f9;font-size:.845rem;color:#334155;}

tbody tr{transition:background .1s;}

tbody tr:hover{background:#f8fafc;}

tbody tr:last-child td{border-bottom:none;}

/* ── Empty ──────────────────────────────────────────────────────── */

.empty-state{text-align:center;padding:4rem 2rem;color:#94a3b8;}

.empty-state p{font-size:.9rem;font-weight:500;}

/* ── Cards ─────────────────────────────────────────────────────── */

.pen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;}

.pen-card{
  background:white;border-radius:12px;padding:1.4rem;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.pen-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:#cbd5e1;}

.pen-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:.9rem;}

.pen-card-header h3{color:#0f172a;font-size:1rem;font-weight:700;letter-spacing:-.025em;}

.pen-card-body{display:flex;flex-direction:column;gap:.3rem;}

.stat{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid #f1f5f9;}

.stat:last-child{border-bottom:none;}

.stat-label{color:#64748b;font-size:.79rem;}

.stat-value{font-weight:600;color:#1e293b;font-size:.79rem;}

.pen-notes{
  margin-top:.5rem;padding:.45rem .65rem;background:#f8fafc;
  border-radius:7px;font-size:.8rem;color:#475569;border-left:3px solid #e2e8f0;}

/* ── Banners ────────────────────────────────────────────────────── */

.calving-alerts{
  background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;
  border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.25rem;}

.calving-alerts-title{font-weight:700;color:#b45309;margin-bottom:.4rem;font-size:.82rem;}

.calving-alert-item{font-size:.82rem;padding:.22rem 0;color:#374151;}

.calving-alert-item.overdue{color:#dc2626;font-weight:700;}

.calving-alert-item.urgent{color:#d97706;font-weight:600;}

.calving-alert-item.soon{color:#15803d;}

.vax-reminder-banner{
  background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid #2563eb;
  border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.85rem;}

.vax-reminder-title{font-weight:700;color:#1d4ed8;margin-bottom:.35rem;font-size:.82rem;}

.vax-reminder-item{font-size:.81rem;padding:.22rem 0;color:#1d4ed8;}

.vax-reminder-item.overdue{color:#dc2626;font-weight:700;}

.vax-reminder-item.today{color:#d97706;font-weight:700;}

.obs-treatment-banner{
  background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #dc2626;
  border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.85rem;}

.obs-banner-title{font-weight:700;color:#b91c1c;font-size:.82rem;margin-bottom:.3rem;}

.obs-banner-item{font-size:.81rem;padding:.22rem 0;color:#374151;}

.obs-banner-item.sev-critical{color:#dc2626;font-weight:700;}

.obs-banner-item.sev-high{color:#c2410c;font-weight:600;}

/* ── Feeding Cards ──────────────────────────────────────────────── */

.pen-feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem;}

.pen-feed-card{
  background:white;border-radius:12px;padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;gap:.65rem;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.pen-feed-card:hover{box-shadow:var(--shadow-md);border-color:#cbd5e1;}

.pen-feed-header{display:flex;justify-content:space-between;align-items:start;}

.pen-feed-header h3{color:#0f172a;font-size:1rem;font-weight:700;margin-bottom:.12rem;letter-spacing:-.025em;}

.head-count{font-size:.73rem;color:#94a3b8;font-weight:500;}

.feed-status{padding:.2rem .62rem;border-radius:9999px;font-size:.67rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}

.status-today{background:#dcfce7;color:#15803d;}

.status-yesterday{background:#fef3c7;color:#92400e;}

.status-overdue{background:#fee2e2;color:#991b1b;}

.status-never{background:#f1f5f9;color:#64748b;}

.last-fed{
  font-size:.75rem;color:#475569;background:#f8fafc;
  padding:.35rem .6rem;border-radius:7px;border:1px solid #e2e8f0;font-weight:500;}

.pen-default-info{
  font-size:.75rem;color:#15803d;background:var(--green-50);
  padding:.32rem .6rem;border-radius:7px;border:1px solid var(--green-100);font-weight:500;}

.pen-feed-actions{display:flex;gap:.35rem;flex-wrap:wrap;}

/* ── Segmented Control ──────────────────────────────────────────── */

.amount-mode-toggle{display:flex;background:#f1f5f9;border-radius:9px;padding:3px;gap:2px;margin-bottom:1rem;}

.mode-btn{
  flex:1;padding:.45rem .5rem;background:none;border:none;border-radius:7px;
  font-weight:600;color:#64748b;cursor:pointer;font-size:.79rem;
  transition:all .15s var(--ease);font-family:inherit;}

.mode-btn:hover{color:#334155;}

.mode-btn.active{
  background:white;color:#0f172a;
  box-shadow:0 1px 3px rgba(15,23,42,.1),0 1px 2px rgba(15,23,42,.05);}

.feed-calc{
  padding:.48rem .7rem;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:8px;font-size:.79rem;color:#1d4ed8;margin-bottom:.5rem;font-weight:500;}

/* ── Badges ─────────────────────────────────────────────────────── */

.type-badge{
  padding:.18rem .58rem;border-radius:9999px;font-size:.67rem;font-weight:700;
  display:inline-block;letter-spacing:.05em;text-transform:uppercase;}

.type-cow{background:#dcfce7;color:#15803d;}

.type-bull{background:#dbeafe;color:#1d4ed8;}

.type-steer{background:#f1f5f9;color:#475569;}

.type-heifer{background:#fef3c7;color:#92400e;}

.result-badge{
  padding:.18rem .58rem;border-radius:9999px;font-size:.67rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;}

.result-pregnant{background:#dcfce7;color:#15803d;}

.result-open{background:#fee2e2;color:#b91c1c;}

.result-unknown{background:#f1f5f9;color:#64748b;}

.promo-notice{
  background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:8px;padding:.6rem .8rem;font-size:.81rem;color:#1d4ed8;margin-bottom:.5rem;}

/* ── KPI / Stat Cards ───────────────────────────────────────────── */

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1rem;margin-bottom:1.75rem;}

.stat-card{
  background:white;border-radius:12px;padding:1.2rem 1.3rem;
  display:flex;align-items:flex-start;gap:.9rem;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;
  position:relative;overflow:hidden;cursor:default;}

.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}

.stat-icon{font-size:1.8rem;line-height:1;}

.stat-info{flex:1;min-width:0;}

.stat-card .stat-value{
  font-size:1.9rem;font-weight:900;color:#0f172a;line-height:1;
  margin-bottom:.2rem;letter-spacing:-.05em;}

.stat-card .stat-label{
  color:#94a3b8;font-size:.67rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;}

/* ── Reports ─────────────────────────────────────────────────────── */

.report-section{
  background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.25rem;
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.report-section h3{color:#1e293b;margin-bottom:1rem;font-size:.95rem;font-weight:700;letter-spacing:-.025em;}

.report-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.75rem;}

.report-btn{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:1.1rem .75rem;background:#f8fafc;border:1.5px solid #e2e8f0;
  border-radius:10px;cursor:pointer;font-weight:600;color:#334155;
  transition:all .18s var(--ease);font-size:.82rem;font-family:inherit;}

.report-btn:hover:not(:disabled){
  background:#16a34a;color:white;border-color:#16a34a;
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,163,74,.28);}

.report-btn:disabled{opacity:.35;cursor:not-allowed;}

.report-btn small{font-weight:400;font-size:.7rem;opacity:.75;}

.breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}

.breakdown-card{background:#f8fafc;border-radius:10px;padding:1.1rem;border:1px solid #e2e8f0;}

.breakdown-card h4{color:#334155;margin-bottom:.7rem;font-size:.85rem;font-weight:700;}

.breakdown-item{display:flex;justify-content:space-between;padding:.42rem 0;border-bottom:1px solid #f1f5f9;font-size:.83rem;}

.breakdown-item:last-child{border-bottom:none;}

.breakdown-item strong{color:#16a34a;font-weight:700;}

/* ── Sub-navigation Tabs ─────────────────────────────────────────── */

.inventory-tabs{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.5rem;
  border-bottom:none;padding-bottom:.25rem;}

.inventory-tab{
  padding:.42rem .9rem;background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:9999px;font-size:.82rem;font-weight:600;
  color:#64748b;cursor:pointer;white-space:nowrap;
  transition:all .15s;font-family:inherit;}

.inventory-tab:hover{background:#e2e8f0;color:#334155;border-color:#cbd5e1;}

.inventory-tab.active{background:#1d4228;color:#fff;border-color:#1d4228;}

/* ── Inventory Cards ────────────────────────────────────────────── */

.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1rem;}

.inventory-card{
  background:white;border-radius:12px;padding:1.2rem;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.inventory-card:hover{box-shadow:var(--shadow-md);border-color:#cbd5e1;}

.inventory-card-header{
  display:flex;justify-content:space-between;align-items:start;
  margin-bottom:.65rem;padding-bottom:.65rem;border-bottom:1px solid #f1f5f9;}

.inventory-card-header h4{color:#0f172a;font-size:.88rem;font-weight:700;letter-spacing:-.02em;}

.inventory-card-body{display:flex;flex-direction:column;gap:.45rem;}

.inventory-amount{display:flex;align-items:baseline;gap:.3rem;}

.amount-value{font-size:2rem;font-weight:900;color:#1e293b;line-height:1;letter-spacing:-.05em;}

.amount-unit{font-size:.83rem;color:#94a3b8;font-weight:500;}

.inventory-detail{display:flex;gap:.5rem;font-size:.78rem;}

.detail-label{color:#94a3b8;font-weight:500;}

.low-stock-warning{
  padding:.32rem .6rem;background:#fffbeb;border:1px solid #fde68a;
  border-radius:6px;color:#92400e;font-size:.72rem;font-weight:700;text-align:center;}

.expiring-warning{
  padding:.32rem .6rem;background:#fff7ed;border:1px solid #fed7aa;
  border-radius:6px;color:#c2410c;font-size:.72rem;font-weight:700;text-align:center;}

.expired-warning{
  padding:.32rem .6rem;background:#fef2f2;border:1px solid #fecaca;
  border-radius:6px;color:#b91c1c;font-size:.72rem;font-weight:700;text-align:center;}

/* ── Container Cards ────────────────────────────────────────────── */

.container-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:1.25rem;}

.container-card{
  background:white;border-radius:12px;padding:1.3rem;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.container-card:hover{box-shadow:var(--shadow-md);}

.container-card.container-low{box-shadow:0 0 0 2px #f59e0b,var(--shadow-sm);}

.container-card.container-empty{box-shadow:0 0 0 2px #dc2626,var(--shadow-sm);}

.container-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:.8rem;}

.container-card-header h4{color:#0f172a;font-size:.92rem;font-weight:700;margin-bottom:.18rem;letter-spacing:-.02em;}

.container-type-badge{
  background:#f1f5f9;color:#475569;padding:.13rem .5rem;
  border-radius:9999px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-right:.35rem;
  white-space:nowrap;display:inline-block;}

.container-location{font-size:.71rem;color:#94a3b8;font-weight:500;}

.container-feed-type{font-size:.79rem;color:#475569;margin-bottom:.5rem;font-weight:500;}

.container-amount{margin-bottom:.5rem;}

.container-amount-nums{font-size:.83rem;color:#64748b;margin-bottom:.35rem;}

.container-amount-nums strong{font-size:1.55rem;color:#0f172a;font-weight:900;letter-spacing:-.04em;}

.progress-bar{height:5px;background:#f1f5f9;border-radius:9999px;overflow:hidden;}

.progress-fill{height:100%;border-radius:9999px;transition:width .45s var(--ease);}

.container-alert{padding:.38rem .65rem;border-radius:7px;font-size:.74rem;font-weight:700;text-align:center;}

.empty-alert{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}

.low-alert{background:#fffbeb;color:#92400e;border:1px solid #fde68a;}

.container-actions{display:flex;gap:.5rem;margin-top:.5rem;}

/* ── Rations ─────────────────────────────────────────────────────── */

.ration-card{
  background:white;border-radius:12px;padding:1.4rem;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.ration-card:hover{box-shadow:var(--shadow-md);}

.ration-card-header{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:.5rem;}

.ration-card-header h3{color:#0f172a;font-size:1rem;font-weight:700;letter-spacing:-.025em;}

.ration-stats{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;}

.ration-stats span{
  font-size:.72rem;color:#16a34a;background:var(--green-50);
  padding:.2rem .6rem;border-radius:9999px;font-weight:600;border:1px solid var(--green-100);}

.ration-ingredients{border-top:1px solid #f1f5f9;margin-top:1rem;padding-top:1rem;}

.ration-ing-header{
  display:grid;grid-template-columns:2fr 1fr 1fr .3fr;gap:.5rem;
  padding:.38rem 0;font-weight:700;font-size:.66rem;color:#94a3b8;
  border-bottom:1px solid #f1f5f9;text-transform:uppercase;letter-spacing:.08em;}

.ration-ing-row{
  display:grid;grid-template-columns:2fr 1fr 1fr .3fr;gap:.5rem;
  padding:.45rem 0;font-size:.83rem;border-bottom:1px solid #f8fafc;
  align-items:center;color:#334155;}

.ration-ing-total{
  display:grid;grid-template-columns:2fr 1fr 1fr .3fr;gap:.5rem;
  padding:.48rem 0;font-weight:700;font-size:.83rem;color:#16a34a;
  border-top:2px solid #e2e8f0;margin-top:.2rem;}

.ration-load-info{
  background:var(--green-50);border:1px solid var(--green-100);
  border-radius:8px;padding:.5rem .8rem;font-size:.81rem;color:#15803d;
  margin-bottom:.75rem;font-weight:500;}

.ration-feed-row{
  background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:10px;padding:.9rem;margin-bottom:.6rem;}

.ration-feed-row-name{font-weight:700;font-size:.83rem;color:#1e293b;margin-bottom:.5rem;}

/* ── Share ───────────────────────────────────────────────────────── */

.share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.5rem;margin-bottom:1.5rem;}

.share-card{
  background:white;border-radius:12px;padding:1.5rem;
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.share-card h3{color:#0f172a;font-weight:700;font-size:.95rem;margin-bottom:.75rem;letter-spacing:-.025em;}

.generated-pin{
  margin-top:1rem;padding:1.2rem;background:var(--green-50);
  border-radius:10px;text-align:center;border:1px solid var(--green-100);}

.generated-pin p{color:#15803d;margin-bottom:.6rem;font-size:.83rem;font-weight:500;}

.pin-display{
  font-size:2.2rem;font-weight:900;letter-spacing:.25em;
  color:#0f172a;margin-bottom:.6rem;font-family:'Courier New',monospace;}

.share-msg{
  padding:.7rem .95rem;background:var(--green-50);border:1px solid var(--green-100);
  border-radius:8px;color:#15803d;font-size:.83rem;font-weight:500;}

/* ── Settings ────────────────────────────────────────────────── */

.settings-nav{display:flex;gap:.4rem;margin-bottom:1.5rem;flex-wrap:wrap;}

.settings-nav-btn{
  padding:.48rem 1rem;background:white;border:1.5px solid #e2e8f0;
  border-radius:9999px;font-size:.78rem;font-weight:600;color:#475569;
  cursor:pointer;font-family:inherit;transition:all .14s var(--ease);}

.settings-nav-btn:hover{border-color:#16a34a;color:#16a34a;}

.settings-nav-btn.active{background:#16a34a;border-color:#16a34a;color:white;}

.settings-section h3{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:1rem;letter-spacing:-.02em;}

.settings-card{
  background:white;border-radius:12px;padding:1.25rem 1.5rem;
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;margin-bottom:1rem;}

.settings-card-title{font-weight:700;font-size:.88rem;color:#1e293b;margin-bottom:.5rem;letter-spacing:-.02em;}

.settings-msg{
  padding:.55rem .85rem;border-radius:8px;font-size:.82rem;font-weight:500;
  background:var(--green-50);border:1px solid var(--green-100);color:#15803d;}

.settings-msg.err{background:#fef2f2;border-color:#fecaca;color:#b91c1c;}

.settings-alert-list{display:flex;flex-direction:column;gap:.65rem;max-width:480px;}

.settings-alert-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .9rem;background:white;border-radius:10px;
  border:1px solid #e2e8f0;font-size:.85rem;color:#334155;font-weight:500;}

.settings-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;}

.settings-toggle input{opacity:0;width:0;height:0;position:absolute;}

.toggle-track{
  width:38px;height:20px;background:#e2e8f0;border-radius:9999px;
  transition:background .2s;position:relative;}

.settings-toggle input:checked+.toggle-track{background:#16a34a;}

.toggle-thumb{
  position:absolute;top:2px;left:2px;width:16px;height:16px;background:white;
  border-radius:50%;transition:transform .2s;
  box-shadow:0 1px 4px rgba(15,23,42,.2);}

.settings-toggle input:checked+.toggle-track .toggle-thumb{transform:translateX(18px);}

.team-invite-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 0;border-bottom:1px solid #f1f5f9;gap:.5rem;flex-wrap:wrap;}

.team-invite-row:last-child{border-bottom:none;}

.team-invite-code{
  font-size:1.1rem;font-weight:900;letter-spacing:.15em;
  color:#0f172a;font-family:'Courier New',monospace;}

.team-member-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 0;border-bottom:1px solid #f1f5f9;gap:.5rem;flex-wrap:wrap;}

.team-member-row:last-child{border-bottom:none;}

.team-member-row.inactive{opacity:.55;}

/* ── Observations ────────────────────────────────────────────────── */

.obs-card{
  background:white;border-left:4px solid #16a34a;border-radius:10px;
  padding:1rem 1.2rem;transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;border-left:4px solid #16a34a;}

.obs-card.obs-resolved{opacity:.55;border-left-color:#cbd5e1;}

.obs-card:hover{box-shadow:var(--shadow-md);}

.obs-card-header{display:flex;justify-content:space-between;align-items:start;gap:.5rem;flex-wrap:wrap;}

.obs-type-badge{
  background:#f1f5f9;color:#475569;padding:.15rem .55rem;
  border-radius:9999px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;}

.obs-severity-badge{
  padding:.15rem .55rem;border-radius:9999px;font-size:.64rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;}

.obs-treatment-badge{
  background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;
  padding:.15rem .55rem;border-radius:9999px;font-size:.64rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;}

.obs-resolved-badge{
  background:var(--green-50);color:#15803d;padding:.15rem .55rem;
  border-radius:9999px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;}

/* ── Feeding Section Header ──────────────────────────────────────── */

.pen-section-header{
  display:flex;justify-content:space-between;align-items:center;
  gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem;}

.pen-section-header h3{font-size:1.05rem;font-weight:800;color:#0f172a;letter-spacing:-.03em;margin:0;}

.feed-mode-badge{
  background:#dbeafe;color:#1d4ed8;padding:.18rem .6rem;
  border-radius:9999px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;}

/* ── Pen Detail Cards ────────────────────────────────────────────── */

.pen-detail-card{
  background:white;border-radius:14px;overflow:hidden;
  transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;}

.pen-detail-card:hover{box-shadow:var(--shadow-md);}

.pen-detail-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.5rem;gap:.75rem;flex-wrap:wrap;color:white;
  background:linear-gradient(135deg,#1e293b 0%,#334155 100%);}

.pen-detail-header h3{color:white;font-weight:700;font-size:1rem;letter-spacing:-.03em;}

.pen-detail-header .btn-icon{color:rgba(255,255,255,.7);}

.pen-detail-header .btn-icon:hover{background:rgba(255,255,255,.12);color:white;}

.pen-detail-body{padding:1.1rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;}

.pen-stat-chip{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);
  padding:.2rem .65rem;border-radius:9999px;font-size:.67rem;font-weight:600;
  border:1px solid rgba(255,255,255,.16);}

.pen-active-chip{
  background:rgba(74,222,128,.15);color:#4ade80;
  padding:.2rem .65rem;border-radius:9999px;font-size:.67rem;font-weight:700;
  border:1px solid rgba(74,222,128,.25);}

.group-card{
  background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:10px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;}

.group-card.group-inactive{opacity:.6;}

.group-card-header{display:flex;justify-content:space-between;align-items:start;gap:.5rem;}

.group-status-badge{
  padding:.2rem .6rem;border-radius:9999px;font-size:.64rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;}

.group-status-badge.active{background:var(--green-100);color:#15803d;}

.group-status-badge.closed{background:#f1f5f9;color:#64748b;}

.group-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.5rem;}

.group-stat{
  background:white;border-radius:9px;padding:.55rem .7rem;text-align:center;
  box-shadow:var(--shadow-xs);border:1px solid #f1f5f9;}

.group-stat-label{
  display:block;font-size:.61rem;color:#94a3b8;margin-bottom:.15rem;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;}

.group-stat-value{font-size:1.1rem;font-weight:900;color:#1e293b;letter-spacing:-.03em;}

.group-cattle-list{
  background:white;border-radius:8px;padding:.6rem;
  border:1px solid #f1f5f9;display:flex;flex-wrap:wrap;gap:.3rem;}

.cattle-chip{
  background:var(--green-50);color:#16a34a;padding:.2rem .58rem;
  border-radius:9999px;font-size:.71rem;font-weight:600;border:1px solid var(--green-100);}

/* ── Groups Tab ──────────────────────────────────────────────────── */

.group-detail-card{
  background:white;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid #e8edf5;transition:box-shadow .2s;}

.group-detail-card:hover{box-shadow:var(--shadow-md);}

.group-detail-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.4rem;gap:.75rem;flex-wrap:wrap;color:white;
  background:linear-gradient(135deg,#1e293b 0%,#334155 100%);}

.group-detail-body{padding:1rem 1.4rem;}

.gdh-chip{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  padding:.18rem .58rem;border-radius:9999px;font-size:.66rem;font-weight:600;
  border:1px solid rgba(255,255,255,.16);}

.gdh-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);}

.gdh-btn:hover{background:rgba(255,255,255,.16);color:white;}

/* ── Mobile Bottom Nav ───────────────────────────────────────────── */

.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:#111827;
  border-top:1px solid rgba(255,255,255,.08);
  z-index:200;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

.bottom-nav-row{display:flex;align-items:stretch;height:62px;}

.bot-tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  background:none;border:none;
  color:rgba(255,255,255,.42);font-family:inherit;
  font-size:.56rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;padding:.3rem .1rem;
  position:relative;transition:color .15s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}

.bot-tab:active{opacity:.7;}

.bot-tab.active{color:#22c55e;}

.bot-tab.active::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28px;height:3px;background:#16a34a;border-radius:0 0 4px 4px;
}

.bot-icon{display:flex;align-items:center;justify-content:center;}

.bot-icon svg{width:22px;height:22px;display:block;}

.bot-active-dot{
  position:absolute;top:9px;right:calc(50% - 18px);
  width:7px;height:7px;border-radius:50%;background:#22c55e;
}

/* More sheet */

.more-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:300;backdrop-filter:blur(3px);
  animation:fadeIn .18s ease;
}

.more-sheet{
  position:fixed;bottom:0;left:0;right:0;
  background:white;border-radius:20px 20px 0 0;
  z-index:310;max-height:82vh;
  display:flex;flex-direction:column;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);
  animation:slideUp .25s cubic-bezier(.4,0,.2,1);
}

.sheet-handle{
  width:36px;height:4px;background:var(--n300);
  border-radius:99px;margin:.7rem auto .2rem;flex-shrink:0;
}

.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem 1.25rem .75rem;flex-shrink:0;
}

.sheet-head-title{font-size:.9rem;font-weight:700;color:var(--n800);}

.sheet-close-x{
  background:var(--n100);border:none;border-radius:50%;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.9rem;color:var(--n600);font-family:inherit;
}

.sheet-scroll{overflow-y:auto;flex:1;}

.sheet-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.45rem;padding:0 .85rem .5rem;
}

.sheet-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;padding:.9rem .4rem;
  background:var(--n50);border:1.5px solid var(--n200);border-radius:12px;
  cursor:pointer;transition:all .15s;font-family:inherit;
  color:var(--n600);font-size:.63rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}

.sheet-tab svg{width:24px;height:24px;color:var(--n500);}

.sheet-tab:active,.sheet-tab.active{background:var(--green-50);border-color:var(--green-600);color:var(--green-700);}

.sheet-tab.active svg{color:var(--green-600);}

.sheet-section-label{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n400);padding:.85rem 1.25rem .4rem;flex-shrink:0;
}

.pin-row{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .85rem .5rem;}

.pin-chip{
  display:flex;align-items:center;gap:.35rem;padding:.35rem .65rem;
  border-radius:999px;font-size:.7rem;font-weight:600;cursor:pointer;
  border:1.5px solid;font-family:inherit;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}

.pin-chip.pinned{background:var(--green-50);border-color:var(--green-600);color:var(--green-700);}

.pin-chip.unpinned{background:var(--n50);border-color:var(--n300);color:var(--n500);}

.pin-chip svg{width:12px;height:12px;}

/* ── Responsive ──────────────────────────────────────────────────── */

@media(max-width:768px){
  .main{padding:1rem;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));}
  .header-content{padding:.7rem 1rem;}
  .header-content h1{font-size:.8rem;letter-spacing:.08em;}
  .tabs{display:none;}
  .bottom-nav{display:block;}
  .form-row{grid-template-columns:1fr;}
  .modal{max-width:100%;border-radius:14px 14px 0 0;position:fixed;bottom:0;max-height:92vh;}
  .modal-overlay{align-items:flex-end;padding:0;}
  .pen-grid,.pen-feed-grid,.inventory-grid,.container-grid,.share-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .report-buttons{grid-template-columns:1fr 1fr;}
  table{font-size:.77rem;}
  th,td{padding:.58rem .5rem;}
  .ration-ing-header,.ration-ing-row,.ration-ing-total{grid-template-columns:2fr 1fr 1fr .4fr;font-size:.71rem;}
  .pen-detail-header,.pen-detail-body{padding:.85rem 1rem;}
}

@media(max-width:640px){
  .cattle-col-hide{display:none;}
}

/* react-grid-layout: restore touch scrolling on all devices including older browsers */

.react-grid-item{touch-action:auto!important;-webkit-tap-highlight-color:transparent;}

.rgl-drag-handle,.react-resizable-handle{touch-action:none!important;}