/* KisanFlow's self-contained visual system */
:root { --green-900:#123b2a; --green-800:#18523a; --green-700:#1f7a4d; --green-600:#29945f; --green-100:#e9f6ed; --lime:#c5e87a; --cream:#f8f7f1; --surface:#ffffff; --surface-alt:#f2f5ef; --ink:#17251c; --muted:#67736b; --border:#dfe7df; --danger:#c74b4b; --shadow:0 15px 45px rgba(30,59,40,.08); --radius:20px; --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.dark { --cream:#121a15; --surface:#1a241e; --surface-alt:#202c24; --ink:#eef5ed; --muted:#a8b7aa; --border:#314137; --green-100:#1a3528; --shadow:0 15px 45px rgba(0,0,0,.22); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--font); color:var(--ink); background:var(--cream); font-size:15px; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(41,148,95,.35); outline-offset:2px; } .hidden { display:none !important; } .container { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
/* Landing */
.landing-page { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 80% 8%,#e4f4c5 0,transparent 23%),linear-gradient(135deg,#f9f8f3 0%,#eff6ed 100%); color:#183222; display:flex; flex-direction:column; } .landing-nav { height:92px; display:flex; align-items:center; justify-content:space-between; } .brand { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:9px; font-size:23px; letter-spacing:-1.2px; font-weight:800; } .brand-logo { width:58px; height:58px; display:block; object-fit:contain; border-radius:12px; flex:none; } .brand span span { color:var(--green-700); } .brand-mark { background:var(--green-700); color:#fff; display:grid; place-items:center; height:35px; width:35px; border-radius:11px 11px 11px 3px; font-size:19px; transform:rotate(-5deg); box-shadow:0 8px 18px rgba(31,122,77,.2); }
.landing-main { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; flex:1; min-height:490px; padding:28px 0 45px; } .eyebrow,.section-eyebrow,.crumb { margin:0 0 8px; color:var(--green-700); font-size:11px; text-transform:uppercase; letter-spacing:1.35px; font-weight:800; } .hero-copy h1 { margin:0; max-width:650px; color:#173724; font-size:clamp(46px,6.3vw,78px); letter-spacing:-4px; line-height:.98; } .hero-copy h1 em { color:var(--green-700); font-family:Georgia,serif; font-weight:500; } .hero-text { max-width:520px; margin:25px 0; color:#5f6d63; font-size:17px; line-height:1.65; } .hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .button { min-height:42px; padding:10px 16px; border:1px solid transparent; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:750; transition:transform .2s,box-shadow .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--green-700); color:#fff; box-shadow:0 9px 20px rgba(31,122,77,.18); } .button-primary:hover { background:var(--green-800); box-shadow:0 12px 24px rgba(31,122,77,.26); } .button-secondary { background:var(--surface); color:var(--ink); border-color:var(--border); } .button-secondary:hover { background:var(--surface-alt); } .button-light { background:#fff; color:var(--green-800); } .button-danger { color:#fff; background:var(--danger); } .button-large { min-height:52px; padding:14px 22px; font-size:16px; } .offline-note { color:var(--green-800); font-weight:700; font-size:13px; }.hero-metrics { display:flex; gap:35px; margin-top:48px; }.hero-metrics div { display:grid; gap:3px; }.hero-metrics strong { font-size:22px; letter-spacing:-1px; }.hero-metrics span { color:#758177; font-size:12px; }
.hero-visual { min-height:420px; position:relative; border-radius:34px; overflow:hidden; background:linear-gradient(180deg,#cdeed4 0%,#9fd17a 53%,#477a4c 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 28px 48px rgba(22,74,45,.14); }.sun { position:absolute; height:94px; width:94px; top:42px; right:82px; background:#fff6bb; border-radius:50%; box-shadow:0 0 0 14px rgba(255,248,183,.21); }.cloud { position:absolute; height:20px; width:78px; border-radius:20px; background:rgba(255,255,255,.78); }.cloud:after,.cloud:before { content:""; position:absolute; border-radius:50%; background:inherit; }.cloud:before { width:30px;height:30px;left:15px;bottom:6px; }.cloud:after { width:22px;height:22px;left:42px;bottom:4px; }.cloud-one { top:88px; left:50px; }.cloud-two { top:146px; left:155px; transform:scale(.65); }.hill { position:absolute; bottom:70px; width:130%; border-radius:50% 50% 0 0; }.hill-back { height:200px; left:-15%; background:#79a45c; }.hill-front { height:145px; left:-30%; background:#3b7648; bottom:-43px; }.field-lines { position:absolute; inset:auto -20% -47px; height:210px; background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 22px,rgba(179,219,102,.42) 23px 25px,transparent 27px 48px); transform:perspective(250px) rotateX(54deg); }.hero-card { position:absolute; z-index:2; display:flex; align-items:center; gap:11px; padding:12px 15px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.8); border-radius:15px; box-shadow:0 14px 26px rgba(24,62,35,.14); backdrop-filter:blur(5px); }.hero-card span { height:34px;width:34px;display:grid;place-items:center;border-radius:10px;background:#e6f5d9; }.hero-card small { display:block; color:#637566; font-size:10px; font-weight:700; }.hero-card strong { font-size:13px; }.hero-card-top { top:60px; left:33px; }.hero-card-bottom { bottom:52px; right:24px; }.hero-card-bottom span { color:#197243; font-weight:900; font-size:19px; }.plant { position:absolute;z-index:2;font-size:48px;bottom:21px;filter:drop-shadow(0 8px 3px rgba(0,0,0,.12)); }.plant-one{left:72px}.plant-two{left:38%;font-size:38px;bottom:30px}.plant-three{right:18%;font-size:54px;bottom:22px}.features-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(157,181,157,.25);border:1px solid rgba(157,181,157,.25);border-radius:18px;overflow:hidden;margin-bottom:26px; }.features-strip article { display:flex;gap:12px;align-items:flex-start;padding:19px 23px;background:rgba(255,255,255,.56); }.feature-icon { color:var(--green-700);font-size:21px;font-weight:900; }.features-strip strong { display:block;font-size:13px; }.features-strip p { margin:3px 0 0;color:#6f7d73;font-size:12px;line-height:1.4; }.landing-footer { padding:0 0 20px;display:flex;justify-content:space-between;color:#7d887e;font-size:11px; }
/* App frame */
.app-shell { min-height:100vh; display:flex; background:var(--cream); }.sidebar { position:fixed;z-index:40;inset:0 auto 0 0;width:250px;padding:25px 14px 16px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin; }.sidebar .brand { padding:0 10px; font-size:21px; } .sidebar .brand-logo { width:64px; height:64px; } .sidebar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; } .sidebar-brand-name { font-size:18px; font-weight:900; letter-spacing:.5px; color:var(--green-800); white-space:nowrap; }.sidebar-top { display:flex;align-items:center;justify-content:space-between; }.close-sidebar { display:none; }.farm-status { margin:30px 9px 20px;padding:10px 11px;background:var(--surface-alt);border-radius:10px;color:var(--muted);font-weight:650;font-size:11px;display:flex;align-items:center;gap:7px; }.status-dot { height:7px;width:7px;border-radius:50%;background:#45b66d;box-shadow:0 0 0 3px rgba(69,182,109,.12); }.side-nav { display:grid;gap:3px; }.nav-item { border:0;background:transparent;padding:11px 12px;border-radius:10px;color:var(--muted);text-align:left;font-weight:700;display:flex;align-items:center;gap:12px;transition:.2s; }.nav-item span { width:18px;text-align:center;font-size:17px;color:#83938a; }.nav-item:hover { color:var(--green-700);background:var(--green-100); }.nav-item.active { color:var(--green-800);background:var(--green-100); }.nav-item.active span { color:var(--green-700); }.sidebar-bottom { margin-top:auto;display:grid;gap:3px; }.offline-card { margin:14px 5px 0;padding:12px;background:linear-gradient(130deg,#eef8ea,#e0f1dc);border-radius:13px;display:grid;gap:4px;color:#287044;font-size:11px;font-weight:800; }.offline-card small { color:#5e8065;font-weight:600;font-size:10px; }.main-content { width:calc(100% - 250px);margin-left:250px;padding:0 34px 38px; }.app-header { min-height:91px; display:flex;align-items:center;justify-content:space-between; }.header-title { display:flex;align-items:center;gap:13px; }.header-title h1 { margin:0;font-size:25px;letter-spacing:-1px; }.crumb { margin:0 0 3px;font-size:10px; }.header-actions { display:flex;align-items:center;gap:13px; }.today-label { color:var(--muted);font-size:12px;font-weight:650; }.icon-button { border:0;background:transparent;color:var(--ink);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:22px;transition:.2s; }.icon-button:hover { background:var(--surface-alt); }.menu-button { display:none; }.theme-toggle { font-size:19px;background:var(--surface);border:1px solid var(--border); }.view { display:none;animation:fade-in .35s ease both; }.view.active { display:block; } @keyframes fade-in { from {opacity:0;transform:translateY(7px)} to {opacity:1;transform:none} }
.profile-page-card{max-width:900px;padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 14px 30px rgba(28,101,62,.08)}
.profile-page-identity{display:flex;align-items:center;gap:16px;margin-bottom:26px;padding:16px;border-radius:16px;background:var(--surface-alt)}
.profile-page-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--green-700);color:#fff;font-size:20px;font-weight:850;flex-shrink:0}
.profile-page-identity h3{margin:2px 0 3px;font-size:22px}.profile-page-identity p{margin:0;color:var(--muted);font-size:12px}.profile-page-card .modal-actions{justify-content:flex-start;margin-top:20px}.profile-nav-item{margin-top:4px}
/* Components */
.welcome-banner { min-height:198px;padding:31px 37px;border-radius:var(--radius);background:linear-gradient(120deg,#185c3d,#278354);color:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 14px 30px rgba(28,101,62,.18); }.welcome-banner:after { content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(197,232,122,.17);right:-100px;top:-130px; }.welcome-banner .eyebrow { color:#d2edb9; }.welcome-banner h2 { font-size:28px;letter-spacing:-1.3px;margin:0 0 4px; }.welcome-banner p:not(.eyebrow) { margin:0 0 15px;color:#dceee1; }.banner-illustration { position:relative;z-index:1;font-size:100px;transform:rotate(-7deg);filter:drop-shadow(0 10px 4px rgba(0,0,0,.15)); }.stats-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:21px 0; }.stat-card { min-height:124px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between; }.stat-card .stat-top { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;font-weight:750; }.stat-icon { width:28px;height:28px;display:grid;place-items:center;background:var(--green-100);border-radius:9px;color:var(--green-700);font-size:16px; }.stat-card strong { font-size:24px;letter-spacing:-1.3px; }.stat-card small { color:var(--muted);font-size:10px; }.stat-card.profit strong { color:var(--green-700); }.content-grid { display:grid;gap:20px; }.dashboard-grid { grid-template-columns:1.45fr 1fr; }.panel { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:23px;box-shadow:var(--shadow); }.panel-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:17px; }.panel-heading h2,.page-intro h2 { margin:0;letter-spacing:-1px;font-size:20px; }.section-eyebrow { margin-bottom:5px;font-size:10px; }.text-button { border:0;background:transparent;color:var(--green-700);font-weight:800;font-size:12px;padding:3px; }.activity-list,.transaction-list { display:grid; }.activity-item { padding:13px 0;border-top:1px solid var(--border);display:flex;gap:11px;align-items:center; }.activity-item:first-child { border-top:0; }.activity-icon { width:31px;height:31px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--surface-alt);font-size:14px; }.activity-item div { display:grid;gap:2px; }.activity-item strong { font-size:12px; }.activity-item span { color:var(--muted);font-size:11px; }.empty-state { padding:24px 10px;text-align:center;color:var(--muted);font-size:13px;line-height:1.55; }.empty-state .empty-icon { font-size:25px;display:block;margin-bottom:8px; }.quick-actions { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }.quick-actions button { min-height:88px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt);color:var(--ink);font-size:12px;font-weight:800;display:grid;justify-items:start;gap:9px;padding:12px;transition:.2s; }.quick-actions button:hover { border-color:var(--green-600);background:var(--green-100);transform:translateY(-2px); }.quick-actions span { font-size:19px;color:var(--green-700); }.season-panel { margin-top:20px;padding:21px 25px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(110deg,var(--surface),var(--green-100)); }.season-panel h2 { margin:0 0 5px;font-size:19px;letter-spacing:-.7px; }.season-panel p:not(.section-eyebrow) { margin:0;color:var(--muted);font-size:12px; }.season-values { display:flex;gap:34px; }.season-values div { display:grid;gap:4px; }.season-values span { color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:800; }.season-values strong { font-size:18px; }.season-values div:last-child strong { color:var(--green-700); }
.page-intro { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:7px 0 21px; }.page-intro h2 { font-size:27px;letter-spacing:-1.3px; }.page-intro p:not(.section-eyebrow) { margin:6px 0 0;color:var(--muted);font-size:13px; }.button-row { display:flex;gap:9px; }.record-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px; }.record-card { min-height:210px;position:relative;padding:20px;border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column; }.record-card-top { display:flex;justify-content:space-between;gap:9px;align-items:flex-start; }.record-icon { height:40px;width:40px;display:grid;place-items:center;border-radius:12px;background:var(--green-100);font-size:21px; }.record-menu { position:relative; }.more-button { border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;padding:0 3px; }.action-menu { display:none;position:absolute;right:0;top:23px;z-index:3;width:112px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow); }.action-menu.open { display:grid; }.action-menu button { border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:650;text-align:left;padding:7px;border-radius:6px; }.action-menu button:hover { background:var(--surface-alt); }.action-menu button.delete-action { color:var(--danger); }.record-card h3 { margin:15px 0 6px;font-size:17px;letter-spacing:-.5px; }.record-location { margin:0;color:var(--muted);font-size:12px; }.record-details { margin-top:auto;padding-top:15px;display:flex;gap:8px;flex-wrap:wrap; }.record-details span { padding:5px 8px;border-radius:7px;background:var(--surface-alt);color:var(--muted);font-size:10px;font-weight:750; }.record-note { margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }.crop-database-note { margin:-3px 0 18px;padding:13px 16px;background:var(--green-100);border-radius:13px;color:var(--green-800);display:flex;gap:12px;align-items:center; }.crop-database-note>span { font-size:22px; }.crop-database-note strong { font-size:12px; }.crop-database-note p { margin:2px 0 0;color:var(--muted);font-size:11px; }.crop-grid .record-card { min-height:238px; }.crop-season { color:var(--green-700)!important;background:var(--green-100)!important; }.crop-dates { margin:11px 0 0;font-size:11px;color:var(--muted); }.crop-yield { margin-top:auto;padding-top:11px;font-size:12px;font-weight:800;color:var(--green-800); }
.finance-summary { grid-template-columns:repeat(4,1fr); }.finance-grid { grid-template-columns:1fr 1fr; }.transaction-item { padding:13px 0;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px; }.transaction-item:first-child { border-top:0; }.transaction-dot { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff1ee;color:#ce684c;font-size:16px; }.transaction-item.income .transaction-dot { background:var(--green-100);color:var(--green-700); }.transaction-main { flex:1;min-width:0; }.transaction-main strong { display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.transaction-main span { color:var(--muted);font-size:10px; }.transaction-amount { font-weight:850;font-size:12px; }.transaction-amount.expense { color:var(--danger); }.transaction-amount.income { color:var(--green-700); }.transaction-actions { position:relative; }.mini-action { border:0;background:transparent;color:var(--muted);font-size:17px; }.calculator-layout { display:grid;grid-template-columns:minmax(280px,.86fr) minmax(280px,1.14fr);gap:21px;align-items:stretch; }.calculator-form { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start; }.calculator-form .button { grid-column:1/-1;margin-top:5px; }.profit-result { min-height:360px;border-radius:var(--radius);padding:31px;background:linear-gradient(140deg,#1a563a,#278656);color:#fff;position:relative;overflow:hidden; }.profit-result:after { content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(197,232,122,.15);bottom:-180px;right:-70px; }.result-icon { width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.15);font-size:27px;margin-bottom:35px; }.profit-result .section-eyebrow { color:#cce9b6; }.profit-result h2 { margin:0 0 7px;font-size:27px;letter-spacing:-1.2px; }.profit-result>p:not(.section-eyebrow) { margin:0;color:#d6eadc;max-width:390px;line-height:1.6;font-size:13px; }.result-values { position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:35px; }.result-values div { padding:12px;background:rgba(6,43,25,.2);border:1px solid rgba(255,255,255,.13);border-radius:12px;display:grid;gap:4px; }.result-values span { font-size:10px;color:#d4e8db; }.result-values strong { font-size:18px;letter-spacing:-.8px; }
.inventory-toolbar { display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;gap:15px; }.inventory-filters { display:flex;gap:7px;flex-wrap:wrap; }.filter { border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;font-weight:750;padding:7px 10px;border-radius:8px; }.filter.active { background:var(--green-700);border-color:var(--green-700);color:#fff; }.low-stock-summary { color:#ae6c27;font-weight:750;font-size:11px; }.inventory-list { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden; }.inventory-head,.inventory-row { display:grid;grid-template-columns:1.3fr .8fr .85fr .8fr 65px;align-items:center;gap:12px;padding:14px 20px; }.inventory-head { background:var(--surface-alt);color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.7px; }.inventory-row { border-top:1px solid var(--border);min-height:64px; }.inventory-name { display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px; }.type-pill { padding:5px 7px;background:var(--green-100);color:var(--green-800);border-radius:6px;font-size:10px;font-weight:800; }.stock-quantity { font-weight:800;font-size:12px; }.low-stock { color:#b36d28;font-weight:800;font-size:11px; }.stock-ok { color:var(--green-700);font-weight:750;font-size:11px; }.stock-actions { display:flex;gap:1px;justify-content:flex-end; }.stock-actions button { border:0;background:transparent;color:var(--muted);width:27px;height:27px;border-radius:7px;font-size:15px; }.stock-actions button:hover { color:var(--green-700);background:var(--green-100); }.stock-actions .delete-stock:hover { color:var(--danger);background:#fff0ef; }.calendar-key { display:flex;gap:15px;flex-wrap:wrap;margin:0 0 17px;color:var(--muted);font-size:11px;font-weight:700; }.calendar-key span { display:flex;align-items:center;gap:6px; }.key-dot { width:8px;height:8px;border-radius:50%;display:inline-block; }.preparation { background:#afc493; }.sowing { background:#3e9c66; }.growth { background:#78bd55; }.harvest { background:#e1a13f; }.calendar-list { display:grid;gap:15px; }.calendar-card { background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:200px 1fr;gap:25px;align-items:center; }.calendar-crop h3 { margin:0;font-size:17px; }.calendar-crop p { margin:5px 0 0;color:var(--muted);font-size:11px; }.timeline { position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:17px; }.timeline:before { content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:var(--border); }.timeline-stage { position:relative;z-index:1;display:grid;gap:7px;justify-items:center;text-align:center; }.stage-dot { width:12px;height:12px;border-radius:50%;background:var(--border);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border); }.timeline-stage.active .stage-dot { background:var(--green-700);box-shadow:0 0 0 1px var(--green-700); }.timeline-stage.current .stage-dot { background:#e1a13f;box-shadow:0 0 0 1px #e1a13f,0 0 0 5px rgba(225,161,63,.16); }.timeline-stage span { font-size:10px;font-weight:800; }.timeline-stage small { color:var(--muted);font-size:9px; }.timeline-stage.current span { color:#b87520; }
.analytics-highlights { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px; }.analytics-highlight { border-radius:15px;padding:17px 19px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow); }.analytics-highlight span { color:var(--muted);font-size:11px;font-weight:750; }.analytics-highlight strong { display:block;margin-top:8px;font-size:24px;letter-spacing:-1px; }.analytics-highlight.profit strong { color:var(--green-700); }.charts-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }.chart-panel { min-height:290px; }.bar-chart { min-height:205px;display:grid;align-items:end;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:10px;padding:10px 2px 0; }.bar-column { height:180px;display:grid;grid-template-rows:1fr auto;gap:7px;text-align:center;min-width:0; }.bar { align-self:end;min-height:3px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#6fc078,#207a4b);position:relative;transition:height .45s ease; }.bar.income { background:linear-gradient(180deg,#9fdb85,#3e9158); }.bar-value { position:absolute;top:-21px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap;font-weight:800; }.bar-label { color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.profit-summary-panel { margin-top:20px;display:grid;grid-template-columns:250px 1fr;align-items:center;gap:25px; }.profit-summary-panel h2 { margin:0;font-size:20px;letter-spacing:-.8px; }.summary-chart { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.summary-chart div { padding:15px;border-radius:13px;background:var(--surface-alt);display:grid;gap:5px; }.summary-chart span { color:var(--muted);font-size:10px;font-weight:750; }.summary-chart strong { font-size:19px; }.summary-chart .profit-box { background:var(--green-100); }.summary-chart .profit-box strong { color:var(--green-700); }
.backup-warning { padding:17px 20px;background:#fff6df;border:1px solid #f0dda8;color:#805d1a;border-radius:15px;display:flex;gap:13px;align-items:flex-start;margin-bottom:20px; }.backup-warning>span { font-size:20px; }.backup-warning strong { font-size:13px; }.backup-warning p { margin:4px 0 0;font-size:12px;line-height:1.5;color:#91732e; }.backup-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }.backup-card { min-height:225px;display:flex;flex-direction:column;align-items:flex-start; }.backup-icon { height:42px;width:42px;display:grid;place-items:center;background:var(--green-100);color:var(--green-700);border-radius:13px;font-size:22px; }.backup-card h2 { margin:16px 0 5px;font-size:19px; }.backup-card p { margin:0;color:var(--muted);font-size:12px;line-height:1.6;max-width:360px; }.backup-card .button { margin-top:auto; }.data-status { margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px; }.data-status h2 { margin:0;font-size:18px; }.backup-status { display:flex;gap:17px;flex-wrap:wrap; }.backup-status span { color:var(--muted);font-size:11px;font-weight:750; }.backup-status strong { color:var(--ink); }.settings-list { display:grid;gap:14px; }.setting-row { min-height:103px;padding:20px 23px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:20px; }.setting-row>div:first-child { display:flex;gap:14px;align-items:center; }.setting-icon { width:39px;height:39px;display:grid;place-items:center;background:var(--green-100);color:var(--green-700);border-radius:11px;font-size:20px; }.setting-row h3 { margin:0;font-size:14px; }.setting-row p { margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.5;max-width:630px; }.theme-choice { display:flex;gap:6px; }.theme-choice-button { border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:8px 10px;border-radius:8px;font-size:11px;font-weight:750; }.theme-choice-button.active { color:#fff;background:var(--green-700);border-color:var(--green-700); }.version-badge { color:var(--green-700);background:var(--green-100);padding:6px 8px;border-radius:7px;font-weight:850;font-size:11px; }.danger-row .setting-icon { background:#fff0ef;color:var(--danger); }.future-note { margin-top:20px;padding:18px 20px;border-radius:15px;background:linear-gradient(105deg,var(--green-100),var(--surface));display:flex;gap:13px; }.future-note>span { color:var(--green-700);font-size:20px; }.future-note strong { font-size:13px; }.future-note p { margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.5; }
/* Finance tools, reports, loans & search */
.finance-toolbar { display:flex;justify-content:flex-end;margin:-8px 0 16px; }.finance-toolbar input { width:min(330px,100%); }.record-search-label { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }.panel-helper { margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.5; }.budget-panel { margin-top:20px; }.budget-alerts { display:grid;gap:10px; }.budget-alert { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px 15px;border-radius:13px;background:var(--surface-alt); }.budget-alert strong { display:block;font-size:13px; }.budget-alert p { margin:4px 0 0;color:var(--muted);font-size:11px; }.budget-alert-actions { display:flex;align-items:center;gap:9px; }.budget-progress { grid-column:1/-1;height:7px;border-radius:99px;background:var(--border);overflow:hidden; }.budget-progress i { display:block;height:100%;border-radius:inherit;background:var(--green-600); }.budget-alert.warning .budget-progress i { background:#d69132; }.budget-alert.over .budget-progress i { background:var(--danger); }.budget-status { padding:5px 7px;border-radius:7px;background:var(--green-100);color:var(--green-800);font-size:10px;font-weight:850;white-space:nowrap; }.budget-alert.warning .budget-status { background:#fff4dc;color:#9b681e; }.budget-alert.over .budget-status { background:#fff0ef;color:var(--danger); }.inline-delete { border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:3px 5px;border-radius:6px; } .inline-edit { border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:3px 5px;border-radius:6px; } .inline-edit:hover { background:var(--green-100);color:var(--green-700); }.inline-delete:hover { background:#fff0ef;color:var(--danger); }.report-toolbar { display:flex;justify-content:flex-end;margin:-8px 0 18px; }.report-toolbar label { width:min(240px,100%); }.report-overview { margin-bottom:20px; }.farm-report-list { display:grid;gap:11px; }.farm-report-row { display:grid;grid-template-columns:minmax(120px,1.2fr) repeat(3,minmax(90px,.7fr));gap:15px;align-items:center;padding:16px 0;border-top:1px solid var(--border); }.farm-report-row:first-child { border-top:0;padding-top:0; }.farm-report-row h3 { margin:0;font-size:14px; }.farm-report-row p { margin:4px 0 0;color:var(--muted);font-size:11px; }.report-value { display:grid;gap:4px; }.report-value span { color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.55px; }.report-value strong { font-size:14px; }.report-value.profit strong { color:var(--green-700); }.loan-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px; }.loan-card { padding:20px;border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow); }.loan-card-head { display:flex;justify-content:space-between;gap:12px;align-items:flex-start; }.loan-card h3 { margin:0;font-size:16px; }.loan-card p { margin:5px 0 0;color:var(--muted);font-size:11px; }.loan-status { padding:5px 7px;border-radius:7px;background:var(--green-100);color:var(--green-800);font-size:10px;font-weight:850;white-space:nowrap; }.loan-status.due { background:#fff4dc;color:#9b681e; }.loan-status.overdue { background:#fff0ef;color:var(--danger); }.loan-values { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px; }.loan-values div { padding:10px;background:var(--surface-alt);border-radius:10px;display:grid;gap:4px; }.loan-values span { color:var(--muted);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.55px; }.loan-values strong { font-size:13px; }.loan-progress { height:7px;margin-top:15px;border-radius:99px;background:var(--border);overflow:hidden; }.loan-progress i { display:block;height:100%;border-radius:inherit;background:var(--green-600); }.loan-footer { display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;color:var(--muted);font-size:10px; }.loan-footer .text-button { color:var(--danger); }.form-hint { margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.5; }.search-input-label { display:grid;gap:7px;color:var(--ink);font-weight:750;font-size:12px; }.search-results { display:grid;gap:8px;margin-top:18px;max-height:45vh;overflow:auto; }.search-result { padding:12px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-alt);display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start; }.search-result-icon { width:27px;height:27px;border-radius:8px;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;font-weight:850;font-size:12px; }.search-result strong { display:block;font-size:12px; }.search-result p { margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.45; }.search-empty { padding:20px 8px;text-align:center;color:var(--muted);font-size:12px; }
/* Forms & modals */
label { display:grid;gap:7px;color:var(--ink);font-weight:750;font-size:12px; } input,select,textarea { width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 11px;background:var(--surface);color:var(--ink);outline:none;transition:.2s; } input:focus,select:focus,textarea:focus { border-color:var(--green-600);box-shadow:0 0 0 3px rgba(41,148,95,.1); } textarea { min-height:82px;resize:vertical; } label small { color:var(--muted);font-size:10px;font-weight:600;margin-top:-3px; }.modal { position:fixed;z-index:100;inset:0;padding:20px;background:rgba(14,28,19,.46);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center; }.modal.open { display:flex;animation:modal-fade .2s ease; }.modal-card { width:min(650px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:19px;padding:23px;box-shadow:0 24px 60px rgba(0,0,0,.25); }.modal-small { width:min(510px,100%); }.modal-header { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px; }.modal-header h2 { margin:0;font-size:21px;letter-spacing:-.7px; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px; }.full-width { grid-column:1/-1; }.modal-actions { margin-top:22px;display:flex;justify-content:flex-end;gap:9px; }.confirm-card { width:min(395px,100%);text-align:center;padding:32px; }.confirm-icon { height:47px;width:47px;display:grid;place-items:center;margin:0 auto 14px;border-radius:14px;background:#fff0ef;color:var(--danger);font-size:23px; }.confirm-card h2 { margin:0;font-size:21px; }.confirm-card p { margin:9px auto 0;color:var(--muted);font-size:13px;line-height:1.55;max-width:300px; }.confirm-card .modal-actions { justify-content:center; }.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }.toast { position:fixed;z-index:200;bottom:22px;left:50%;transform:translate(-50%,20px);background:#1f3527;color:#fff;padding:11px 15px;border-radius:10px;font-size:12px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.25s; }.toast.show { opacity:1;transform:translate(-50%,0); }.sidebar-backdrop { display:none; }
@media (max-width:1050px) { .stats-grid { grid-template-columns:repeat(3,1fr); }.stats-grid .stat-card:last-child { grid-column:auto; }.record-grid { grid-template-columns:repeat(2,1fr); }.landing-main { grid-template-columns:1fr .8fr; }.hero-copy h1 { font-size:55px; }.calendar-card { grid-template-columns:150px 1fr;gap:15px; } }
@media (max-width:800px) { .sidebar { transform:translateX(-100%);transition:transform .25s;box-shadow:10px 0 30px rgba(0,0,0,.11); }.sidebar.open { transform:translateX(0); }.sidebar-backdrop.open { display:block;position:fixed;z-index:35;inset:0;background:rgba(0,0,0,.35); }.close-sidebar,.menu-button { display:grid; }.main-content { width:100%;margin-left:0;padding:0 20px 28px; }.app-header { min-height:75px; }.today-label { display:none; }.landing-main { grid-template-columns:1fr; padding-top:15px; }.hero-visual { min-height:335px;max-width:610px;width:100%;justify-self:center; }.features-strip { grid-template-columns:1fr; }.landing-footer { display:none; }.landing-page { padding-bottom:23px; }.dashboard-grid,.finance-grid,.calculator-layout,.charts-grid,.backup-grid { grid-template-columns:1fr; }.profit-result { min-height:280px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.stat-card:last-child { grid-column:span 2; }.season-panel { align-items:flex-start;flex-direction:column; }.season-values { width:100%;justify-content:space-between; }.calendar-card { grid-template-columns:1fr; }.analytics-highlights { grid-template-columns:repeat(3,1fr); }.profit-summary-panel { grid-template-columns:1fr; }.inventory-head { display:none; }.inventory-row { grid-template-columns:1.2fr .8fr 60px;gap:8px;padding:14px; }.inventory-row .type-pill,.inventory-row .stock-state { display:none; }.inventory-row .stock-actions { grid-column:3;grid-row:1; }.inventory-row .stock-quantity { grid-column:2;grid-row:1; }.inventory-row .inventory-name { min-width:0; }.page-intro { align-items:flex-start;flex-direction:column; }.page-intro .button,.page-intro .button-row { width:auto; }.data-status { align-items:flex-start;flex-direction:column; }.setting-row { align-items:flex-start;flex-direction:column; }.setting-row .button { width:100%; }.setting-row .theme-choice { width:100%; }.theme-choice-button { flex:1; }.record-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .landing-nav .brand-logo { width:62px; height:62px; } .sidebar .brand-logo { width:56px; height:56px; } .sidebar-brand-name { font-size:16px; } .container { width:min(100% - 32px,1180px); }.landing-nav { height:76px; }.landing-nav .button { min-height:37px;padding:8px 10px;font-size:12px; }.hero-copy h1 { font-size:46px;letter-spacing:-3px; }.hero-text { font-size:15px; }.hero-metrics { gap:20px;margin-top:34px; }.hero-visual { min-height:278px;border-radius:22px; }.sun { transform:scale(.7);top:19px;right:40px; }.hero-card { transform:scale(.85); }.hero-card-top { left:8px;top:29px;transform-origin:top left; }.hero-card-bottom { right:2px;bottom:25px;transform-origin:bottom right; }.plant { transform:scale(.7);bottom:-2px; }.plant-one { left:32px; }.plant-two{left:35%;}.plant-three{right:10%;}.features-strip article { padding:15px; }.main-content { padding:0 14px 24px; }.header-title h1 { font-size:20px; }.welcome-banner { padding:25px;min-height:182px; }.welcome-banner h2 { font-size:24px; }.banner-illustration { display:none; }.stats-grid { gap:10px;margin:14px 0; }.stat-card { min-height:108px;padding:14px; }.stat-card strong { font-size:20px; }.panel { padding:17px; }.record-grid { grid-template-columns:1fr;gap:12px; }.finance-summary { grid-template-columns:1fr 1fr; }.finance-summary .stat-card:last-child { grid-column:auto; }.season-values { gap:15px; }.season-values strong { font-size:15px; }.quick-actions { gap:8px; }.quick-actions button { min-height:78px; }.form-grid,.calculator-form { grid-template-columns:1fr; }.full-width { grid-column:auto; }.modal { padding:10px; }.modal-card { padding:18px;max-height:calc(100vh - 20px); }.modal-actions .button { flex:1; }.result-values { grid-template-columns:1fr;gap:7px;margin-top:20px; }.profit-result { min-height:350px;padding:25px; }.analytics-highlights { grid-template-columns:1fr;gap:10px; }.analytics-highlight { padding:14px;display:flex;align-items:center;justify-content:space-between; }.analytics-highlight strong { margin:0; }.calendar-key { gap:9px; }.timeline { gap:3px; }.timeline-stage span { font-size:8px; }.timeline-stage small { font-size:8px; }.backup-card { min-height:205px; }.backup-status { gap:10px; }.setting-row { padding:17px; }.button-row { width:100%; }.button-row .button { flex:1; }.crop-database-note { align-items:flex-start; }.toast { max-width:calc(100% - 28px);text-align:center; } }
@media (max-width:800px) { .loan-list { grid-template-columns:1fr; }.farm-report-row { grid-template-columns:1fr repeat(3,minmax(85px,1fr)); }.finance-toolbar { justify-content:stretch; }.finance-toolbar input { width:100%; } }
@media (max-width:520px) { .farm-report-row { grid-template-columns:1fr 1fr;gap:12px; }.farm-report-row h3 { grid-column:1/-1; }.loan-values { grid-template-columns:1fr; }.report-toolbar { justify-content:stretch; }.report-toolbar label { width:100%; }.budget-alert { grid-template-columns:1fr; }.budget-alert-actions { justify-content:space-between; }.budget-progress { grid-column:auto; } }

/* ===================== Dashboard refresh ===================== */
.sidebar {
  overflow: hidden;
}
.side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 3px 8px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(31,122,77,.25) transparent;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(31,122,77,.25); border-radius: 99px; }

.dashboard-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, .9fr);
  gap: 20px;
  align-items: stretch;
}
.dashboard-overview-grid .welcome-banner,
.dashboard-overview-grid .weather-card {
  margin: 0;
  min-height: 290px;
}
.dashboard-overview-grid .welcome-banner {
  height: 100%;
}
.dashboard-overview-grid .banner-illustration {
  font-size: 86px;
}

.weather-card {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
}
.weather-kicker {
  margin: 0 0 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.15px;
  font-weight: 800;
  color: #d2edb9;
}
.weather-icon {
  position: relative;
  z-index: 1;
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.12));
}
.weather-forecast {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 8px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}
.weather-forecast::-webkit-scrollbar { height: 6px; }
.weather-forecast::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 99px; }
.weather-forecast::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 99px; }
.weather-day {
  flex: 0 0 min(155px, calc((100% - 20px) / 3));
  min-width: 125px;
  scroll-snap-align: start;
}

.dashboard-section {
  margin-top: 24px;
}
.dashboard-section-heading {
  margin: 0 0 12px 2px;
}
.dashboard-section-heading .section-eyebrow {
  margin-bottom: 3px;
}
.dashboard-section-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.7px;
}
.dashboard-section .stats-grid {
  margin: 0;
}
.dashboard-section-activity .content-grid {
  margin-top: 0;
}
.dashboard-section-finance .season-panel {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .dashboard-overview-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-overview-grid .welcome-banner,
  .dashboard-overview-grid .weather-card {
    min-height: 230px;
  }
  .dashboard-overview-grid .weather-card {
    min-height: 280px;
  }
}

@media (max-width: 800px) {
  .side-nav {
    padding-bottom: 10px;
  }
  .dashboard-overview-grid {
    gap: 14px;
  }
  .dashboard-section {
    margin-top: 19px;
  }
  .dashboard-section-heading {
    margin-bottom: 9px;
  }
  .dashboard-overview-grid .welcome-banner,
  .dashboard-overview-grid .weather-card {
    min-height: 220px;
  }
}

@media (max-width: 520px) {
  .dashboard-overview-grid .welcome-banner {
    min-height: 210px;
  }
  .dashboard-overview-grid .weather-card {
    min-height: 275px;
    padding: 20px;
  }
  .weather-day {
    flex-basis: 135px;
  }
  .weather-forecast {
    margin-right: -8px;
    padding-right: 10px;
  }
}

/* Profile card in the sidebar: keep long names inside the card */
.sidebar-bottom { min-width: 0; }
.profile-slot { min-width: 0; width: 100%; }
.user-chip {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 9px 8px 9px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
.user-chip:hover { background: var(--green-100); }
.user-chip:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.user-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-700);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
.user-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-meta strong,
.user-meta span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-meta strong { color: var(--ink); font-size: 12px; line-height: 1.25; }
.user-meta span { color: var(--muted); font-size: 10px; line-height: 1.25; }
.profile-menu-button {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 520px) {
  .user-chip { padding: 8px 7px 8px 9px; gap: 8px; }
  .user-avatar { width: 35px; height: 35px; min-width: 35px; }
  .user-meta strong { font-size: 11px; }
}