/* ============================================================
   AgenticEye OS — light, friendly, professional
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F4F7F5;--card:#FFFFFF;--border:#E2E8E4;--border2:#EDF1EF;
  --text:#1F2E28;--muted:#68786F;--faint:#94A39B;
  --primary:#177357;--primary-dark:#115C45;--primary-soft:#E3F2EC;--primary-softer:#F0F8F4;
  --amber:#B45309;--amber-soft:#FDF0DC;--red:#B42318;--red-soft:#FBE9E7;
  --blue:#1D5BD8;--blue-soft:#E7EEFC;--purple:#6D4AC8;--purple-soft:#EFEAFB;
  --shadow:none;
  --shadow-lg:none;
  --radius:14px;
}
html{scroll-behavior:smooth}
body{font-family:'Heebo','DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:15px}
[dir="ltr"] body{font-family:'DM Sans','Heebo',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:.92rem;color:var(--text)}
::selection{background:rgba(23,115,87,.18)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5D0;border-radius:6px;border:2px solid var(--bg)}
.hidden{display:none!important}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,var(--primary-softer) 0%,var(--bg) 45%,var(--blue-soft) 100%)}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);
  padding:40px 36px;width:100%;max-width:410px}
.login-logo{display:flex;align-items:center;gap:5px;margin-bottom:8px;direction:ltr}
.logo-eye{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#2FA37C);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-eye::after{content:'';width:13px;height:13px;border-radius:50%;background:var(--card)}
.login-logo .name{font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.login-logo .name span{color:var(--primary)}
.login-sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.login-card label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:14px 0 6px}
.login-card input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:11px;background:var(--bg);outline:none;transition:border .2s, box-shadow .2s}
.login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,115,87,.12)}
.login-err{display:none;background:var(--red-soft);color:var(--red);font-size:.85rem;padding:10px 14px;border-radius:10px;margin-top:14px}
.login-err.show{display:block}
.btn-login{width:100%;margin-top:22px;padding:12px;border-radius:11px;background:#01E4A0;color:#000;font-weight:700;font-size:1rem;transition:background .2s,transform .15s}
.btn-login:hover{background:#00c98c;transform:translateY(-1px)}
.btn-login:disabled{opacity:.6;transform:none}
.login-foot{margin-top:18px;text-align:center;font-size:.8rem;color:var(--faint)}

/* ===== Shell ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:var(--card);border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
.sb-head{padding:20px 18px 12px;display:flex;align-items:center;gap:10px;direction:ltr}
.sb-head .name{font-weight:800;font-size:1.08rem}
.sb-head .name b{color:var(--primary);font-weight:800}
.sb-head .os-tag{font-size:.8rem;font-weight:700;background:#000;color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;line-height:normal;padding-top:2px}
.sb-farm{margin:6px 14px 10px;padding:10px 12px;background:var(--primary-softer);border:1px solid var(--border2);border-radius:12px}
.sb-farm label{font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.04em;display:block;margin-bottom:4px}
.sb-farm select{width:100%;border:none;background:transparent;font-weight:700;font-size:.92rem;outline:none;cursor:pointer}
.sb-vertical{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--primary);font-weight:700;margin-top:6px}
.sb-vertical .dot{width:7px;height:7px;border-radius:50%;background:var(--primary)}
.nav-group{padding:10px 12px 2px}
.nav-group .g-label{font-size:.66rem;font-weight:800;color:var(--faint);letter-spacing:.1em;padding:0 8px;margin-bottom:4px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:.9rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;margin-bottom:1px;position:relative}
.nav-item svg{flex-shrink:0;opacity:.75}
.nav-item:hover{background:var(--primary-softer);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:700}
.nav-item.active svg{opacity:1}
.nav-item .badge{margin-inline-start:auto;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.sb-foot{margin-top:auto;padding:14px;border-top:1px solid var(--border2);font-size:.72rem;color:var(--faint)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);
  display:flex;align-items:center;gap:14px;padding:max(14px,env(safe-area-inset-top)) 26px 14px;border-bottom:1px solid var(--border2)}
/* v13.1 — PWA basics: back button (only when there is somewhere to go), refresh, pull-to-refresh, version banner */
.nav-back{display:none;padding:6px 9px;line-height:0}
.nav-back.show{display:inline-flex;align-items:center;justify-content:center}
[dir="rtl"] .nav-back svg{transform:scaleX(-1)}
button,a,.btn,.lang-btn,.nav-item,.bottom-nav a{touch-action:manipulation}
body{overscroll-behavior-y:contain}
#ptr{position:fixed;top:0;inset-inline:0;height:0;overflow:visible;z-index:19;display:flex;justify-content:center;pointer-events:none}
#ptr .ptr-ic,#ptr .ptr-txt{display:none}
#ptr.on .ptr-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.15);color:var(--primary);font-weight:900;font-size:1.05rem;transform:translateY(calc(var(--ptr,0px) - 46px)) rotate(var(--ptr-rot,0deg));transition:transform .08s linear}
#ptr.ready .ptr-ic{color:#fff;background:var(--primary);border-color:var(--primary)}
#ptr.loading .ptr-ic{animation:ptrspin .8s linear infinite;transform:translateY(12px)}
@keyframes ptrspin{to{transform:translateY(12px) rotate(360deg)}}
#verBanner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:230;background:var(--primary);color:#fff;border-radius:999px;padding:10px 16px;font-size:.84rem;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;gap:10px;align-items:center;cursor:pointer;max-width:calc(100vw - 32px)}
#verBanner.hidden{display:none}
#verBanner .vb-x{opacity:.75;font-weight:400;padding:0 4px}
@media(min-width:901px){#verBanner{bottom:24px}}
.refresh-spin svg{animation:ptrspin .8s linear infinite}
.topbar h1{font-size:1.22rem;font-weight:800;letter-spacing:-.01em}
.topbar .crumb{color:var(--faint);font-weight:500;font-size:.85rem}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang-btn{padding:6px 12px;border-radius:9px;border:1px solid var(--border);background:var(--card);font-size:.78rem;font-weight:700;color:var(--muted);transition:all .2s}
.lang-btn:hover{border-color:var(--primary);color:var(--primary)}
.user-chip{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:5px 12px 5px 6px}
[dir="rtl"] .user-chip{padding:5px 6px 5px 12px}
.user-chip .avatar{width:29px;height:29px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem}
.user-chip .uname{font-size:.83rem;font-weight:700}
.user-chip .logout{color:var(--faint);font-size:.75rem;font-weight:600}
.user-chip .logout:hover{color:var(--red)}

.view{padding:24px 26px 60px;max-width:1460px;width:100%;margin:0 auto}

/* ===== Cards / KPIs ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .k-label{font-size:.74rem;font-weight:600;color:var(--muted)}
.kpi .k-value{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.kpi .k-sub{font-size:.72rem;color:var(--faint);margin-top:1px}
.kpi .k-ico{position:absolute;top:13px;inset-inline-end:13px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.k-green{background:var(--primary-soft);color:var(--primary)}
.k-amber{background:var(--amber-soft);color:var(--amber)}
.k-red{background:var(--red-soft);color:var(--red)}
.k-blue{background:var(--blue-soft);color:var(--blue)}
.k-purple{background:var(--purple-soft);color:var(--purple)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-head h3{font-size:1rem;font-weight:800}
.card-head .sub{font-size:.78rem;color:var(--muted)}
.card-head .spacer{margin-inline-start:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-23{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media(max-width:1100px){.grid-2,.grid-3,.grid-23{grid-template-columns:1fr}}

/* ===== Insights (Brain) ===== */
.brain-panel{background:linear-gradient(135deg,var(--primary-softer),var(--blue-soft));border:1px solid #D8E8E0;border-radius:var(--radius);padding:18px 20px;margin-bottom:18px}
.brain-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brain-head .b-ico{width:34px;height:34px;border-radius:10px;background:var(--primary);display:flex;align-items:center;justify-content:center}
.brain-head h3{font-size:.98rem;font-weight:800}
.brain-head .sub{font-size:.76rem;color:var(--muted)}
.insight{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.insight .i-dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex-shrink:0}
.insight .i-title{font-weight:700;font-size:.9rem}
.insight .i-detail{font-size:.82rem;color:var(--muted);line-height:1.55}
.insight .i-flock{font-size:.72rem;color:var(--primary);font-weight:700}
.sev-critical{background:var(--red)}
.sev-warning{background:var(--amber)}
.sev-info{background:var(--blue)}

/* ===== Tables ===== */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:640px}
thead th{text-align:start;padding:11px 14px;font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.03em;background:var(--bg);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--bg)}
tbody tr.clickable{cursor:pointer}
.t-title{font-weight:700}
.t-sub{font-size:.74rem;color:var(--faint)}
.num{font-variant-numeric:tabular-nums;font-weight:600}
.empty-state{padding:44px 20px;text-align:center;color:var(--muted)}
.empty-state .big{font-size:2rem;margin-bottom:8px}

/* ===== Pills / chips ===== */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.pill-green{background:var(--primary-soft);color:var(--primary)}
.pill-amber{background:var(--amber-soft);color:var(--amber)}
.pill-red{background:var(--red-soft);color:var(--red)}
.pill-blue{background:var(--blue-soft);color:var(--blue)}
.pill-gray{background:var(--bg);color:var(--muted)}
.pill-purple{background:var(--purple-soft);color:var(--purple)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px;font-size:.87rem;font-weight:700;transition:all .18s;white-space:nowrap}
.btn-primary{background:#01E4A0;color:#000}
.btn-primary:hover{background:#00c98c;transform:translateY(-1px)}
.btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger-ghost{color:var(--red);border:1px solid transparent}
.btn-danger-ghost:hover{background:var(--red-soft)}
.btn-sm{padding:5px 11px;font-size:.78rem;border-radius:9px}
.icon-btn{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--faint);transition:all .15s}
.icon-btn:hover{background:var(--red-soft);color:var(--red)}

/* ===== Filters ===== */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filters select,.filters input{padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);outline:none;font-size:.85rem}
.filters select:focus,.filters input:focus{border-color:var(--primary)}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(23,34,29,.45);backdrop-filter:blur(3px);z-index:210;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto;animation:fadeIn .18s ease}
.modal{background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;padding:26px 26px 22px;animation:slideUp .22s ease}
.modal h3{font-size:1.08rem;font-weight:800;margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form-grid .full{grid-column:1/-1}
.ffield label{display:block;font-size:.76rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.ffield label .req{color:var(--red)}
.ffield input,.ffield select,.ffield textarea{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);outline:none;transition:border .15s}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,115,87,.1)}
.ffield textarea{min-height:64px;resize:vertical}
/* Standalone inline input (e.g. bug-thread reply box) */
.inp{padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);outline:none;transition:border .15s}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,115,87,.1)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ===== Toast ===== */
.toast{position:fixed;bottom:26px;inset-inline-start:50%;transform:translateX(50%) translateY(16px);background:var(--text);color:#fff;padding:11px 22px;border-radius:12px;font-size:.88rem;font-weight:600;opacity:0;transition:all .3s;pointer-events:none;z-index:200;box-shadow:var(--shadow-lg)}
[dir="ltr"] .toast{transform:translateX(-50%) translateY(16px)}
.toast.show{opacity:1;transform:translateX(50%) translateY(0)}
[dir="ltr"] .toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--red)}
.toast.success{background:var(--primary)}

/* ===== Charts ===== */
.chart-box svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.legend .li{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);font-weight:600}
.legend .sw{width:11px;height:11px;border-radius:4px}

/* ===== Barn grid ===== */
.barn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.barn-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s}
.barn-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.barn-card .b-name{font-weight:800;font-size:.98rem}
.barn-card .b-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:6px}
.barn-card .b-row b{color:var(--text);font-weight:700}

/* ===== Flock detail ===== */
.detail-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.detail-head .back{width:34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.detail-head .back:hover{border-color:var(--primary);color:var(--primary)}
.detail-head h2{font-size:1.3rem;font-weight:800}
.pl-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border2);font-size:.88rem}
.pl-row:last-child{border-bottom:none}
.pl-row .v{font-weight:700;font-variant-numeric:tabular-nums}
.pl-total{background:var(--primary-softer);margin:8px -12px -8px;padding:12px;border-radius:10px;display:flex;justify-content:space-between;font-weight:800}

/* ===== Onboarding ===== */
.onboard{max-width:560px;margin:8vh auto;text-align:center}
.onboard .big-ico{width:72px;height:72px;border-radius:22px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:2rem}
.onboard h2{font-size:1.4rem;font-weight:800;margin-bottom:8px}
.onboard p{color:var(--muted);margin-bottom:22px}

/* ===== Responsive ===== */
.menu-fab{display:none}
@media(max-width:900px){
  .sidebar{position:fixed;inset-inline-start:0;transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .menu-fab{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--card);border:1px solid var(--border)}
  .view{padding:16px 14px 60px}
  .topbar{padding:12px 14px}
  .grid-2,.grid-3,.grid-23{grid-template-columns:1fr}
}
@media print{.sidebar,.topbar,.btn,.filters{display:none!important}.view{padding:0}}

/* Print report header */
@media print{.print-head{display:block!important}}

/* Mobile bottom nav */
.bottom-nav{display:none}
@media(max-width:900px){
  .bottom-nav{display:flex;position:fixed;bottom:0;inset-inline:0;background:var(--card);border-top:1px solid var(--border);z-index:40;padding:4px 0 max(4px, env(safe-area-inset-bottom))}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:.6rem;font-weight:700;color:var(--muted)}
  .bottom-nav a.active{color:var(--primary)}
  .bottom-nav a svg{width:20px;height:20px}
  .view{padding-bottom:86px}
}

/* ===== Floating help + AI assistant ===== */
.fab{position:fixed;inset-inline-end:auto;left:16px;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.15rem;z-index:180;transition:transform .15s}
.fab:hover{transform:translateY(-2px)}
.fab.hidden{display:none}
.fab-help{bottom:16px;background:var(--card);color:var(--primary);border:2px solid var(--primary)}
.fab-ai{bottom:72px;background:linear-gradient(135deg,#0F3D2E,var(--primary));color:#fff}
@media(max-width:840px){.fab-help{bottom:76px}.fab-ai{bottom:132px}}
.drawer-back{position:fixed;inset:0;background:rgba(15,23,20,.35);z-index:190;backdrop-filter:blur(1px)}
.drawer-back.hidden{display:none}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(430px,100vw);background:var(--card);z-index:200;display:flex;flex-direction:column;animation:drawIn .22s ease}
.drawer.hidden{display:none}
@keyframes drawIn{from{transform:translateX(-40px);opacity:.4}to{transform:none;opacity:1}}
.drawer .d-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.drawer .d-head h3{font-size:1rem;font-weight:800;flex:1}
.drawer .d-body{flex:1;overflow-y:auto;padding:14px 16px}
.drawer .d-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:none;cursor:pointer;font-size:.95rem;color:var(--muted)}
.hc-ctx{background:linear-gradient(135deg,var(--primary-softer),var(--blue-soft));border:1px solid var(--border);border-radius:13px;padding:14px 15px;margin-bottom:14px}
.hc-ctx h4{font-size:.95rem;font-weight:800;margin-bottom:5px}
.hc-ctx p{font-size:.84rem;color:#33413B;line-height:1.6}
.hc-ctx li{font-size:.8rem;color:var(--primary);margin-top:5px;list-style:none;padding-inline-start:18px;position:relative}
.hc-ctx li::before{content:'💡';position:absolute;inset-inline-start:0;font-size:.7rem;top:2px}
.hc-search{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);outline:none;font:inherit;font-size:.86rem;margin-bottom:11px}
.hc-sec{border:1px solid var(--border);border-radius:11px;margin-bottom:8px;overflow:hidden}
.hc-sec>button{width:100%;display:flex;align-items:center;gap:9px;padding:11px 13px;background:none;border:none;cursor:pointer;font:inherit;font-size:.88rem;font-weight:700;text-align:start}
.hc-sec .hc-bd{display:none;padding:0 13px 12px;font-size:.82rem;color:var(--muted);line-height:1.65}
.hc-sec.open .hc-bd{display:block}
.hc-sec.open>button{color:var(--primary)}
.ai-msgs{display:flex;flex-direction:column;gap:10px}
.ai-m{max-width:88%;padding:10px 13px;border-radius:13px;font-size:.87rem;line-height:1.6;white-space:pre-wrap}
.ai-m.user{align-self:flex-start;background:var(--primary);color:#fff;border-end-start-radius:4px}
.ai-m.bot{align-self:flex-end;background:var(--bg);border:1px solid var(--border);border-end-end-radius:4px}
.ai-chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.ai-chip{border:1px solid var(--border);background:var(--card);border-radius:99px;padding:6px 12px;font-size:.76rem;font-weight:700;cursor:pointer;color:var(--primary)}
.ai-chip:hover{border-color:var(--primary)}
.ai-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0}
.ai-foot input{flex:1;padding:10px 13px;border:1.5px solid var(--border);border-radius:11px;background:var(--bg);outline:none;font:inherit;font-size:.88rem}
.ai-foot button{padding:10px 16px;border-radius:11px;border:none;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}
.ai-foot button:disabled{opacity:.5}

/* ===== v3.0 mobile UX + tour + tips ===== */
.sb-close{display:none;margin-inline-start:auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:1rem;color:var(--muted)}
.sb-back{display:none}
@media(max-width:900px){
  .sidebar{height:100dvh;padding-bottom:90px;-webkit-overflow-scrolling:touch}
  .sb-close{display:flex;align-items:center;justify-content:center}
  .sb-back.show{display:block;position:fixed;inset:0;background:rgba(15,23,20,.4);z-index:29}
  .fab{display:none!important}
  /* Keep the topbar inside the viewport — it must never widen the page */
  .topbar{gap:7px;flex-wrap:nowrap}
  .topbar h1{font-size:.98rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crumb{display:none}
  .user-chip .uname{display:none}
  .user-chip{gap:6px}
  .top-actions{gap:6px;flex-shrink:0}
  .lang-btn{padding:6px 8px}
  .nav-back{padding:6px 7px}
  .main,.view{max-width:100vw;overflow-x:clip}
}
.sb-help{margin:8px 10px 14px;padding-top:10px;border-top:1px solid var(--border)}
.sb-help .g-label{font-size:.64rem;font-weight:800;letter-spacing:.06em;color:var(--faint);padding:0 8px 6px}
.sb-help button,.sb-help a{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:none;border-radius:10px;cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);text-align:start;text-decoration:none}
.sb-help button:hover,.sb-help a:hover{background:var(--primary-softer);color:var(--primary)}
/* Guided tour */
.tour-back{position:fixed;inset:0;z-index:300;background:rgba(10,18,14,.55)}
.tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,18,14,.55);outline:2px solid var(--primary);transition:all .25s ease;pointer-events:none}
.tour-card{position:fixed;z-index:301;width:min(330px,calc(100vw - 28px));background:var(--card);border-radius:15px;padding:17px 18px;transition:all .25s ease}
.tour-card h4{font-size:.98rem;font-weight:800;margin-bottom:5px}
.tour-card p{font-size:.85rem;color:var(--muted);line-height:1.6}
.tour-card .t-foot{display:flex;align-items:center;gap:8px;margin-top:13px}
.tour-card .t-step{font-size:.72rem;color:var(--faint);font-weight:700}
.tip-banner{display:flex;gap:11px;align-items:flex-start;background:linear-gradient(135deg,var(--amber-soft),var(--primary-softer));border:1px solid var(--border);border-radius:14px;padding:13px 15px;margin-bottom:14px}
.tip-banner .t-ic{font-size:1.2rem}
.tip-banner b{font-size:.85rem;display:block;margin-bottom:2px}
.tip-banner span{font-size:.82rem;color:var(--muted);line-height:1.55}
.tip-banner .t-x{margin-inline-start:auto;border:none;background:none;cursor:pointer;color:var(--faint);font-size:.9rem;padding:2px 6px}

/* v8.9 — universal table sorting + search */
.th-sort{cursor:pointer;user-select:none;position:relative;white-space:nowrap}
.th-sort:hover{color:var(--primary)}
.th-sort::after{content:'⇅';font-size:.66em;opacity:.32;margin-inline-start:5px}
.th-sort.sort-asc::after{content:'▲';opacity:.9;color:var(--primary)}
.th-sort.sort-desc::after{content:'▼';opacity:.9;color:var(--primary)}
.tbl-tools{display:flex;gap:9px;align-items:center;margin:0 0 8px;flex-wrap:wrap}

/* v9.3 — live translation */
.t9-mark{font-size:.72em;opacity:.5;cursor:pointer;user-select:none}
.t9-mark:hover{opacity:1}
.t9-done{border-bottom:1px dotted var(--border)}

/* v9.6 — celebration confetti */
.confetti-box{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.confetti-box span{position:absolute;top:-30px;animation:conf-fall 1.2s ease-in forwards}
@keyframes conf-fall{0%{transform:translateY(0) rotate(0);opacity:1}80%{opacity:1}100%{transform:translateY(72vh) rotate(340deg);opacity:0}}

/* v9.8 — freeze the first (flock/name) column while a wide table scrolls
   sideways, per field feedback: "you scroll and forget which row you're on".
   inset-inline-start keeps it correct in both RTL and LTR. */
table.sticky-first th:first-child, table.sticky-first td:first-child {
  position: sticky; inset-inline-start: 0; z-index: 3;
  background: var(--card, #fff);
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .18);
}
body.rtl table.sticky-first th:first-child, body.rtl table.sticky-first td:first-child {
  box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .18);
}
table.sticky-first thead th:first-child { z-index: 4; }

/* ===================== v10.1 — Albert ===================== */
/* The raised center button in the mobile bottom bar — Albert is THE way in. */
.bn-albert {
  position: relative; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 2px; padding: 0 6px 5px; font-size: .62rem; font-weight: 800; color: var(--primary);
}
.bn-albert .al-fabface {
  width: 52px; height: 52px; border-radius: 50%; margin-top: -22px;
  background: radial-gradient(circle at 30% 25%, #ffffff, var(--primary-soft) 60%, var(--primary-soft));
  border: 2.5px solid var(--primary); box-shadow: 0 4px 14px rgba(0, 160, 110, .35);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform .15s;
}
.bn-albert:active .al-fabface { transform: scale(.92); }

/* Desktop floating Albert */
.fab-albert { width: 58px !important; height: 58px !important; padding: 0 !important; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #ffffff, var(--primary-soft) 60%, var(--primary-soft)) !important;
  border: 2.5px solid var(--primary) !important; box-shadow: 0 6px 18px rgba(0, 160, 110, .35) !important; }
.fab-albert .al-fabface { display: block; width: 100%; height: 100%; }

/* Unread pulse */
.al-unread::after {
  content: ''; position: absolute; top: 2px; inset-inline-end: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--red); border: 2px solid var(--card, #fff);
  animation: al-pulse 1.6s infinite;
}
.bn-albert.al-unread::after { top: -18px; }
@keyframes al-pulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .65 } }

/* The chat panel */
.albert-drawer { display: flex; flex-direction: column; max-width: 480px; width: min(480px, 100vw); }
.al-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--primary-softer), var(--card, #fff)); }
.al-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, #fff, var(--primary-soft)); border: 2px solid var(--primary); }
.al-sub { font-size: .7rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-tool { border: 1px solid var(--border); background: var(--card, #fff); border-radius: 10px;
  padding: 5px 9px; cursor: pointer; font-size: .95rem; opacity: .75; }
.al-tool.on { opacity: 1; background: var(--primary-soft, var(--primary-soft)); border-color: var(--primary); }
.al-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
.al-day { text-align: center; font-size: .66rem; color: var(--faint); margin: 10px 0 4px; font-weight: 700; }
.al-row { display: flex; gap: 7px; margin: 5px 0; align-items: flex-end; }
.al-row.al-user { justify-content: flex-start; flex-direction: row-reverse; }
.al-mini { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--primary-soft); border: 1.5px solid var(--primary); display: inline-block; }
.al-b { max-width: 82%; border-radius: 15px; padding: 8px 12px; font-size: .86rem; line-height: 1.45; position: relative; }
.al-b-bot { background: var(--bg2, var(--bg)); border-start-start-radius: 4px; }
.al-b-user { background: var(--primary-soft, #dff3e9); border-start-end-radius: 4px; }
.al-b-daily { border: 1.5px solid var(--primary); background: linear-gradient(180deg, var(--primary-softer), var(--bg2, var(--bg))); }
.al-daily-tag { font-size: .64rem; font-weight: 800; color: var(--primary); margin-bottom: 3px; }
.al-text { white-space: pre-wrap; word-break: break-word; }
.al-time { font-size: .6rem; color: var(--faint); margin-top: 3px; text-align: end; }
.al-loading { text-align: center; color: var(--faint); padding: 20px; font-size: .84rem; }
.al-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.al-foot { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: center; }
.al-foot input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 9px 15px; font-size: .9rem; outline: none; background: var(--bg2, var(--bg)); }
.al-foot input:focus { border-color: var(--primary); background: var(--card, #fff); }
.al-send { border: none; background: var(--primary); color: #fff; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; font-size: 1rem; flex-shrink: 0; }
.al-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.al-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: al-b 1.2s infinite; }
.al-dots i:nth-child(2) { animation-delay: .15s } .al-dots i:nth-child(3) { animation-delay: .3s }
@keyframes al-b { 0%, 60%, 100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-5px); opacity: 1 } }

/* v10.2 — Albert polish */
.al-imgtag { font-size: .66rem; color: var(--faint); margin-bottom: 3px; }
.al-fb { margin-inline-start: 8px; }
.al-fb button { border: none; background: none; cursor: pointer; font-size: .78rem; opacity: .55; padding: 0 2px; }
.al-fb button:hover { opacity: 1; }
.al-tool.listening { animation: al-listen 1.1s infinite; border-color: var(--red); }
@keyframes al-listen { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 60, 60, .45) } 55% { box-shadow: 0 0 0 8px rgba(220, 60, 60, 0) } }
.al-navbtn { display: inline-flex; align-items: center; gap: 4px; }

/* v10.4 — Albert nudge bubble */
.al-nudge {
  position: fixed; bottom: 86px; inset-inline-end: 18px; z-index: 90;
  display: flex; align-items: center; gap: 8px; max-width: 290px;
  background: var(--card, #fff); border: 1.5px solid var(--primary);
  border-radius: 16px 16px 4px 16px; padding: 9px 12px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 120, 80, .22); font-size: .8rem; line-height: 1.4;
  animation: al-ndg-in .35s cubic-bezier(.2, 1.4, .4, 1);
}
body.rtl .al-nudge { border-radius: 16px 16px 16px 4px; }
@keyframes al-ndg-in { from { transform: translateY(14px) scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }
.al-ndg-txt { flex: 1; }
.al-ndg-x { border: none; background: none; cursor: pointer; color: var(--faint); font-size: .8rem; padding: 2px; flex-shrink: 0; }
@media (max-width: 760px) { .al-nudge { bottom: 108px; inset-inline-start: 14px; inset-inline-end: 14px; max-width: none; } }

/* v10.5 — Albert asks: multiple-choice answer buttons inside the bubble */
.al-ask { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.al-ask-opt { border: 1.5px solid var(--primary); background: var(--card, #fff); color: var(--primary);
  border-radius: 999px; padding: 5px 13px; cursor: pointer; font-size: .8rem; font-weight: 700;
  transition: transform .1s; }
.al-ask-opt:active { transform: scale(.94); background: var(--primary-soft, var(--primary-soft)); }

/* v10.6 — the setup chip stands out: this is where Albert leads */
.al-chip-setup { border-color: var(--primary) !important; background: var(--primary-soft, var(--primary-soft)) !important;
  font-weight: 800; animation: al-ndg-in .4s cubic-bezier(.2, 1.4, .4, 1); }

/* v10.7 — Albert work plans + undo */
.al-plan{margin-top:8px;border:1px solid rgba(0,229,160,.25);border-radius:10px;padding:8px 10px;background:rgba(0,229,160,.05)}
.al-plan-done,.al-plan-cancelled{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.al-plan-head{font-size:.78rem;margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.al-plan-st{font-size:.68rem;color:var(--muted)}
.al-plan-row{font-size:.76rem;padding:3px 0;border-top:1px dashed rgba(255,255,255,.08)}
.al-plan-row:first-of-type{border-top:0}
.al-plan-btns{display:flex;gap:8px;margin-top:8px}
.al-undo-btn{background:none;border:1px solid rgba(255,255,255,.18);color:var(--muted);border-radius:8px;font-size:.66rem;padding:2px 8px;cursor:pointer;margin-inline-start:6px}
.al-undo-btn:hover{color:var(--text);border-color:rgba(255,255,255,.35)}

/* ===== v10.8 — UX layer ===== */
/* keyboard users always see where they are */
:focus-visible{outline:3px solid rgba(23,115,87,.45);outline-offset:2px;border-radius:8px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
/* honor reduced-motion system setting everywhere */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* fresh view slides in */
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view.view-enter{animation:viewIn .22s ease}
/* tables: row hover + comfortable phone tap targets */
.tbl-wrap tbody tr:hover td{background:var(--primary-softer)}
@media(max-width:900px){.btn-sm{min-height:36px}.lang-btn,.menu-fab{min-width:38px;min-height:38px}}
/* notification center */
.bell-btn{position:relative}
.bell-badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.ux-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:min(360px,92vw);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.16);z-index:260;overflow:hidden}
.top-actions{position:relative}
.ux-pop-head{display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:800;font-size:.86rem;border-bottom:1px solid var(--border)}
.ux-pop-foot{display:block;text-align:center;padding:10px;font-size:.8rem;font-weight:700;color:var(--primary);border-top:1px solid var(--border)}
.ux-pop-foot:hover{background:var(--primary-softer)}
.ux-alert-row{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid var(--border2);text-decoration:none}
.ux-alert-row:hover{background:var(--primary-softer)}
.ux-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--blue)}
.ux-sev-critical .ux-dot{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.ux-sev-warning .ux-dot{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.ux-alert-title{font-size:.84rem;font-weight:700;line-height:1.35}
.ux-alert-sub{font-size:.7rem;color:var(--faint);margin-top:2px}
/* phone filters fold behind one button */
.filters-toggle{display:none;margin-bottom:10px;gap:8px}
.filters-toggle .badge{background:var(--primary);color:#fff;border-radius:99px;font-size:.62rem;padding:1px 6px;font-weight:800}
.filters-toggle .chev{opacity:.6}
@media(max-width:900px){
  .filters-toggle{display:inline-flex}
  .filters.filters-collapsed:not(.open) select{display:none}
  .filters.filters-collapsed:not(.open) .spacer{display:none}
}
/* shortcuts sheet */
.ux-sheet{background:var(--card);border-radius:18px;width:min(440px,100%);padding:18px 20px;margin-top:8vh;animation:fadeIn .18s ease}
.ux-sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ux-sheet-head h3{font-size:1rem;font-weight:800;flex:1}
.ux-sc-row{display:flex;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--border2);font-size:.86rem}
.ux-sc-row kbd{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;font-weight:700;background:var(--bg);border:1px solid var(--border);border-bottom-width:2px;border-radius:7px;padding:3px 9px;min-width:64px;text-align:center;direction:ltr}
/* farm-setup progress card */
.ux-setup{border-color:var(--primary-soft);background:linear-gradient(120deg,var(--primary-softer),var(--card))}
.ux-setup-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ux-ring{--p:0;width:64px;height:64px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--primary) calc(var(--p) * 1%),var(--border) 0)}
.ux-ring span{width:50px;height:50px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;color:var(--primary-dark)}
.ux-gaps{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ux-updated{font-size:.68rem;color:var(--faint);margin-inline-start:8px;white-space:nowrap}
/* print: paper gets the content, not the chrome */
@media print{.bottom-nav,.fab,.al-fab,.fab-albert,#albertBn,.al-nudge,.drawer,.drawer-back,.top-actions,.filters-toggle,#uxUpdated{display:none!important}.card,.tbl-wrap{break-inside:avoid;box-shadow:none}body{background:var(--card)}}

/* ===== v10.9 — farm map & blueprint ===== */
.fm-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fm-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:4px}
.fm-tab{padding:7px 13px;border-radius:10px;font-size:.82rem;font-weight:700;color:var(--muted)}
.fm-tab.active{background:var(--primary-soft);color:var(--primary-dark)}
.fm-maptools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fm-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.fm-seg button{padding:6px 12px;font-size:.78rem;font-weight:700;color:var(--muted)}
.fm-seg button.on{background:var(--primary);color:#fff}
.fm-chips{display:flex;gap:6px;flex-wrap:wrap}
.fm-chips .ai-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.fm-chips .ai-chip[disabled]{opacity:.5;cursor:not-allowed}
.fm-frame{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--border2);aspect-ratio:16/9;max-height:520px}
.fm-frame iframe{width:100%;height:100%;border:0;display:block}
.fm-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fm-locrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fm-paste{padding:6px 10px;border:1.5px solid var(--border);border-radius:9px;font-size:.78rem;min-width:190px}
.fm-state{font-size:.72rem;color:var(--primary);font-weight:700}
td.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;direction:ltr;text-align:start}
.fm-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.74rem;color:var(--muted)}
.fm-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;border:2px solid;vertical-align:-2px;margin-inline-end:5px}
.fm-node:hover rect{filter:brightness(.97)}
.fm-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fm-person{border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:.84rem}
.fm-flow{display:flex;gap:6px;align-items:stretch;overflow-x:auto;padding:4px 2px 8px}
.fm-step{flex:1;min-width:138px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:3px}
.fm-step-ic{font-size:1.3rem}.fm-step-t{font-weight:800;font-size:.86rem}.fm-step-s{font-size:.72rem;color:var(--muted);line-height:1.4}
.fm-step .pill{align-self:flex-start;margin-top:4px}
.fm-arrow{align-self:center;color:var(--faint);font-size:1.1rem;flex-shrink:0}
[dir="rtl"] .fm-arrow{transform:scaleX(-1)}
.fm-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fm-asset{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer}
.fm-asset:hover{border-color:var(--primary)}
.fm-thumb{height:110px;background:var(--bg) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:2rem}
.fm-asset-t{font-size:.78rem;font-weight:700;padding:7px 9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-asset-s{font-size:.68rem;color:var(--faint);padding:0 9px 8px}
.fm-asset-del{position:absolute;top:6px;inset-inline-end:6px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--red);font-weight:800;font-size:.8rem}
.fm-pb{font-size:.76rem;line-height:1.45;color:var(--text)}
@media(max-width:900px){.fm-frame{aspect-ratio:4/3}.fm-step{min-width:150px}}

/* ===== v11.0 — live map (Leaflet, self-hosted) ===== */
.fm-frame.fm-live{position:relative;aspect-ratio:auto;max-height:none;height:min(62vh,640px);width:100%}
.fm-exitfull[hidden],.fm-placebar[hidden]{display:none!important}
.fm-frame.fm-live #fmMap{width:100%;height:100%;background:#DDE5E1}
.fm-frame.fm-placing #fmMap{cursor:crosshair}
.fm-frame.fm-placing{outline:3px solid var(--primary);outline-offset:2px}
.fm-frame.fm-full{position:fixed;inset:0;z-index:320;border-radius:0;height:100vh;height:100dvh;aspect-ratio:auto;max-height:none;border:0}
body.fm-has-full{overflow:hidden}
.fm-exitfull{position:absolute;top:12px;inset-inline-end:12px;z-index:1000;background:var(--card);border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.18);font-weight:800}
.fm-placebar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);font-weight:700;font-size:.82rem}
.leaflet-container{font-family:inherit;direction:ltr}
.leaflet-container a.leaflet-popup-close-button{font-size:18px}
.leaflet-popup-content{margin:12px 14px;direction:inherit}
[dir="rtl"] .leaflet-popup-content{direction:rtl;text-align:right}
.fm-pop{display:flex;flex-direction:column;gap:6px;font-size:.84rem;min-width:200px}
.fm-pop label{font-size:.76rem;color:var(--muted)}
.fm-pop input[type=range]{width:100%}
.fm-pin{background:transparent;border:0}
.fm-pin>*{display:inline-block}
.fm-pin{display:inline-block;white-space:nowrap;padding:3px 9px;border-radius:999px;font-weight:800;font-size:12px;color:#fff;background:#0E8F63;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translate(-50%,-50%);cursor:grab;line-height:1.2}
.fm-pin small{display:block;font-size:9.5px;font-weight:600;opacity:.9}
.fm-pin-farm{background:var(--text);transform:translate(-50%,-140%);cursor:default}
.fm-pin-empty{background:#7C8A84}.fm-pin-cleaning{background:#C77D0A}.fm-pin-fault{background:#D14343}
.leaflet-marker-draggable .fm-pin:active{cursor:grabbing}
.leaflet-control-zoom a{color:var(--text)}
@media(max-width:900px){
  .fm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fm-tabs::-webkit-scrollbar{display:none}
  .fm-tab{white-space:nowrap;flex-shrink:0}
  .fm-frame.fm-live{height:min(58vh,520px)}
  .fm-locrow{gap:5px}.fm-paste{min-width:0;width:100%}
  .fm-maptools .spacer{display:none}
  #fmSiteSvg{touch-action:pan-y}
  .fm-node{touch-action:none}
}

/* ===== v11.1 — night mode + smart empty states ===== */
html.dark{color-scheme:dark;
  --bg:#0F1512;--card:#182019;--border:#273129;--border2:#1F2822;
  --text:#E7EEEA;--muted:#A3B3AA;--faint:#76877E;
  --primary:#34C08F;--primary-dark:#7BE0BA;--primary-soft:#173A2E;--primary-softer:#132A22;
  --amber:#F4B860;--amber-soft:#3B2B12;--red:#F27D74;--red-soft:#42201C;
  --blue:#86ACFF;--blue-soft:#1A2A4A;--purple:#B9A4FF;--purple-soft:#2A2247;
  --shadow:0 1px 2px rgba(0,0,0,.35);--shadow-lg:0 12px 32px rgba(0,0,0,.55)}
html.dark body{background:var(--bg);color:var(--text)}
html.dark input,html.dark select,html.dark textarea{background:var(--card);color:var(--text);border-color:var(--border)}
html.dark input::placeholder,html.dark textarea::placeholder{color:var(--faint)}
html.dark .btn-ghost,html.dark .ai-chip{color:var(--text)}
html.dark .btn-primary{background:var(--primary);color:#07110D}
html.dark .btn-primary:hover{background:var(--primary-dark)}
html.dark .fm-seg button.on{color:#07110D}
html.dark .leaflet-popup-content-wrapper,html.dark .leaflet-popup-tip{background:var(--card);color:var(--text);box-shadow:var(--shadow-lg)}
html.dark .leaflet-control-zoom a{background:var(--card);color:var(--text);border-color:var(--border)}
html.dark .leaflet-control-attribution{background:rgba(24,32,25,.85);color:var(--muted)}
html.dark .leaflet-control-attribution a{color:var(--primary)}
html.dark .leaflet-bar{border-color:var(--border)}
html.dark .fm-pin{border-color:var(--card)}
html.dark .fm-pin-farm{background:#2B3A33}
html.dark #fmSiteSvg,html.dark #fmSysSvg{background:var(--card)!important}
html.dark .skeleton,html.dark .sk{background:linear-gradient(90deg,var(--border2),var(--border),var(--border2))}
html.dark img[src$=".svg"].invert-dark{filter:invert(1) hue-rotate(180deg)}
html.dark ::-webkit-scrollbar-thumb{background:var(--border)}
html.dark .confetti-box{filter:brightness(1.1)}
html.dark .fm-chips .ai-chip.on,html.dark .ai-chip.on{color:#07110D}
html.dark [style*="background:var(--amber)"],html.dark [style*="background:var(--primary)"],html.dark [style*="background:var(--red)"],html.dark [style*="background:var(--blue)"],html.dark [style*="background:var(--purple)"]{color:#07110D!important}
.ux-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;color:var(--text)}
.ux-empty-ic{font-size:2.4rem;line-height:1}
.ux-empty-t{font-weight:800;font-size:1rem}
.ux-empty-s{color:var(--muted);font-size:.84rem;max-width:520px;line-height:1.55}
.ux-empty-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ===== v11.2 — UI profiles: Home tiles, picker, big mode ===== */
.hm-hello{font-size:1.25rem;font-weight:800;margin:4px 0 14px}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.hm-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 14px;min-height:150px;background:var(--card);border:1.5px solid var(--border);border-radius:18px;cursor:pointer;text-align:center;transition:transform .12s,border-color .12s,box-shadow .12s;color:var(--text)}
.hm-tile:hover,.hm-tile:focus-visible{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.hm-ic{font-size:2.6rem;line-height:1}
.hm-t{font-weight:800;font-size:1.02rem}
.hm-s{font-size:.78rem;color:var(--muted);line-height:1.4}
.hm-badge{position:absolute;top:10px;inset-inline-end:12px;background:var(--red);color:#fff;font-weight:800;font-size:.8rem;min-width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;padding:0 7px}
.hm-grid.hm-big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.hm-big .hm-tile{min-height:190px;padding:26px 16px}
.hm-big .hm-ic{font-size:3.4rem}.hm-big .hm-t{font-size:1.25rem}.hm-big .hm-s{font-size:.92rem}
.hm-foot{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px;color:var(--muted);font-size:.8rem}
.ui-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ui-pick-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:start;padding:14px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);cursor:pointer;color:var(--text)}
.ui-pick-card:hover{border-color:var(--primary)}
.ui-pick-card.on{border-color:var(--primary);background:var(--primary-softer)}
.ui-pick-ic{font-size:1.8rem;line-height:1}.ui-pick-t{font-weight:800;font-size:.95rem}.ui-pick-d{font-size:.76rem;color:var(--muted);line-height:1.45}
.ui-pick-compact .ui-pick-card{padding:10px 12px}.ui-pick-compact .ui-pick-ic{font-size:1.4rem}
.nav-emoji,.bn-emoji{font-size:1rem;line-height:1;width:17px;text-align:center}
.bottom-nav .bn-emoji{font-size:1.25rem;width:auto}
html.ui-big{font-size:17px}
html.ui-big .nav-item{padding:12px 12px;font-size:1.02rem;font-weight:600}
html.ui-big .nav-item svg{width:22px;height:22px}
html.ui-big .nav-emoji{font-size:1.3rem;width:22px}
html.ui-big .btn{min-height:46px;font-size:.95rem}
html.ui-big .btn-sm{min-height:40px}
html.ui-big .card{padding:22px}
html.ui-big h1,html.ui-big #pageTitle{font-size:1.5rem}
html.ui-big .kpi .v,html.ui-big .kpi-v{font-size:1.8rem}
html.ui-big input,html.ui-big select,html.ui-big textarea{font-size:1rem;min-height:44px}
html.ui-big .bottom-nav a span,html.ui-big .bottom-nav a{font-size:.78rem}
html.ui-big .sb-help{display:none}
html.ui-lite .sb-help a{display:none}
@media(max-width:900px){.hm-grid{grid-template-columns:repeat(2,1fr);gap:10px}.hm-grid.hm-big{grid-template-columns:repeat(2,1fr)}.hm-tile{min-height:132px;padding:16px 10px}.hm-big .hm-tile{min-height:150px}.hm-ic{font-size:2.2rem}.hm-big .hm-ic{font-size:2.8rem}}

/* ===== v11.3 — form UX ===== */
.form-draft{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--amber-soft);color:var(--amber);border-radius:12px;padding:8px 12px;margin-bottom:12px;font-size:.8rem;font-weight:700}
.form-draft[hidden],.form-error[hidden]{display:none!important}
.form-draft-a{display:flex;gap:6px}
.ffield.invalid input,.ffield.invalid select,.ffield.invalid textarea{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)}
.ferr{font-size:.7rem;color:var(--red);font-weight:700;margin-top:3px}
.form-error{background:var(--red-soft);color:var(--red);border-radius:10px;padding:8px 12px;margin-top:10px;font-size:.8rem;font-weight:700}
@keyframes aeShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.modal.shake{animation:aeShake .35s ease}
.ui-pick-card.suggested{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.pill.pill-primary{background:var(--primary);color:#fff}
html.dark .pill.pill-primary{color:#07110D}
@media(max-width:900px){
  .modal{max-height:94vh;max-height:94dvh;overflow:auto;display:flex;flex-direction:column}
  /* v14.7: a flex column SHRINKS its children to fit max-height before it scrolls — a horizontal strip (video frames, chips) has no min-content height and collapsed to a sliver under the next block. Children keep their size; the modal scrolls. */
  .modal>*{flex-shrink:0}
  .modal .modal-actions{position:sticky;bottom:-22px;background:var(--card);padding:10px 0 8px;margin-top:14px;border-top:1px solid var(--border);z-index:2}
  .modal .modal-actions .btn{flex:1;justify-content:center;min-height:44px}
}

/* ===== v11.5 — mobile fit guard: nothing may be wider than the phone ===== */
.card,.kpi,.hm-tile,.grid-2>*,.grid-3>*,.grid-23>*,.kpi-grid>*,.view>*{min-width:0;max-width:100%}
.card{overflow-wrap:anywhere}
.card svg:not(.no-fit),.card canvas,.card img,.card video{max-width:100%;height:auto}
.card-head h3,.hm-t,.kpi .k-label,.t-sub,.sub,.ux-empty-t,.ux-empty-s{overflow-wrap:anywhere}
td,th{overflow-wrap:break-word}
.kpi .k-value,.k-value{white-space:nowrap;overflow-wrap:normal;max-width:100%} /* a number never breaks mid-digit — the fit guard shrinks it instead */
.legend .li{white-space:normal}
@media(max-width:600px){
  .pill{max-width:100%;white-space:normal;line-height:1.35}
  .kpi .k-value{font-size:clamp(1.05rem,6.2vw,1.55rem)}
  .card-head{gap:8px}
  .card-head .btn{max-width:100%}
  .filters{flex-wrap:wrap}
  .filters>*{max-width:100%}
  .hm-t{font-size:clamp(.92rem,4.6vw,1.25rem)}
}
@media(max-width:480px){
  .top-actions{gap:5px}
  .top-actions>*{flex-shrink:0}
  .top-actions .btn,.top-actions button:not(.menu-fab):not(#userChip){min-width:34px;width:34px;height:34px;padding:0}
  .user-chip{padding:4px 5px}
  .topbar{padding:10px 10px}
}
@media(max-width:380px){#helpBtnTop{display:none}}
/* v13.1 — phones: refresh + language leave the topbar (pull-to-refresh, tab re-tap and the user menu carry them) so back + bell + search + report + Albert always fit */
.um-phone{display:none!important}
@media(max-width:480px){#refreshBtnTop,#langBtn{display:none}.um-phone{display:flex!important}}
[data-fit]{white-space:normal!important;overflow-wrap:anywhere}
/* bar-chart rows: a dozen cycles on a phone become a horizontal scroller instead of a spill */
.bar-row{overflow-x:auto;max-width:100%;scrollbar-width:thin}
.bar-row>*{min-width:44px}
/* topbar: the title never pushes the action buttons off the phone */
.topbar h1#pageTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.topbar h1#pageTitle,.topbar .crumb{display:none}#uxUpdated{display:none}.topbar{gap:6px}}
/* since-your-last-visit card */
.since-card{border-inline-start:4px solid var(--blue);padding:14px 16px}
.since-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.since-head .since-x{margin-inline-start:auto}
.since-lines{display:flex;flex-wrap:wrap;gap:8px}
.since-line{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg);font-size:.82rem;font-weight:600;color:var(--text);cursor:pointer;max-width:100%}
.since-line:hover{border-color:var(--primary)}
.since-n{font-weight:800;color:var(--primary);min-width:1.2em;text-align:center}
html.ui-big .since-line{font-size:.95rem;padding:10px 14px}

/* ===== v11.7 — instant navigation, offline reads, error recovery ===== */
/* A repainted snapshot must LOOK like the screen but never accept a click that
   would run against handlers that no longer exist. */
.view-stale{opacity:.62;transition:opacity .18s}
.view-stale button,.view-stale a,.view-stale input,.view-stale select,.view-stale textarea,.view-stale [data-r],.view-stale [data-a]{pointer-events:none!important}
.view-stale::before{content:'';position:fixed;inset-inline:0;top:0;height:2px;z-index:30;background:linear-gradient(90deg,transparent,var(--primary),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:staleBar 1.1s linear infinite}
@keyframes staleBar{0%{background-position:-40% 0}100%{background-position:140% 0}}
.net-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 14px 0;padding:9px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-size:.82rem;font-weight:600}
.net-banner button{margin-inline-start:auto;color:var(--amber)}
@media(prefers-reduced-motion:reduce){.view-stale::before{animation:none;background:var(--primary);background-size:100% 100%;opacity:.35}}

/* v12.2 — upload progress card (lives on <body>, survives navigation) */
.up-card{position:fixed;inset-inline-end:16px;bottom:16px;width:min(380px,calc(100vw - 32px));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:12px 14px;z-index:215;font-size:.8rem}
@media (max-width:700px){.up-card{inset-inline:12px;bottom:calc(84px + env(safe-area-inset-bottom));width:auto}}
.up-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.up-head b{flex:1;font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.up-bar{height:8px;border-radius:99px;background:var(--border);overflow:hidden;margin:6px 0 10px}
.up-bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:99px;transition:width .25s}
.up-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.up-steps li{display:flex;gap:7px;align-items:center;color:var(--faint)}
.up-steps li.active{color:var(--text);font-weight:700}
.up-steps li.done{color:var(--primary)}
.up-steps .up-ic{width:14px;text-align:center;flex-shrink:0}
.up-steps .up-note{margin-inline-start:auto;font-size:.7rem;font-weight:600;white-space:nowrap}
.up-hint{margin-top:9px;font-size:.7rem;color:var(--muted);line-height:1.45}
.up-card.is-fail .up-bar i{background:var(--red)}
.up-card.is-fail .up-hint{color:var(--red)}

/* v14.2 — system notice bar (maintenance / incident), under the topbar */
.sys-notice{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:.84rem;font-weight:600;border-bottom:1px solid var(--border);background:var(--blue-soft);color:var(--text)}
.sys-notice.lvl-warning{background:var(--amber-soft)}
.sys-notice.lvl-critical{background:var(--red-soft)}
.sys-notice .sn-t{flex:1;min-width:0;overflow-wrap:anywhere}
.sys-notice .sn-u{font-size:.72rem;color:var(--muted);white-space:nowrap}
.sys-notice .sn-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.9rem;padding:2px 6px;min-width:32px;min-height:32px}
@media(max-width:600px){.sys-notice{font-size:.78rem;padding:8px 12px}.sys-notice .sn-u{display:none}}