/* ═══════════════════════════════════════════════════ MJM NURSERY AI — MAINTENANCE SYSTEM v2.1 styles.css · MJM Nursery Sdn Bhd (663951-U) ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --green: #0d7a47; --green-hover: #0a6038; --green-light: #dcf5ea; --green-mid: #a8e0c0; --green-text: #085c33; --green-bg: #f0faf4; --red: #c0392b; --red-bg: #fef2f2; --red-border: #fca5a5; --gold: #b45309; --gold-bg: #fffbeb; --gold-border: #fcd34d; --blue: #1d4ed8; --blue-bg: #eff6ff; --blue-border: #93c5fd; --bg-page: #f8fafb; --bg-white: #ffffff; --bg-row-alt: #fafcfb; --border: #d1ddd6; --border-strong: #b0c4ba; --border-focus: #0d7a47; --text-head: #0a1f14; --text-body: #1e3a2a; --text-muted: #4d7060; --text-faint: #8aaa96; --shadow-sm: 0 1px 3px rgba(0,50,25,0.08), 0 1px 2px rgba(0,50,25,0.05); --shadow-md: 0 3px 10px rgba(0,50,25,0.1), 0 1px 4px rgba(0,50,25,0.06); --shadow-lg: 0 8px 32px rgba(0,50,25,0.13), 0 2px 8px rgba(0,50,25,0.07); --r-sm: 5px; --r-md: 9px; --r-lg: 13px; --r-xl: 18px; --font: 'Outfit', sans-serif; } html { font-size: 14px; overflow-y: scroll; scrollbar-gutter: stable; } body { font-family: var(--font); background: var(--bg-page); color: var(--text-body); line-height: 1.5; } /* ─── APP VIEW ─── */ #view-app { display: flex; flex-direction: column; min-height: 100vh; } /* ─── TOPBAR ─── */ .topbar{background:var(--bg-white);border-bottom:2px solid var(--green);box-shadow:var(--shadow-md);position:sticky;top:0;z-index:100;} .topbar-inner{display:flex;align-items:center;gap:16px;padding:0 28px;height:60px;width:100%;max-width:1800px;margin:0 auto;} .logo-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0;} .logo-mark{width:36px;height:36px;border-radius:var(--r-sm);background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(13,122,71,0.35);} .logo-mark svg{width:20px;height:20px;} .logo-name{font-size:14px;font-weight:700;letter-spacing:1.5px;color:var(--green-text);text-transform:uppercase;line-height:1.2;} .logo-sub{font-size:10px;color:var(--text-muted);letter-spacing:0.5px;} .ai-chip{font-size:9px;font-weight:700;letter-spacing:1px;background:var(--green);color:#fff;padding:2px 7px;border-radius:99px;vertical-align:middle;margin-left:4px;} .topbar-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;} .top-ctrl{display:flex;align-items:center;gap:7px;} .top-ctrl label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;} select.top-sel{height:34px;padding:0 30px 0 11px;appearance:none; background:var(--bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230d7a47' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-head);cursor:pointer;outline:none;transition:border-color 0.15s,box-shadow 0.15s;} select.top-sel:hover{border-color:var(--green);} select.top-sel:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(13,122,71,0.14);} select.top-sel option{background:#fff;} input.top-sel{height:34px;padding:0 11px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-head);outline:none;background:var(--bg-white);cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s;} input.top-sel:hover{border-color:var(--green);} input.top-sel:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(13,122,71,0.14);} button.top-sel{height:34px;padding:0 11px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-head);background:var(--bg-white);cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s;white-space:nowrap;} button.top-sel:hover{border-color:var(--green);} button.top-sel:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(13,122,71,0.14);} .topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;} .nursery-pill{font-size:11px;font-weight:700;color:var(--green-text);background:var(--green-light);border:1.5px solid var(--green-mid);padding:3px 12px;border-radius:99px;letter-spacing:0.5px;} .lang-toggle{display:inline-flex;border:1.5px solid var(--green-mid);border-radius:99px;overflow:hidden;background:var(--green-light);} .lang-seg{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:0.5px;padding:4px 12px;border:none;background:transparent;color:var(--green-text);cursor:pointer;transition:background 0.15s,color 0.15s;} .lang-seg.active{background:var(--green);color:#fff;} .lang-seg:not(.active):hover{background:var(--green-mid);} .live-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:0.5px;} .live-dot{width:7px;height:7px;border-radius:50%;background:#00cc55;box-shadow:0 0 6px rgba(0,204,85,0.7);animation:pulse 2s infinite;} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}} .btn-pdf{font-family:var(--font);font-size:11px;font-weight:600;color:var(--green-text);background:var(--green-light);border:1.5px solid var(--green-mid);border-radius:var(--r-sm);padding:5px 13px;cursor:pointer;transition:all 0.15s;} .btn-pdf:hover{background:var(--green);color:#fff;border-color:var(--green);} /* ─── PAGE & TABS ─── */ .page{width:100%;max-width:1720px;margin:0 auto;padding:20px 16px;} @media(min-width:768px){.page{padding:20px 22px;}} .tabs-bar{display:flex;gap:4px;margin-bottom:22px;background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:5px;box-shadow:var(--shadow-sm);width:fit-content;} .tab-btn{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:0.3px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;padding:8px 18px;border-radius:var(--r-sm);transition:all 0.14s;} .tab-btn:hover{color:var(--text-body);background:var(--green-bg);} .tab-btn.active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(13,122,71,0.3);} .tab-panel{display:none;animation:fadein 0.18s ease;} .tab-panel.active{display:block;} @keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ─── SECTION HEADER ─── */ .section-hdr{background:var(--bg-white);border:1.5px solid var(--border);border-left:4px solid var(--green); border-radius:var(--r-md);padding:14px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;} .co-name{font-size:15px;font-weight:700;color:var(--text-head);letter-spacing:0.3px;} .nursery-line{font-size:11px;color:var(--text-muted);margin-top:1px;} .section-badge{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase; color:var(--green-text);background:var(--green-light);border:1.5px solid var(--green-mid);padding:4px 14px;border-radius:99px;} /* ─── CARD ─── */ .card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;} /* ─── TOOLBAR & BUTTONS ─── */ .toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;} .btn{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:0.2px;border-radius:var(--r-sm); border:1.5px solid var(--border);background:var(--bg-white);color:var(--text-muted);padding:7px 14px;cursor:pointer;transition:all 0.14s;} .btn:hover{border-color:var(--green);color:var(--green-text);background:var(--green-bg);} .btn-primary{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 6px rgba(13,122,71,0.25);} .btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff;} .btn-sm{padding:4px 10px;font-size:11px;} .btn-danger{color:var(--red);border-color:var(--red-border);} .btn-danger:hover{background:var(--red-bg);border-color:var(--red);color:var(--red);} select.filter-sel{height:36px;padding:0 30px 0 11px;appearance:none; background:var(--bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230d7a47' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:12px;font-weight:500;color:var(--text-body);cursor:pointer;outline:none;transition:border-color 0.14s;} select.filter-sel:hover,select.filter-sel:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(13,122,71,0.1);} select.filter-sel option{background:#fff;} input.filter-sel{background:var(--bg-white);color:var(--text-body);font-family:var(--font);cursor:text;} input.filter-sel::placeholder{color:var(--text-faint);} input.filter-sel:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(13,122,71,0.1);} /* ─── IN-HEADER DROPDOWNS ─── */ .plot-col-hdr{background:var(--green-text) !important;color:#fff !important;font-size:13px !important;letter-spacing:1px;min-width:66px;padding-left:16px !important;vertical-align:middle;text-align:center;} th.hdr-input-cell{padding:7px 8px !important;vertical-align:middle;white-space:nowrap;border-bottom:2px solid var(--border-strong) !important;min-width:130px;} th.p-bg {background:#dcfce7 !important;} th.d-bg {background:#fffbeb !important;} th.sticker-bg{background:#f0f9ff !important;} th.f-bg {background:#eff6ff !important;} th.f-bg-light{background:#f8fbff !important;} select.th-sel{width:100%;height:28px;padding:0 22px 0 7px; background:rgba(255,255,255,0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230d7a47' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center; border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:var(--font);font-size:11px;font-weight:600;color:var(--text-head); appearance:none;cursor:pointer;outline:none;transition:border-color 0.12s,box-shadow 0.12s;display:block;margin-bottom:5px;} select.th-sel:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px rgba(13,122,71,0.15);} select.th-sel option{background:#fff;} .th-dose{display:flex;align-items:center;gap:5px;} .th-dose-inp{width:54px;height:26px;padding:0 5px;text-align:center;background:rgba(255,255,255,0.92);color:var(--text-head); border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:var(--font);font-size:11px;font-weight:700;outline:none;transition:border-color 0.12s;} .th-dose-inp:focus{border-color:var(--border-focus);} .th-dose-unit{font-size:10px;font-weight:600;color:var(--text-muted);white-space:nowrap;} .th-flex{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;} .th-title{white-space:normal;overflow-wrap:anywhere;} .th-actions{display:inline-flex;gap:6px;flex-shrink:0;} .th-action-btn{font-family:var(--font);font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap; border:1.5px solid rgba(255,255,255,0.45);background:rgba(255,255,255,0.12);color:#fff;transition:all 0.14s;letter-spacing:0.3px;} .th-action-btn:hover{background:rgba(255,255,255,0.28);} .th-action-danger{border-color:rgba(255,150,150,0.45);color:#fecaca;} .th-action-danger:hover{background:rgba(255,80,80,0.2);} /* ─── TABLES ─── */ .tbl-wrap{overflow-x:auto;} table{width:100%;border-collapse:collapse;font-size:12px;} .sched-table thead th{background:#f2f7f4;color:var(--text-muted);font-weight:700;font-size:12px;letter-spacing:0.8px;text-transform:uppercase;padding:12px 14px;border-bottom:2px solid var(--border-strong);text-align:center;vertical-align:middle;white-space:normal;line-height:1.35;} .sched-table thead th.th-left{text-align:left;} .sched-table tbody td{padding:11px 14px;border-bottom:1px solid #eaf1ed;text-align:center;vertical-align:middle;color:var(--text-body);font-size:13px;white-space:normal;word-break:break-word;} .sched-table tbody tr:last-child td{border-bottom:none;} .sched-table tbody tr:nth-child(even) td{background:var(--bg-row-alt);} .sched-table tbody tr:hover td{background:var(--green-bg);} th.wk-th{background:var(--green-text) !important;color:#fff !important;font-size:13px !important;letter-spacing:0.5px !important;vertical-align:middle;} th.p-th{background:#dcfce7 !important;color:#166534 !important;border-bottom:2px solid #86efac !important;} th.d-th{background:var(--gold-bg) !important;color:#92400e !important;border-bottom:2px solid var(--gold-border) !important;} th.f-th{background:var(--blue-bg) !important;color:#1e40af !important;border-bottom:2px solid var(--blue-border) !important;} td.chem-td{font-size:10px;color:var(--text-muted);background:#f7faf8;padding:5px 10px;font-weight:600;border-bottom:1px solid var(--border) !important;} td.plot-td{font-weight:700;font-size:14px;color:var(--green-text);text-align:center;vertical-align:middle;padding-left:16px;border-right:2px solid var(--border);background:#f7faf8;} /* Real CSS-drawn 20px check box. The cell has no text — the box + tick are drawn entirely from the .ticked class, which every render/toggle sets. */ td.check-td{position:relative;cursor:pointer;font-size:0;line-height:0;padding:9px 6px;text-align:center;vertical-align:middle;transition:background 0.12s;user-select:none;} td.check-td::before{content:"";display:inline-block;width:20px;height:20px;box-sizing:border-box;border:2px solid #b8ccc0;border-radius:5px;background:#fff;vertical-align:middle;transition:border-color 0.12s,background 0.12s;} td.check-td:hover{background:var(--green-light);} td.check-td:hover::before{border-color:var(--green);} td.check-td.ticked::before{border-color:var(--green);background:var(--green);} td.check-td.ticked::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-60%) rotate(45deg);} td.check-td.modified::before{border-color:#f0b429;background:#fef3c7;} td.check-td.modified.ticked::before{border-color:#d97706;background:#d97706;} tr.jumlah-tr td{font-weight:700;font-size:12.5px;letter-spacing:0.4px;background:var(--green-light) !important;color:var(--green-text) !important;border-top:2px solid var(--green-mid);text-transform:uppercase;vertical-align:middle;white-space:normal;line-height:1.3;} /* Fixed layout, so the colgroup in the HTML decides the columns and the content never does. Auto layout gave every nursery a different table — UNN 2's longer chemical names squeezed the date column until the year wrapped, BNN's did not — and two screens of the same thing that are not the same shape cannot be read side by side. min-width is what keeps that promise on a narrow screen: below it the wrapper scrolls (.tbl-wrap is overflow-x:auto) rather than the columns quietly collapsing back into whatever fits. */ .rec-table{table-layout:fixed;width:100%;min-width:1373px;} .rec-table thead th{background:#f2f7f4;color:var(--text-muted);font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:11px 14px;border-bottom:2px solid var(--border-strong);white-space:nowrap;} .rec-table thead th.th-left{text-align:left;} .rec-table tbody td{padding:10px 14px;border-bottom:1px solid #eaf1ed;vertical-align:middle;} /* The date is one line, always. It is the column that gave the game away — "07 Aug 2026" over two lines in one nursery and one in another — and the fixed width above is chosen to hold it, so saying so here means a future change to that width fails loudly (an overflow) instead of quietly re-wrapping. Batch, Quantity and Audit are short and fixed-shape for the same reason. */ .rec-table tbody td:nth-child(1), .rec-table tbody td:nth-child(5), .rec-table tbody td:nth-child(6), .rec-table tbody td:nth-child(9){white-space:nowrap;} /* Work type and remark are free text and may run long: wrap them rather than letting them spill over the column beside them. */ .rec-table tbody td:nth-child(2), .rec-table tbody td:nth-child(8){overflow-wrap:anywhere;} /* A job worked over more than one day carries them all. The column is sized for "01 & 02 Jul 2026" on one line; a rarer three-day job is allowed the second line rather than being cut off, which is why this one opts back out of the nowrap above. Underlined with text-decoration rather than a border: a border-bottom is a box, and a 1px box under one row's date made that row a pixel taller than its neighbours. Rows of different heights for no visible reason is the thing this table has just been straightened out of. */ .rec-table tbody td .date-multi{white-space:normal;cursor:help; text-decoration:underline dotted var(--green-mid);text-underline-offset:3px;} .rec-table tbody tr:last-child td{border-bottom:none;} .rec-table tbody tr:nth-child(even) td{background:var(--bg-row-alt);} .rec-table tbody tr:hover td{background:var(--green-bg);} /* ─── PILLS ─── */ .pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:0.3px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;} .pill-red {background:var(--red-bg); color:var(--red); border:1.5px solid var(--red-border);} .pill-green {background:#dcfce7; color:#166534; border:1.5px solid #86efac;} .pill-blue {background:var(--blue-bg); color:var(--blue);border:1.5px solid var(--blue-border);} .pill-amber {background:var(--gold-bg); color:var(--gold);border:1.5px solid var(--gold-border);} .pill-yellow{background:#fefce8; color:#713f12; border:1.5px solid #fde047;} /* ─── METRICS ─── */ .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px;} .metric-card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow-sm);border-top:3px solid transparent;} .metric-card.mc-green{border-top-color:var(--green);} .metric-card.mc-amber{border-top-color:#d97706;} .metric-card.mc-red {border-top-color:var(--red);} .metric-card.mc-blue {border-top-color:var(--blue);} .mc-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:7px;} .mc-value{font-size:28px;font-weight:700;line-height:1;color:var(--text-head);} .mc-value.g{color:var(--green);} .mc-value.a{color:#d97706;} .mc-value.r{color:var(--red);} .mc-value.b{color:var(--blue);} .chk-btn{font-size:18px;cursor:pointer;transition:transform 0.1s;display:inline-block;text-align:center;width:100%;} .chk-btn:hover{transform:scale(1.25);} .chk-on{color:var(--green);} .chk-off{color:#c8dbd2;} /* ─── CHARTS ─── */ .chart-block{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:16px 8px;margin-bottom:16px;box-shadow:var(--shadow-sm);} .chart-block .chart-head{padding:0 6px;} .chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .chart-title{font-size:12px;font-weight:700;color:var(--text-body);letter-spacing:0.5px;text-transform:uppercase;} .chart-legend{display:flex;gap:16px;} .leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);font-weight:500;} .leg-sq{width:11px;height:11px;border-radius:3px;} .chart-wrap{position:relative;height:240px;} .chart-wrap-sm{position:relative;height:185px;} /* ─── MODAL ─── */ .modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(5,20,10,0.45);backdrop-filter:blur(5px);align-items:center;justify-content:center;} .modal-overlay.open{display:flex;} .modal{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:480px;max-width:95vw;max-height:92vh;overflow-y:auto;animation:modal-in 0.2s ease;} @keyframes modal-in{from{opacity:0;transform:translateY(-12px) scale(0.97)}to{opacity:1;transform:none}} .modal-top{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1.5px solid var(--border);} .modal-title{font-size:15px;font-weight:700;color:var(--text-head);} .modal-close{background:none;border:none;font-size:22px;color:var(--text-faint);cursor:pointer;line-height:1;transition:color 0.14s;padding:0 2px;} .modal-close:hover{color:var(--red);} .modal-body{padding:18px 24px;} .modal-footer{padding:14px 24px 18px;border-top:1.5px solid var(--border);display:flex;gap:8px;justify-content:flex-end;} .frow{margin-bottom:14px;} .frow label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;} .frow input,.frow select,.frow textarea{width:100%;height:38px;padding:0 12px;background:var(--bg-page);color:var(--text-head);border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font);font-size:13px;outline:none;transition:border-color 0.14s,box-shadow 0.14s;} .frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--border-focus);background:#fff;box-shadow:0 0 0 3px rgba(13,122,71,0.12);} .frow textarea{height:72px;padding:10px 12px;resize:vertical;} .frow select{appearance:none;cursor:pointer;} .frow select option{background:#fff;} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} /* Checkbox label in PDF modal */ .chk-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-body);cursor:pointer;font-weight:500;} .chk-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--green);} /* ─── FOOTER ─── */ .app-footer{width:100%;max-width:1800px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text-faint);letter-spacing:0.5px;border-top:1.5px solid var(--border);} .footer-brand{display:flex;align-items:center;gap:6px;color:var(--green-text);font-weight:700;font-size:11px;} /* ─── SCROLLBAR ─── */ ::-webkit-scrollbar{width:5px;height:5px;} ::-webkit-scrollbar-track{background:var(--bg-page);} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:var(--green);} /* ─── ANALYTICS GRID ─── */ .analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .analytics-full { grid-column: 1 / -1; } .metric-card { min-width: 140px; flex-shrink: 0; } /* ─── CHEMICAL CALCULATOR ─── */ .calc-plot-btn{font-family:var(--font);font-size:12px;font-weight:600;padding:8px 6px;border:1.5px solid var(--border);background:#fff;color:var(--text-muted);border-radius:var(--r-sm);cursor:pointer;transition:all .12s;text-align:center;} .calc-plot-btn:hover{border-color:var(--green);background:var(--green-bg);color:var(--green-text);} .calc-plot-btn.ticked{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 6px rgba(13,122,71,0.25);} .calc-plot-btn.disabled{opacity:0.4;cursor:not-allowed;} .calc-result-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-md,8px);padding:14px 16px;} .calc-result-card .lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;font-weight:700;letter-spacing:.5px;margin-bottom:6px;} .calc-result-card .val{font-size:24px;font-weight:700;color:var(--green-text);line-height:1.1;} .calc-result-card.highlight{background:var(--green-bg);border-color:var(--green);} .calc-result-card.highlight .val{color:#c2410c;} /* ─── MONTH/YEAR WHEEL PICKER ─── */ .wheel-overlay{display:none;position:fixed;inset:0;z-index:600;background:rgba(5,20,10,0.45);backdrop-filter:blur(4px);align-items:center;justify-content:center;} .wheel-overlay.open{display:flex;} .wheel-panel{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:300px;max-width:92vw;overflow:hidden;animation:modal-in 0.18s ease;} .wheel-cols{position:relative;display:flex;height:200px;padding:0 10px;} .wheel-col{flex:1;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding:80px 0;} .wheel-col::-webkit-scrollbar{display:none;} .wheel-item{height:40px;line-height:40px;text-align:center;font-size:15px;font-weight:600;color:#9ab0a3;user-select:none;cursor:pointer;transition:color .12s,font-size .12s;} .wheel-item.sel{color:var(--text-head);font-weight:700;font-size:17px;} .wheel-band{position:absolute;left:14px;right:14px;top:80px;height:40px;border-top:2px solid var(--green);border-bottom:2px solid var(--green);pointer-events:none;} .wheel-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--border);} .wheel-actions button{height:46px;border:none;background:#fff;font-family:var(--font);font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:background .12s;} .wheel-actions button:last-child{color:var(--green-text);border-left:1.5px solid var(--border);} .wheel-actions button:hover{background:var(--green-bg);} /* ─── RESTRUCTURED LAYOUT: sub-tabs, big metrics, nursery circles ─── */ .subtabs-bar{display:flex;gap:4px;margin-bottom:18px;background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:5px;box-shadow:var(--shadow-sm);width:fit-content;max-width:100%;flex-wrap:wrap;} .subtab-btn{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;padding:8px 16px;border-radius:var(--r-sm);transition:all .14s;white-space:nowrap;} .subtab-btn:hover{color:var(--text-body);background:var(--green-bg);} .subtab-btn.active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(13,122,71,.3);} /* A sub-view must never change the page width, or the header/metrics above it appear to rescale when switching between List and Analytics. Charts are responsive, so clipping any overflow here is safe. */ .recview{display:none;animation:fadein .18s ease;min-width:0;width:100%;max-width:100%;overflow-x:hidden;} .recview .chart-block{min-width:0;max-width:100%;} .recview canvas{max-width:100% !important;} .recview.active{display:block;} .sched-panel{display:none;animation:fadein .18s ease;} .sched-panel.active{display:block;} /* ─── SCHEDULE BLOCKS ─── The four programs, stacked. Each one is a bordered slab with its own header rather than a tab: the point is that you can see there are four and how much of each is set, without clicking anything. */ .sched-jump{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;} .sched-jump button{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.3px; color:var(--text-muted);background:var(--bg-white);border:1.5px solid var(--border); border-radius:99px;padding:6px 14px;cursor:pointer;transition:all .14s;} .sched-jump button:hover{color:var(--green-text);border-color:var(--green);background:var(--green-bg);} .sched-block{border:1.5px solid var(--border);border-left:4px solid var(--green); border-radius:var(--r-md);background:var(--bg-white);box-shadow:var(--shadow-sm); margin-bottom:16px;overflow:hidden;scroll-margin-top:96px;} /* The whole header is the toggle, so there is no small target to hunt for. */ .sched-block-hdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%; font-family:var(--font);text-align:left;background:transparent;border:none; padding:14px 20px;cursor:pointer;transition:background .14s;} .sched-block-hdr:hover{background:var(--green-bg);} .sched-caret{font-size:11px;color:var(--green-text);transition:transform .16s;flex-shrink:0;} .sched-block.collapsed .sched-caret{transform:rotate(-90deg);} .sched-name{font-size:15px;font-weight:700;color:var(--text-head);letter-spacing:.3px;} /* Pushed hard right, so the four counts line up down the page and read as a column even though each header is a different width. */ .sched-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted); letter-spacing:.3px;white-space:nowrap;} .sched-count.is-set{color:var(--green-text);} .sched-block-body{padding:0 16px 16px;} .sched-block.collapsed .sched-block-body{display:none;} /* The grid already has the slab's border around it. */ .sched-block-body .card{border:none;box-shadow:none;border-radius:0;} /* A schedule grid is 52 plots by up to eight columns of tick boxes, and every pixel of row padding is another 52 of scrolling. Tighter than the general table, and only inside the schedule blocks — the Work Record and Worker Record tables are read, not scanned down, and keep their room. */ .sched-block .sched-table tbody td{padding:3px 10px;font-size:12px;} .sched-block .sched-table td.plot-td{font-size:12.5px;padding:3px 10px 3px 14px;} .sched-block .sched-table td.check-td{padding:3px 6px;} .sched-block .sched-table td.check-td::before{width:17px;height:17px;border-width:1.5px;border-radius:4px;} .sched-block .sched-table td.check-td.ticked::after{width:5px;height:9px;border-width:0 2px 2px 0;} .sched-block .sched-table tr.jumlah-tr td{padding:5px 10px;font-size:11.5px;} /* ── When a round runs ──────────────────────────────────────────────────── The column title is the dates, and clicking it sets them. It has to read as a title first and a button second — a header row of obvious buttons would look like four things to press before it looked like a schedule. */ .period-btn{font:inherit;font-size:13px;font-weight:700;letter-spacing:.5px;color:inherit; background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,.45); padding:1px 2px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s;} .period-btn:hover{background:rgba(255,255,255,.14);border-bottom-color:#fff;} /* A round somebody has dated, marked so it is obvious which columns are still on the default week. */ .period-btn.period-set{border-bottom-style:solid;border-bottom-color:#a8e0c0;} .period-btn.period-set::after{content:"•";margin-left:5px;font-size:11px;color:#a8e0c0;} /* Weeding's header sits on the pale strip, not the dark one. */ .p-th .period-btn{border-bottom-color:var(--border-strong);} .p-th .period-btn:hover{background:rgba(13,122,71,.09);border-bottom-color:var(--green);} .period-pop{position:absolute;z-index:200;min-width:236px;background:var(--bg-white); border:1.5px solid var(--border);border-radius:var(--r-md);box-shadow:0 18px 46px rgba(0,0,0,.22); padding:14px;display:flex;flex-direction:column;gap:9px;} .period-pop-h{font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase; color:var(--green-text);} .period-pop label{display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:12px;font-weight:700;color:var(--text-muted);} .period-pop input{height:32px;padding:0 8px;font-family:inherit;font-size:13px; border:1.5px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--text-head);} .period-pop input:focus{outline:none;border-color:var(--green-mid);box-shadow:0 0 0 3px #eaf4ee;} .period-pop-f{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end; margin-top:3px;padding-top:10px;border-top:1px solid var(--border);} .period-pop-f .btn{font-size:11.5px;padding:6px 12px;} /* Big headline metric cards on the Work Record view */ /* Fixed 4-up grid (not auto-fit) so the headline cards keep the SAME size and layout whichever sub-view is open - the analytics charts change the available width, which previously made the cards reflow 4-up -> 3-up and resize. */ .metrics-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px;} @media (max-width:900px){ .metrics-big{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:480px){ .metrics-big{grid-template-columns:1fr;} } .metrics-big .metric-card{padding:22px 24px;border-top-width:4px;} .metrics-big .mc-label{font-size:11px;letter-spacing:1.2px;margin-bottom:10px;} .metrics-big .mc-value{font-size:44px;line-height:1;} /* Page header — one bigger line: "Batu Niah Nursery — Apr 2026" */ .page-hdr{margin-bottom:14px;} .page-hdr-title{font-size:26px;font-weight:700;color:var(--text-head);letter-spacing:.2px;line-height:1.2;} /* Nursery circle picker in the topbar */ .nursery-circles{display:flex;align-items:center;gap:7px;} .nursery-circle{width:46px;height:46px;border-radius:50%;flex-shrink:0;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--green-text);background:var(--bg-white);border:2px solid var(--green-mid);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;} .nursery-circle:hover{background:var(--green-light);border-color:var(--green);transform:translateY(-1px);} .nursery-circle.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 3px 10px rgba(13,122,71,.35);} /* ─── WORK MAINTENANCE LIST — large, readable type ─── Single source of truth: the row template carries no inline font-size. */ #recview-list .rec-table thead th{font-size:11px;padding:11px 14px;letter-spacing:.6px;} #recview-list .rec-table tbody td{font-size:14px;padding:11px 14px;} #recview-list .rec-table .rec-group-cell{font-size:14px;} #recview-list .rec-table .rec-group-sub{font-size:12px;} #recview-list .rec-table .pill{font-size:12px;padding:5px 12px;max-width:none;} #recview-list .rec-table .chk-btn{font-size:21px;} #recview-list .rec-table .btn-sm{font-size:12px;padding:6px 12px;} #recview-list .rec-table .rec-checked-badge{font-size:11px;padding:4px 10px;} #recview-list .toolbar .filter-sel{font-size:13px;height:38px;} #recview-list .toolbar .btn{font-size:13px;padding:9px 16px;} #recview-list .toolbar input.filter-sel{height:38px;font-size:13px;} /* ─── CHECKED (verified) ROWS ─── */ .btn-check{color:#065f46 !important;border-color:#a7f3d0 !important;background:#ecfdf5 !important;} .btn-check:hover{background:var(--green) !important;color:#fff !important;border-color:var(--green) !important;} .rec-checked-badge{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.5px;text-transform:uppercase; color:#065f46;background:#ecfdf5;border:1.5px solid #a7f3d0;border-radius:999px;padding:6px 14px;margin-right:6px;vertical-align:middle;} .chk-btn.chk-locked{cursor:not-allowed;opacity:.55;} /* ─── AUDIT VERDICT ─── The Auditor Portal's answer for this job, in that portal's own two colours so the same verdict looks the same on both screens. Read-only: deliberately not a button, because the audit is not conducted here. */ .audit-pill{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.4px; text-transform:uppercase;border-radius:999px;padding:5px 12px;white-space:nowrap; vertical-align:middle;} .audit-ok {color:#065f46;background:#ecfdf5;border:1.5px solid #a7f3d0;} .audit-bad{color:#b91c1c;background:#fff1f1;border:1.5px solid #fecaca;} #recview-list .rec-table .audit-pill{font-size:11px;padding:4px 10px;} /* ─── DOSAGE CALC — larger type throughout ─── !important is needed because much of this panel carries inline font-size. */ #tab-calc, #tab-calc div, #tab-calc label, #tab-calc span{ } #tab-calc [style*="font-size:11px"]{font-size:14px !important;} #tab-calc [style*="font-size:12px"]{font-size:15px !important;} #tab-calc [style*="font-size:13px"]{font-size:16px !important;} #tab-calc .page-hdr-title{font-size:26px;} #tab-calc .section-badge{font-size:13px;padding:6px 16px;} #tab-calc select, #tab-calc input{font-size:16px !important;height:44px !important;} #tab-calc .btn{font-size:15px;padding:10px 18px;} #tab-calc .calc-plot-btn{font-size:15px;padding:11px 8px;} #tab-calc .calc-result-card{padding:18px 20px;} #tab-calc .calc-result-card .lbl{font-size:14px !important;} #tab-calc .calc-result-card .val{font-size:30px !important;} #tab-calc .calc-result-card .val[style*="font-size:16px"]{font-size:22px !important;} /* ─── MONTHLY PAYROLL — column alignment ─── Side margins come from .page like every other tab; the payroll form is wide, so only the TABLE scrolls inside its card. */ #tab-payroll .tbl-wrap{overflow-x:auto;padding:0 10px 10px;} #tab-payroll .tbl-wrap .sched-table{width:max-content;min-width:100%;} #tab-payroll .sched-table{margin-top:0;} /* Footer totals sit in real columns (no colspan), so centre them like the body and keep the row labels left-aligned. */ #tab-payroll .sched-table tfoot td{text-align:center;vertical-align:middle;} #tab-payroll .sched-table tfoot td.th-left{text-align:left;white-space:nowrap;padding-left:16px;} #tab-payroll .sched-table thead th{padding:10px 8px;font-size:11px;} /* Header labels wrap inside a width-capped block (the cap is set per column in renderPayroll) rather than forcing the column wider. */ #tab-payroll .sched-table thead th .th-wrap{display:block;margin:0 auto;white-space:normal;overflow-wrap:break-word;line-height:1.3;} #tab-payroll .sched-table thead th.th-left .th-wrap{margin-left:0;margin-right:auto;} #tab-payroll .sched-table tbody td{padding:8px 8px;} #tab-payroll .check-td{padding:8px 6px;} /* Quantity derived from the batch report's movement data rather than keyed by hand — marked so a linked number is never mistaken for an entered one. */ .qty-linked{color:var(--green-text);border-bottom:1px dotted var(--green-mid);cursor:help;} /* ── Setting tab ────────────────────────────────────────────────────────── Four lists that are keyed in rarely and read from constantly, so they are built for reading: a heading that says what the list is FOR, then rows wide enough to see the numbers without opening anything. */ /* This page is read at arm's length on a phone in a nursery, so the whole Setting tab is a size up from the rest of the module. */ .set-h { font-size:17px; font-weight:800; color:var(--green-text); margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; } .set-h-c { text-align:center; margin-bottom:16px; } .set-sub { font-size:13.5px; color:var(--text-muted); margin-bottom:14px; line-height:1.6; } .set-sub b { color:var(--green-text); font-weight:800; } .set-in { height:40px; padding:0 12px; font-size:14px; font-family:inherit; border:1.5px solid var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text); box-sizing:border-box; } .set-in:focus { outline:none; border-color:var(--green-mid); } .set-add { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:13px; border-top:1px solid var(--border); } .set-empty { font-size:13.5px; color:var(--text-faint); padding:14px 0; line-height:1.7; } /* Title centred over its block, with Edit lifted out of the flow rather than sharing the row and shoving the heading off centre. Used by the Plot Capacity, Chemical List and Fertiliser blocks alike. */ .lst-top { position:relative; padding:0 0 16px; } .lst-top .set-h { text-align:center; margin:0; } .lst-edit { position:absolute; right:0; top:-4px; font-size:13px; } @media (max-width:560px) { .lst-top { display:flex; flex-direction:column; align-items:center; gap:10px; } .lst-edit { position:static; } } /* Cancel and Save at the foot of the block they belong to. */ .lst-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); } .lst-foot .btn { font-size:13.5px; padding:9px 22px; } /* ── Plot capacity ──────────────────────────────────────────────────────── Built like the Chemical List below it, because it is the same kind of thing: a short list of names against short numbers. Headed columns of thin rows, all four nurseries side by side, no tabs. The rows are deliberately tighter than the chemical rows. A capacity row holds a plot name and a number and nothing else, and there are 104 of them across the four nurseries — every pixel of padding is four rows of scrolling. */ /* Nurseries wrap as whole groups, so a nursery's columns are never split across two rows of the page. */ /* Centred, because how many nurseries there are is not fixed — three today, four when one is added — and a row that packs from the left leaves a different-sized gap on the right every time the list changes. */ .cap-cols { display:flex; flex-wrap:wrap; justify-content:center; gap:18px 20px; align-items:flex-start; } .cap-nursery { display:flex; flex-direction:column; } .cap-nursery-cols { display:flex; gap:10px; align-items:flex-start; } .cap-col { width:186px; min-width:0; } /* The nursery name once over its columns, not once per column. */ .cap-nursery-h { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; background:var(--green-light); border:1.5px solid var(--green-mid); border-bottom:none; border-radius:var(--r-sm) var(--r-sm) 0 0; padding:6px 10px; margin-bottom:-1.5px; position:relative; z-index:1; } .cap-nursery-n { font-size:11.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--green-text); } @media (max-width:520px) { .cap-cols { display:block; } .cap-nursery { margin-bottom:18px; } .cap-nursery-cols { flex-direction:column; } .cap-col { width:100%; } } .cap-head, .cap-row { display:grid; grid-template-columns:1fr 74px; gap:6px; align-items:center; } /* Pre nursery counts trays, and what they come to. Three columns, not two. */ .cap-nursery-tray .cap-head, .cap-nursery-tray .cap-row { grid-template-columns:1fr 56px 58px; } .cap-head { padding:6px 9px; background:#f7f9f8; border:1.5px solid var(--border); font-size:9.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); } .cap-head span:not(:first-child) { text-align:right; } .cap-row { padding:3px 9px; border:1.5px solid var(--border); border-top:none; background:#fff; min-height:0; } .cap-row:nth-child(even) { background:var(--bg-row-alt); } .cap-row:hover { background:#f2f8f4; } .cap-row-n{ font-size:12.5px; font-weight:800; color:var(--green-text); line-height:1.6; } .cap-row-v{ font-size:12.5px; font-weight:700; color:var(--text-head); text-align:right; font-variant-numeric:tabular-nums; line-height:1.6; } .cap-row-v.muted { color:var(--text-faint); font-weight:600; } /* What a pre nursery plot's trays come to: that product, not the number being typed, is what every dosage is worked out from. */ .cap-row-d{ font-size:11px; font-weight:700; color:var(--green-mid); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .cap-row input { width:100%; height:24px; padding:0 6px; font-size:12px; font-family:inherit; text-align:right; border:1.5px solid var(--green-mid); border-radius:4px; box-sizing:border-box; background:#fff; font-variant-numeric:tabular-nums; } .cap-row input:focus { outline:none; box-shadow:0 0 0 2px #dbeee3; } /* Seedlings per tray belongs to the one nursery that counts in trays, so it sits beside that nursery's name rather than over the whole block. */ .cap-tray { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; color:#78350f; } .cap-tray input { width:64px; height:24px; padding:0 6px; font-size:12px; font-family:inherit; text-align:right; border:1.5px solid var(--gold-border,#fcd34d); border-radius:4px; background:#fff; font-variant-numeric:tabular-nums; } .cap-tray input:disabled { background:#fdf8ec; color:#92400e; } /* ── Chemical and fertiliser lists ──────────────────────────────────────── Rows of a table rather than cards: three or four short values a line, read down the column, which is what a price list is for. */ /* Three lists side by side where there is room. Below that they stack — three of these columns squeezed into a phone is three unreadable ones. */ /* Pest and Disease side by side; Other full width underneath — it carries one more column (Used on), and in a third of the card its name box came out 40px wide: typing worked, seeing what you typed did not. The stack points moved up when the side bar arrived: these widths are what is left AFTER its 212px column, not the screen. */ .three-col { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; } .col-block-wide { grid-column:1 / -1; } @media (max-width:1080px) { .three-col { grid-template-columns:1fr; } } /* A grid child refuses to shrink below its content unless told it may, and a row that cannot shrink walks out of the card instead. */ .lst-head > *, .lst-row > * { min-width:0; } .lst-head span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .preset-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; padding:12px; background:#f7f9f8; border:1.5px solid var(--border); border-radius:var(--r-sm); } .preset-l { font-size:13.5px; font-weight:800; color:var(--text-muted); } .col-block { min-width:0; } .col-h { font-size:14px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; padding:11px; border-radius:var(--r-sm) var(--r-sm) 0 0; margin-bottom:0; text-align:center; } .col-h-pest { background:#fff4ed; color:#b45309; border:1.5px solid #fed7aa; border-bottom:none; } .col-h-disease { background:#eef6ff; color:#1d4ed8; border:1.5px solid #bfdbfe; border-bottom:none; } .col-h-other { background:#f5f3ff; color:#6d28d9; border:1.5px solid #ddd6fe; border-bottom:none; } /* One grid template, shared by the heading strip and every row under it, so the columns cannot drift apart. */ .lst-head, .lst-row { display:grid; grid-template-columns:1fr 112px 66px 88px 30px; gap:7px; align-items:center; } .lst-head.fert-head, .fert-row { grid-template-columns:1fr 152px 94px 84px 34px; } /* The Other list carries one more column: which schedule dropdown may offer the chemical. Pest and disease have a dropdown each already. */ .lst-head.other-row, .other-row { grid-template-columns:1fr 128px 70px 92px 104px 30px; } .lst-tagsel { height:37px; padding:0 4px; font-family:inherit; font-size:12px; font-weight:700; color:var(--text-head); background:#fff; border:1.5px solid var(--border); border-radius:var(--r-sm); min-width:0; } .lst-tagsel:focus { outline:none; border-color:var(--green-mid); } /* On a phone the derived and secondary cells go rather than shrink: the name, the dose and the remove are what a row is edited with. The rows hide the same cells the heading does, so the columns still line up. */ @media (max-width:640px) { .lst-head, .lst-row { grid-template-columns:1fr 118px 30px; } .lst-head.other-row, .other-row { grid-template-columns:1fr 118px 30px; } .lst-head.fert-head, .fert-row { grid-template-columns:1fr 130px 34px; } .lst-head > :nth-child(3), .lst-row > :nth-child(3), .lst-head > :nth-child(4), .lst-row > :nth-child(4) { display:none; } .other-row > :nth-child(5), .lst-head.other-row > :nth-child(5) { display:none; } .lst-head > :last-child, .lst-row > :last-child { display:flex; } } .lst-head { padding:10px; background:#f7f9f8; border:1.5px solid var(--border); font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); } .lst-head span:not(:first-child) { text-align:center; } .lst-row { padding:8px 10px; border:1.5px solid var(--border); border-top:none; background:#fff; } .lst-row:hover { background:#fcfdfc; } .lst-row input[type=text], .lst-row input[type=number] { width:100%; height:37px; padding:0 10px; font-size:14px; font-family:inherit; border:1.5px solid var(--border); border-radius:var(--r-sm); box-sizing:border-box; background:#fff; } .lst-row input[type=text] { font-weight:700; color:var(--green-text); } .lst-row input[type=number] { text-align:right; font-variant-numeric:tabular-nums; } .lst-row input:focus { outline:none; border-color:var(--green-mid); box-shadow:0 0 0 3px #eaf4ee; } /* What the dose comes to per seedling. Derived, so it is text — an editable box here would invite somebody to type over the arithmetic. */ .lst-calc { text-align:center; font-size:14px; font-weight:800; color:var(--green-mid); font-variant-numeric:tabular-nums; } /* Read-only until Edit is pressed. Text rather than a disabled box: a box that cannot be typed in still looks like somewhere to type. */ .lst-txt { font-size:14.5px; font-weight:800; color:var(--green-text); } .lst-num { text-align:center; font-size:14px; font-weight:700; color:var(--text-head); font-variant-numeric:tabular-nums; } .lst-num.muted { color:var(--text-faint); font-weight:600; } .lst-num.preset { color:var(--text-faint); font-weight:600; font-style:italic; } .lst-tick-ro { text-align:center; font-size:15px; font-weight:900; color:var(--green-mid); } .lst-tick-ro.off { color:#d8dedb; } .lst-calc.none { color:var(--text-faint); font-weight:600; } /* The number and the unit it is in, as one cell. */ .lst-dose { display:flex; gap:4px; align-items:center; min-width:0; } .lst-dose input { flex:1; min-width:0; } .lst-dose select { height:37px; padding:0 2px; font-family:inherit; font-size:12px; font-weight:700; color:var(--text-head); background:#fff; border:1.5px solid var(--border); border-radius:var(--r-sm); flex:0 0 auto; } .lst-dose select:focus { outline:none; border-color:var(--green-mid); } .lst-tick { display:flex; justify-content:center; } .lst-tick input { width:21px; height:21px; accent-color:var(--green-mid); cursor:pointer; } .lst-x { width:30px; height:30px; border:none; background:none; cursor:pointer; color:#cbd5d1; font-size:17px; line-height:1; border-radius:6px; display:flex; align-items:center; justify-content:center; } .lst-x:hover { color:#dc2626; background:#fef2f2; } .row-add { width:100%; padding:11px; border:1.5px dashed var(--border); border-top:none; border-radius:0 0 var(--r-sm) var(--r-sm); background:#fbfdfc; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:800; color:var(--green-mid); } .row-add:hover { background:#f2f8f4; border-color:var(--green-mid); } .lst-empty { padding:16px 11px; border:1.5px solid var(--border); border-top:none; background:#fff; font-size:13.5px; font-weight:600; color:var(--text-faint); text-align:center; } @media (max-width:560px) { .lst-head { display:none; } .lst-row { grid-template-columns:1fr 84px 34px; row-gap:7px; } .fert-row { grid-template-columns:1fr 84px 34px; } .lst-row > .lst-tick { grid-column:span 1; } } /* ══════════════════════════════════════════════════════════════ MONTHLY SCHEDULED WORK — THIS MONTH AT A GLANCE One table per nursery: weeks across, the four works down, a tick where that work is set on at least one plot. The arrow drops the plot names in underneath; the pencil opens that work's week on its own. The table is deliberately NOT the schedule grids' dark-header style. This is a reading surface — you come to it to find out whether something is set, not to set it — so it stays pale and the ticks carry the weight. ══════════════════════════════════════════════════════════════ */ /* Two nurseries to a row. Four nurseries stacked was four screens of scrolling to compare them, which is the one thing this table is for. Below 1100px they go back to one — two tables of five week columns in half a laptop's width is not a summary, it is a squeeze. */ /* ‹ Monthly Work Schedule : Aug 26 › — the title IS the stepper, so the two arrows sit against the thing they change rather than somewhere else on the bar. */ .sched-month{display:flex;align-items:center;gap:10px;} .sched-step{display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;font-family:var(--font);font-size:20px;font-weight:700; line-height:1;color:var(--green-text);background:var(--bg-white); border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer; transition:background .13s,border-color .13s;} .sched-step:hover{background:#eaf7f0;border-color:var(--green);} #sched-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;align-items:start;} @media (max-width:1100px){ #sched-summary{grid-template-columns:1fr;} } .ss-wrap{border:1.5px solid var(--border);border-radius:var(--r-md); background:var(--bg-white);overflow:hidden;min-width:0;} .ss-head{display:flex;align-items:center;gap:10px;padding:9px 13px; background:#f2f7f4;border-bottom:1.5px solid var(--border);} .ss-name{flex:1;font-size:13.5px;font-weight:800;letter-spacing:.5px; text-transform:uppercase;color:var(--green-text);} .ss-count{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; color:var(--text-muted);white-space:nowrap;} /* Week headers are two lines: which week, then when. They used to be a button opening a date box; the dates are set in the Edit popup now, beside the chemicals and ticks they belong to. */ .ss-wk{font-size:11px;font-weight:800;color:var(--text-head);letter-spacing:.4px;} .ss-wk-d{font-size:9.5px;font-weight:700;color:var(--text-muted); letter-spacing:0;text-transform:none;margin-top:1px;} /* A month nobody has set a week in. Not an error — most months start here. */ .ss-none-th{font-weight:700 !important;color:var(--border-strong) !important; text-transform:none !important;letter-spacing:0 !important;font-size:11px !important;} .ss-empty-cell{color:var(--border-strong);font-size:11.5px;font-style:italic;} .ss-table{width:100%;border-collapse:collapse;} .ss-table thead th{background:var(--bg-white);color:var(--text-muted);font-weight:800; font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;padding:8px 6px; border-bottom:2px solid var(--border-strong);text-align:center;white-space:nowrap;} /* .period-btn is written for the dark schedule headers; on this pale one it needs the underline it can actually be seen against. */ .ss-table thead th .period-btn{border-bottom-color:var(--border-strong); font-size:11px;color:var(--text-head);letter-spacing:0;} .ss-table thead th .period-btn:hover{background:rgba(13,122,71,.09); border-bottom-color:var(--green);} .ss-table tbody td{padding:7px 6px;border-bottom:1px solid #eaf1ed; text-align:center;vertical-align:middle;font-size:13px;color:var(--text-body);} .ss-table tbody tr:last-child td{border-bottom:none;} /* The work's name is the row's label, so it reads left and heavier than the cells it is labelling. */ th.ss-work,td.ss-work{text-align:left;font-size:12.5px;font-weight:800; color:var(--text-head);white-space:nowrap;padding-left:13px;} th.ss-act,td.ss-act{width:1%;white-space:nowrap;padding-right:11px;} .ss-cell{color:var(--border-strong);font-size:15px;} .ss-cell.on{background:#f0faf5;} .ss-tick{display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff; font-size:12px;font-weight:800;line-height:1;} .ss-btn{display:inline-flex;align-items:center;justify-content:center; font-family:var(--font);font-size:11px;line-height:1;color:var(--text-muted); background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--r-sm); width:26px;height:26px;cursor:pointer;transition:all .13s;vertical-align:middle;} .ss-btn+.ss-btn{margin-left:4px;} .ss-btn:hover{border-color:var(--green);color:var(--green);background:#eaf7f0;} .ss-btn-edit{color:var(--green-text);border-color:var(--green-mid);} .ss-row.is-open td{border-bottom-color:transparent;background:#f7fbf9;} /* EVERY plot, ticked or not, in ONE table — plots down, weeks across. It listed only what was set, which made the panel a different shape every time and gave no way to see a plot had been MISSED. The week columns are numbered; the dates are two rows up in the summary's own header, and repeating them here would cost the width the plot names need. */ .ss-detail td{padding:10px 13px 14px;background:#f7fbf9; border-bottom:1px solid #eaf1ed;vertical-align:top;text-align:left;} .xp-wrap{max-height:420px;overflow:auto;} .xp-table{width:100%;border-collapse:collapse;} .xp-table thead th{position:sticky;top:0;z-index:1;background:#f7fbf9; font-size:9.5px;font-weight:800;letter-spacing:.5px;color:var(--text-muted); text-transform:uppercase;padding:0 6px 6px;border-bottom:1px solid var(--border); text-align:center;} .xp-table th.xp-plot{text-align:left;padding-left:0;} .xp-table tbody td{padding:3px 6px;font-size:12px;text-align:center; line-height:1.5;border:none;} .xp-table td.xp-plot{text-align:left;padding-left:0;font-weight:700; color:var(--text-head);white-space:nowrap;} .xp-on{color:var(--green);font-weight:800;} /* An empty cell needs a mark of its own or the row reads as ragged; a faint dot says "asked and not set" where blank says only "nothing here". */ .xp-off::after{content:"\00b7";color:var(--border-strong);} /* A plot with nothing set anywhere this month is the one worth spotting. */ .xp-blank td.xp-plot{color:var(--text-muted);font-weight:600;} .xp-tot{font-size:11px;font-weight:800;color:var(--green-text);width:1%; padding-left:10px;} .ss-none{color:var(--border-strong);font-size:13px;} /* ── The Edit popup: one work, one week ──────────────────────────────── Every plot in the nursery with the ticks that round holds, and above them what it is being sprayed or fed with. Same questions as the sheet, about one column of it. */ /* One config card per round, side by side — the popup holds the whole month now, so stacking five of them would put the grid below the fold. */ .we-cfgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:10px;margin-bottom:14px;} .we-cfg{background:#f2f7f4;border:1.5px solid var(--border);border-radius:var(--r-md); padding:9px 11px;min-width:0;max-width:660px;margin-bottom:12px;} .we-cfg-h{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase; color:var(--green-text);padding-bottom:6px;margin-bottom:4px; border-bottom:1px solid var(--border);} .we-cfg-h-orphan{color:#92400e;} /* One field to a line, and the labels in a column of their own so PEST and DISEASE STICKER line their controls up rather than staggering them. */ .we-cfg-row{display:grid;grid-template-columns:88px minmax(0,1fr) 66px 28px; align-items:center;gap:8px;padding:3px 0;} .we-cfg-l{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase; color:var(--text-muted);} .we-cfg-u{font-size:12px;font-weight:700;color:var(--text-muted);} .we-cfg-none{font-size:13px;font-weight:700;color:var(--border-strong);} .we-sel{width:100%;height:28px;padding:0 5px;font-family:var(--font);font-size:13px;font-weight:600; color:var(--text-head);background:var(--bg-white);border:1.5px solid var(--border); border-radius:var(--r-sm);cursor:pointer;min-width:0;} .we-sel:focus{outline:none;border-color:var(--green);} .we-num{height:34px;width:100%;padding:0 8px;font-family:var(--font);font-size:13px; font-weight:600;color:var(--text-head);background:var(--bg-white); border:1.5px solid var(--border);border-radius:var(--r-sm);} .we-num:focus{outline:none;border-color:var(--green);} .we-table{width:100%;border-collapse:collapse;} /* The plot column takes the slack; a tick column needs the width of a tick. Left the other way round, two columns split 1,100px between them and the checkbox for B1 sat 400px from the word B1. */ .we-table{table-layout:auto;width:auto;min-width:100%;} .we-table th.we-col,.we-table tbody td:not(.we-plot){width:132px;min-width:132px;} .we-table thead th{background:#f2f7f4;color:var(--text-muted);font-weight:800;font-size:10.5px; letter-spacing:.6px;text-transform:uppercase;padding:7px 8px; border-bottom:2px solid var(--border-strong);text-align:center;} /* The week band. A left rule on each group is what keeps two weeks of Pest / Disease from reading as one run of four columns. */ .we-table thead th.we-wk+.we-wk,.we-table thead th.we-col.grp, .we-table tbody td.grp{border-left:2px solid var(--border-strong);} .we-table thead th.we-col{font-size:10px;vertical-align:top;padding:8px 7px;} .we-table tbody td{padding:4px 8px;border-bottom:1px solid #eaf1ed;text-align:center;} .we-table tbody tr:nth-child(even) td{background:var(--bg-row-alt);} .we-table tbody tr:last-child td{border-bottom:none;} th.we-plot,td.we-plot{text-align:left;font-size:12.5px;font-weight:700; color:var(--text-head);white-space:nowrap;position:sticky;left:0;z-index:1; background:var(--bg-white);} /* Sticky needs its own background or the striped rows show through it. */ .we-table tbody tr:nth-child(even) td.we-plot{background:var(--bg-row-alt);} .we-table thead th.we-plot{background:#f2f7f4;z-index:3;vertical-align:middle; text-align:left;} .we-all{display:block;margin:4px auto 0;font-family:var(--font);font-size:10px; font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green-text); background:var(--bg-white);border:1px solid var(--green-mid);border-radius:20px; padding:2px 9px;cursor:pointer;} .we-all:hover{background:#eaf7f0;} .we-tick{width:26px;height:26px;border-radius:var(--r-sm);border:1.5px solid var(--border); background:var(--bg-white);color:transparent;font-size:14px;font-weight:800;line-height:1; cursor:pointer;transition:all .12s;} .we-tick:hover{border-color:var(--green);} .we-tick.on{background:var(--green);border-color:var(--green);color:#fff;} /* A nursery with 52 plots makes a very tall list, and .modal scrolls as ONE piece — which would carry Save off the bottom of a screen that has just asked somebody to tick 52 things. The plot list scrolls; the title and the Save button stay where they are. */ #we-modal .modal{display:flex;flex-direction:column;overflow:hidden;} #we-modal .modal-top,#we-modal .modal-footer{flex:0 0 auto;} #we-modal .modal-body{flex:1 1 auto;overflow-y:auto;min-height:0;} /* Two columns across a 760px modal leaves the ticks stranded in acres of space; the plot name only needs the width of a plot name. */ th.we-plot,td.we-plot{width:1%;min-width:96px;} /* ── The week-dates popover ──────────────────────────────────────────── Its look used to be written INLINE on the element, `display:flex` among it, while class="hidden" was supposed to put it away. An inline declaration outranks any stylesheet rule whatever the selector — and this stylesheet had no .hidden rule at all — so it never hid. It sat at the foot of every tab, two date boxes and three buttons, looking for all the world like a search bar somebody had left behind. Both halves live here now, and the hiding rule is the more specific of the two, so it wins without !important. */ #week-pick{position:absolute;z-index:90;display:flex;gap:8px;align-items:center; flex-wrap:wrap;padding:12px;background:var(--bg-white); border:1.5px solid var(--border);border-radius:var(--r-md); box-shadow:0 12px 30px rgba(0,0,0,.16);} #week-pick.hidden{display:none;} #week-pick .set-in{width:150px;} /* The ribbon is the page's own sticky header now, so the control strip below it must not claim the same top:0 and cover it. */ #mjm-ribbon+#view-app .topbar{position:static;} /* ══════════════════════════════════════════════════════════════ THE SIDE BAR, AND THE HEAD BESIDE IT This is PALMS's bar — shared/shared_palms_nav.js — measured and coloured the same on purpose, so the two modules are one system rather than two houses. It is a COPY and not that file because PALMS moves between four HTML pages and this page moves between panels of itself: same shape, different mechanism. CHANGE ONE, CHANGE THE OTHER. The same note sits in shared_palms_nav.js. Everything is a class rather than an inline style, for the reason that file gives: an inline declaration outranks a stylesheet one whatever the selector, so a bar styled inline cannot be narrowed by a media query — and this bar has to become a row on a phone. ══════════════════════════════════════════════════════════════ */ .sm-frame{display:block;} .sm-body{min-width:0;} @media(min-width:768px){ .sm-frame{display:grid;grid-template-columns:212px minmax(0,1fr); gap:24px;align-items:start;} } #sm-nav{display:block;} #sm-nav .pn-out{display:flex;align-items:center;gap:8px;padding:10px 13px; border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569; text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.06em; text-transform:uppercase;line-height:1.25;transition:background .15s,color .15s;} #sm-nav .pn-out:hover{background:#f1f5f9;color:#0f172a;} /* The panels, held apart from the way out by a rule rather than by distance alone, so the bar reads as "leave" then "inside". */ #sm-nav .pn-group{margin-top:14px;padding-top:14px;border-top:1px solid #ccfbf1; display:flex;flex-direction:column;gap:4px;} #sm-nav .pn-cap{font-size:9.5px;font-weight:900;letter-spacing:.18em; text-transform:uppercase;color:#5eead4;padding:0 4px 7px;line-height:1.4;} #sm-nav .pn-tab{display:block;width:100%;text-align:left;padding:10px 12px; border-radius:12px;font-family:var(--font);font-size:12.5px;font-weight:800; color:#0f766e;background:transparent;border:1px solid transparent; line-height:1.25;cursor:pointer;transition:background .15s,color .15s;} #sm-nav .pn-tab:hover{background:#ccfbf1;} #sm-nav .pn-tab.is-on{background:#0f766e;color:#fff;} #sm-nav .pn-tab.is-on:hover{background:#115e59;} /* 84px clears the ribbon, which is sticky. */ @media(min-width:768px){#sm-nav{position:sticky;top:84px;align-self:start;}} /* Phone: the column becomes a row above the content — a 212px column beside a table on a 412px screen leaves neither of them usable. */ @media(max-width:767px){ #sm-nav .pn-group{margin-top:10px;padding-top:10px;flex-direction:row; overflow-x:auto;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} #sm-nav .pn-group::-webkit-scrollbar{display:none;} #sm-nav .pn-cap{display:none;} #sm-nav .pn-tab{width:auto;flex:0 0 auto;background:#f0fdfa;border-color:#99f6e4; font-size:12px;padding:9px 13px;white-space:nowrap;} #sm-nav .pn-out{justify-content:center;} } /* The head every panel shares: what the side bar chose, and the two things a panel is read THROUGH. */ .sm-head{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px; border-bottom:1.5px solid var(--border);} .sm-title{font-size:22px;font-weight:800;color:var(--text-head); letter-spacing:.2px;line-height:1.2;} .sm-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .sm-month{display:flex;align-items:center;gap:6px;} .sm-month-btn{height:32px;min-width:104px;padding:0 12px;font-family:var(--font); font-size:12px;font-weight:700;color:var(--text-head);background:var(--bg-white); border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer; transition:border-color .15s;} .sm-month-btn:hover{border-color:var(--green);} /* The Schedule tab's own title and stepper moved into .sm-head, so what is left of its bar is the buttons — which belong at the right, in nothing. */ .sm-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px; flex-wrap:wrap;margin-bottom:14px;} .sm-actions .btn,.sm-actions .btn-pdf{font-size:11.5px;padding:7px 15px;} /* ── The ribbon title on a phone ─────────────────────────────────────── shared_ribbon.js sizes the centred title from ONE scale that moves the desk size and the phone size together, so a module cannot ask for PALMS's 30px on a desk and something smaller on a phone. PALMS can live with that: "PALMS" is five characters. "SCHEDULE & MAINTENANCE" is twenty-two, and at the ribbon's phone size of 21px with .16em tracking it runs past 412px of screen and is cut off mid-word. So the desk size is the ribbon's own — the same as PALMS, which is what was asked for — and only the phone is overridden here. Higher specificity than the ribbon's own `#mjm-ribbon .mjm-rb-title` rule so it wins wherever the injected