/* ===== Terre Tani Worker — Mobile First ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#1C1A16;--near:#2A2620;
  --g700:#6B6456;--g500:#A89F93;--g300:#D4CFC8;--g100:#F0ECE5;--g50:#F7F5F0;--white:#FFFFFE;
  --green:#3A7D4E;--gd:#2D6140;--gp:#EAF4EE;
  --red:#C0392B;--rp:#FFF0EE;
  --amber:#E67E22;--ap:#FFF8F0;
  --r:14px;--pill:100px;
}
html{-webkit-tap-highlight-color:transparent}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--g50);color:var(--black);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* === Desktop wrapper — looks like a phone on wide screens === */
@media(min-width:600px){
  body{background:var(--g300);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .screen{max-width:420px;width:100%;background:var(--g50);box-shadow:0 0 40px rgba(0,0,0,.12)}
  #scr-home{max-width:420px;width:100%;box-shadow:0 0 40px rgba(0,0,0,.12);height:auto;min-height:100vh}
  .w-header,.today-banner,.kandang-bar,.action-grid,.tab-panels,.bottom-nav{max-width:420px;width:100%;margin-left:auto;margin-right:auto}
  .w-modal-content{max-width:420px}
  #w-toast{max-width:380px}
}

/* === Screens === */
.screen{display:none;min-height:100vh;overflow:hidden}
.screen.active{display:flex;flex-direction:column;height:100vh;width:100%}
#scr-home{position:relative;flex-direction:column;width:100%;min-height:100vh;display:none;}
#scr-home.active{display:flex;}
.worker-body{flex:1;display:flex;flex-direction:column;overflow:hidden;width:100%}
.tab-panels{flex:1;overflow-y:auto;width:100%}

/* === Login === */
.login-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:32px 24px;text-align:center}
.login-logo{font-size:56px;margin-bottom:8px}
.login-wrap h1{font-size:22px;font-weight:800;color:var(--black);margin-bottom:4px}
.login-sub{font-size:13px;color:var(--g500);font-weight:600;margin-bottom:28px}
.login-field{width:100%;max-width:300px;text-align:left;margin-bottom:14px}
.login-field label{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:block}
.login-field input{width:100%;padding:14px 16px;border-radius:var(--r);border:1.5px solid var(--g300);font-family:inherit;font-size:16px;font-weight:600;outline:none;transition:border .2s}
.login-field input:focus{border-color:var(--green)}
.err-msg{font-size:12px;color:var(--red);font-weight:600;margin-top:10px;min-height:18px}
.remember{font-size:12px;color:var(--g500);font-weight:600;margin-top:12px;display:flex;align-items:center;gap:6px;cursor:pointer}
.remember input{width:16px;height:16px}

/* === Buttons === */
.btn-big{width:100%;max-width:300px;padding:16px;border-radius:var(--r);border:none;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.btn-big.green{background:var(--green);color:#fff}
.btn-big.green:hover{background:var(--gd)}
.btn-big.green:active{transform:scale(.98)}
.btn-icon{background:none;border:none;font-size:20px;cursor:pointer;padding:8px;border-radius:50%;transition:all .15s;color:inherit;display:flex;align-items:center;justify-content:center}
.btn-icon:hover{background:rgba(255,255,255,0.1)}
.btn-icon:active{background:rgba(255,255,255,0.2);transform:scale(.92)}
#btn-logout{color:rgba(255,255,255,0.85);margin-right:-8px}
#btn-logout:hover{color:#fff;background:rgba(192,57,43,0.15)}
#btn-logout:active{background:rgba(192,57,43,0.3)}

/* === Worker Header === */
.w-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;background:var(--near);color:#fff}
.w-header-left{display:flex;align-items:center;gap:12px}
.w-avatar{font-size:28px}
.w-name{font-size:15px;font-weight:700}
.w-role{font-size:11px;color:var(--g300);font-weight:500}
.online-dot{font-size:9px}
.online-dot.online{color:#4CAF50}
.online-dot.offline{color:var(--red)}

/* === Today Banner === */
.today-banner{background:var(--green);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.today-date{font-size:13px;font-weight:700}
.today-stats{font-size:12px;font-weight:600;opacity:.85}
.sep{margin:0 4px}
.queue-badge{background:rgba(255,255,255,.2);padding:2px 10px;border-radius:var(--pill);font-size:11px}

/* === Kandang Bar === */
.kandang-bar{width:100%;padding:14px 20px;background:#fff;border-bottom:1.5px solid var(--g100);box-sizing:border-box}
.kandang-bar label{font-size:10px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:block}
.kandang-bar select{width:100%;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--g300);font-family:inherit;font-size:14px;font-weight:600;outline:none;background:#fff;-webkit-appearance:none;appearance:none}

/* === Action Grid === */
.action-grid{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px;box-sizing:border-box}
.action-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border-radius:16px;border:1.5px solid var(--g100);background:#fff;cursor:pointer;transition:all .15s;font-family:inherit}
.action-btn:active{background:var(--gp);border-color:var(--green);transform:scale(.95)}
.action-icon{font-size:32px;line-height:1}
.action-btn span{font-size:11px;font-weight:700;color:var(--g700)}

/* === Bottom Nav === */
.bottom-nav{position:static;width:100%;display:flex;background:#fff;border-top:1.5px solid var(--g100);padding:10px 0;padding-bottom:calc(max(14px, env(safe-area-inset-bottom)) + 4px);z-index:100}
.bnav{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;font-family:inherit;font-size:18px;cursor:pointer;padding:8px 0;color:var(--g500);transition:color .15s}
.bnav span{font-size:11px;font-weight:600;white-space:nowrap}
.bnav.active{color:var(--green)}
.bnav.active span{font-weight:700}

/* === Tab Panels === */
.tab-panel{display:none;padding:16px 20px}
.tab-panel.active{display:block}
.tab-title{font-size:16px;font-weight:800;margin-bottom:14px}

/* === List Items === */
.list-container{display:flex;flex-direction:column;gap:10px}
.list-item{background:#fff;border-radius:var(--r);padding:14px 16px;border:1.5px solid var(--g100)}
.list-item.overdue{border-color:var(--red);background:var(--rp)}
.list-item .li-title{font-size:14px;font-weight:700;margin-bottom:4px}
.list-item .li-sub{font-size:12px;color:var(--g500);font-weight:500}
.list-item .li-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 10px;border-radius:var(--pill);margin-top:6px}
.badge-green{background:var(--gp);color:var(--gd)}
.badge-amber{background:var(--ap);color:var(--amber)}
.badge-red{background:var(--rp);color:var(--red)}
.btn-complete{margin-top:8px;padding:8px 16px;border-radius:var(--r);border:none;background:var(--green);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.btn-complete:active{background:var(--gd)}
.empty-state{text-align:center;padding:40px 20px;color:var(--g500);font-size:13px;font-weight:600}
.empty-state .ei{font-size:40px;margin-bottom:8px}

/* === Modal === */
.w-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:16px}
.w-modal.open{display:flex}
.w-modal-content{background:#fff;border-radius:20px;width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;margin-top:auto;margin-bottom:auto}
.w-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1.5px solid var(--g100)}
.w-modal-header h3{font-size:16px;font-weight:800}
.w-modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.w-modal-footer{padding:14px 20px;padding-bottom:max(14px,env(safe-area-inset-bottom));border-top:1.5px solid var(--g100)}
.w-modal-footer .btn-big{max-width:100%}

@media(min-width:600px){
  .w-modal{padding:32px}
  .w-modal-content{border-radius:20px}
}

/* === Form Fields (modal) === */
.w-field{margin-bottom:14px}
.w-field label{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:block}
.w-field input,.w-field select,.w-field textarea{width:100%;padding:14px;border-radius:var(--r);border:1.5px solid var(--g300);font-family:inherit;font-size:15px;font-weight:600;outline:none}
.w-field input:focus,.w-field select:focus,.w-field textarea:focus{border-color:var(--green)}
.w-field textarea{resize:vertical;min-height:60px}
.w-field select{-webkit-appearance:none;appearance:none;background:#fff}

/* === Kondisi selector === */
.kondisi-btns{display:flex;gap:8px}
.kondisi-btn{flex:1;padding:12px;border-radius:var(--r);border:1.5px solid var(--g300);background:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s}
.kondisi-btn.active{border-color:var(--green);background:var(--gp);color:var(--gd)}
.kondisi-btn.warn.active{border-color:var(--amber);background:var(--ap);color:var(--amber)}
.kondisi-btn.danger.active{border-color:var(--red);background:var(--rp);color:var(--red)}

/* === Toast === */
#w-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-60px);background:var(--near);color:#fff;padding:12px 24px;border-radius:var(--r);font-size:13px;font-weight:700;z-index:999;opacity:0;transition:all .3s;white-space:nowrap;max-width:90vw;text-align:center}
#w-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#w-toast.error{background:var(--red)}
#w-toast.success{background:var(--green)}

/* === Foto Preview === */
.foto-preview{width:100%;max-height:200px;object-fit:cover;border-radius:var(--r);margin-top:8px}
input[type="file"]{font-size:13px;color:var(--g700)}

/* === Scrollbar === */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:4px}
.bnav span{white-space:nowrap}