
:root {
  --blue:#1e3a8a;
  --blue-2:#172554;
  --gold:#d97706;
  --green:#059669;
  --red:#dc2626;
  --amber:#f59e0b;
  --bg:#f3f4f6;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --shadow:0 20px 50px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Tahoma,Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%}
.no-print{}
.mobile-header{display:none;background:var(--blue);color:white;position:sticky;top:0;z-index:80;padding:.8rem 1rem;align-items:center;justify-content:space-between;box-shadow:0 4px 20px rgba(0,0,0,.18)}
.mobile-brand{display:flex;align-items:center;gap:.7rem}
.mobile-brand img{width:42px;height:42px;border-radius:12px;background:white;object-fit:contain;padding:.15rem}
.mobile-brand span{display:block;color:#bfdbfe;font-size:.78rem}
.icon-button{border:0;border-radius:10px;background:rgba(255,255,255,.15);color:white;font-size:1.35rem;padding:.45rem .7rem}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:320px;background:white;position:fixed;inset:0 auto 0 0;z-index:70;box-shadow:18px 0 60px rgba(15,23,42,.12);display:flex;flex-direction:column;overflow-y:auto}
.sidebar-head{background:linear-gradient(145deg,var(--blue),var(--blue-2));color:white;padding:1.5rem}
.brand-row{display:flex;gap:1rem;align-items:center}
.brand-logo{width:58px;height:58px;object-fit:contain;background:white;border-radius:16px;padding:.25rem}
.brand-row h1{margin:0;font-size:1.65rem;line-height:1}
.brand-row p{margin:.35rem 0 0;color:#dbeafe;font-family:ui-monospace,monospace;font-size:.85rem}
.subtitle{font-size:.95rem;line-height:1.45;margin:1.2rem 0}
.status-line{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.14);padding:.75rem;border-radius:14px}
.status-dot{width:12px;height:12px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 8px rgba(34,197,94,.12)}
.main-nav{padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.nav-item{border:0;background:white;color:#4b5563;border-radius:14px;padding:1rem 1.1rem;display:flex;align-items:center;gap:.9rem;font-weight:800;text-align:left;transition:.2s}
.nav-item:hover{background:#eff6ff;transform:translateX(3px)}
.nav-item.active{background:#24409a;color:white;box-shadow:0 14px 35px rgba(30,58,138,.25);border-right:4px solid var(--gold)}
.language-box{margin:0 1rem 1rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.language-box label{font-weight:800;color:var(--blue)}
.language-box select{border:2px solid #111827;border-radius:12px;padding:.7rem 1rem;background:white;font-weight:800;color:var(--blue)}
.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding:1rem;display:flex;gap:.8rem;align-items:center;background:#f8fafc}
.avatar{width:44px;height:44px;border-radius:999px;background:var(--blue);color:white;font-weight:900;display:grid;place-items:center}
.sidebar-footer small{display:block;color:#6b7280;margin-top:.15rem}
.main-content{flex:1;margin-left:320px;padding:2rem;max-width:1500px}
.module{display:none}
.module.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-head{margin-bottom:1.25rem}
.page-head h2{font-size:2rem;line-height:1.1;color:var(--blue);margin:.45rem 0}
.page-head p{color:var(--muted);margin:0;font-size:1.05rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.32rem .7rem;font-size:.8rem;font-weight:900}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-green{background:#d1fae5;color:#047857}
.badge-gold{background:#fef3c7;color:#92400e}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-gray{background:#f3f4f6;color:#374151}
.card{background:white;border:1px solid var(--line);border-radius:22px;padding:1.25rem;box-shadow:var(--shadow)}
.card-title{margin:0 0 1rem;font-size:1.25rem;color:var(--blue);display:flex;align-items:center;gap:.5rem}
.notice{border:1px solid var(--line);background:#f8fafc;padding:1rem;border-radius:16px;color:#374151}
.notice.blue{border-color:#bfdbfe;background:#eff6ff;color:#1e3a8a}
.notice.gold{border-color:#fde68a;background:#fffbeb;color:#92400e}
.notice.red{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.crop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem}
.crop-card{background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.crop-card:hover{transform:translateY(-4px)}
.crop-card.selected{outline:3px solid rgba(30,58,138,.35);border-color:var(--blue)}
.crop-hero{position:relative;min-height:135px;color:white;padding:1rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.crop-hero:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 24px);opacity:.55}
.crop-hero>*{position:relative}
.crop-hero h3{font-size:1.55rem;margin:0}
.crop-hero p{margin:.25rem 0 0;color:rgba(255,255,255,.85);font-family:ui-monospace,monospace}
.crop-body{padding:1rem;display:flex;flex-direction:column;gap:1rem}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.info-tile{background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;padding:.75rem}
.info-tile small{display:block;color:#6b7280;font-size:.72rem;margin-bottom:.25rem}
.info-tile strong{color:var(--blue);font-family:ui-monospace,monospace}
.bbch-list{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.45rem}
.bbch-pill{display:grid;place-items:center;min-width:34px;height:30px;border-radius:8px;color:white;font-weight:900;font-size:.72rem}
.action-row{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{border:0;border-radius:14px;background:var(--blue);color:white;padding:.85rem 1rem;font-weight:900;box-shadow:0 10px 24px rgba(30,58,138,.18);display:inline-flex;justify-content:center;align-items:center;gap:.45rem;text-decoration:none}
.btn:hover{filter:brightness(.97);transform:translateY(-1px)}
.btn.small{font-size:.9rem;padding:.65rem .85rem;border-radius:12px}
.btn.secondary{background:#e5e7eb;color:#111827;box-shadow:none}
.btn.green{background:var(--green)}
.btn.gold{background:var(--gold)}
.btn.red{background:var(--red)}
.btn.full{width:100%}
.form-grid{display:grid;gap:.8rem}
.field label{display:block;font-weight:800;color:#374151;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;border:1px solid #d1d5db;border-radius:14px;padding:.85rem .95rem;background:white}
.field textarea{min-height:90px;resize:vertical}
.table{border-collapse:collapse;width:100%;font-size:.93rem;background:white;border-radius:12px;overflow:hidden}
.table th,.table td{border-top:1px solid var(--line);padding:.75rem;text-align:left;vertical-align:top}
.table th{background:#f8fafc;color:#374151}
.timeline{display:grid;gap:.75rem}
.window-card{border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:16px;padding:1rem;background:white}
.window-card.high{border-left-color:var(--red)}
.window-card.medium{border-left-color:var(--amber)}
.window-card.low{border-left-color:var(--green)}
.type-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.type-tag{border-radius:999px;padding:.25rem .55rem;font-size:.78rem;font-weight:900}
.type-fertilizer{background:#d1fae5;color:#047857}
.type-fungicide{background:#dbeafe;color:#1d4ed8}
.type-herbicide{background:#fef3c7;color:#92400e}
.type-insecticide{background:#fee2e2;color:#991b1b}
.type-irrigation{background:#cffafe;color:#0e7490}
.type-harvest{background:#ede9fe;color:#5b21b6}
.type-surveillance{background:#f3f4f6;color:#374151}
.calendar-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.4rem;margin-top:.8rem}
.month-box{min-height:110px;border:1px solid var(--line);border-radius:14px;background:white;padding:.45rem}
.month-title{font-weight:900;color:var(--blue);font-size:.8rem;margin-bottom:.35rem}
.month-chip{display:block;margin:.25rem 0;border-radius:8px;padding:.28rem .35rem;background:#eff6ff;color:#1e3a8a;font-size:.72rem;font-weight:800}
.progress{height:14px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--amber),var(--green));border-radius:999px}
.map-area{height:430px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#e5e7eb}
#parcel-map{height:100%;width:100%}
.report-page{max-width:900px;margin:0 auto;background:white;border:1px solid var(--line);border-radius:22px;padding:1.4rem;box-shadow:var(--shadow)}
.report-cover{display:flex;gap:1rem;align-items:center;background:linear-gradient(145deg,var(--blue),var(--blue-2));color:white;border-radius:18px;padding:1.2rem;margin-bottom:1rem}
.report-cover img{width:82px;height:82px;background:white;border-radius:18px;padding:.25rem;object-fit:contain}
.report-section{border:1px solid var(--line);border-radius:16px;padding:1rem;margin-top:1rem}
.report-section h3{margin:0 0 .8rem;color:var(--blue)}
.mobile-overlay{display:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .sidebar{left:auto;right:0}
html[dir="rtl"] .main-content{margin-left:0;margin-right:320px}
html[dir="rtl"] .nav-item.active{border-right:0;border-left:4px solid var(--gold)}
html[dir="rtl"] .table th,html[dir="rtl"] .table td{text-align:right}
html[dir="rtl"] .mono, html[dir="rtl"] input[type=number]{direction:ltr;unicode-bidi:isolate;text-align:left}
@media(max-width:1100px){
  .mobile-header{display:flex}
  .sidebar{transform:translateX(-105%);transition:.25s;top:0}
  .sidebar.open{transform:translateX(0)}
  html[dir="rtl"] .sidebar{transform:translateX(105%)}
  html[dir="rtl"] .sidebar.open{transform:translateX(0)}
  .mobile-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
  .main-content,html[dir="rtl"] .main-content{margin:0;padding:1rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .calendar-months{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .crop-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .calendar-months{grid-template-columns:1fr}
}
@media print{
  .no-print,.sidebar,.mobile-header,.mobile-overlay{display:none!important}
  .main-content,html[dir="rtl"] .main-content{margin:0!important;padding:0}
  body{background:white}
  .module{display:none!important}
  #module-rapport{display:block!important}
  .report-page{box-shadow:none;border:0}
}


.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-top:.7rem}
.profile-card{border:1px solid var(--line);border-radius:16px;background:#f8fafc;padding:1rem}
.profile-card h4{margin:.1rem 0 .6rem;color:var(--blue);font-size:1rem}
.profile-card p{margin:0;color:#4b5563;line-height:1.55}
.profile-card ul{margin:.2rem 0 0 1rem;padding:0;color:#4b5563}
.profile-card li{margin:.25rem 0}
.diagnostic-result h4{margin:1rem 0 .45rem;color:var(--blue)}
.risk-line{margin:.85rem 0}
.risk-line>div:first-child{display:flex;justify-content:space-between;gap:.8rem;align-items:center;margin-bottom:.35rem}
.risk-low,.risk-medium,.risk-high{border-radius:999px;padding:.15rem .55rem;font-size:.75rem;font-weight:900}
.risk-low{background:#dcfce7;color:#166534}
.risk-medium{background:#fef3c7;color:#92400e}
.risk-high{background:#fee2e2;color:#991b1b}


/* V5 detailed user guide */
.guide-toolbar{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.guide-toolbar input{flex:1;min-width:240px;border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;background:#fff}
.guide-workflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin:1rem 0}
.guide-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;box-shadow:var(--shadow);display:flex;gap:.9rem;align-items:flex-start}
.guide-step>strong{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--blue);color:#fff;border-radius:999px;font-family:ui-monospace,monospace;flex:0 0 auto}
.guide-step h4{margin:0 0 .25rem;color:var(--blue)}
.guide-step p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}
.guide-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1rem;align-items:start}
.guide-toc{position:sticky;top:1rem}
.guide-toc h3{margin-top:0;color:var(--blue)}
.guide-toc-item{width:100%;display:block;text-align:left;border:0;background:#f8fafc;border-radius:12px;padding:.75rem .85rem;margin:.35rem 0;color:#1f2937;font-weight:800}
.guide-toc-item:hover{background:#e0ecff;color:var(--blue)}
.guide-content{display:grid;gap:1rem}
.guide-section{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:18px;padding:1.25rem;box-shadow:var(--shadow);scroll-margin-top:1rem}
.guide-section h3{margin:.1rem 0 .8rem;color:var(--blue);font-size:1.25rem}
.guide-section p{color:#374151;line-height:1.65;margin:.55rem 0}
.guide-checklist{border-left-color:var(--gold)}
.guide-checklist ul{margin:.3rem 0 0;padding-left:1.2rem;color:#374151;line-height:1.7}
.hidden-by-search{display:none!important}
html[dir="rtl"] .guide-toc-item{text-align:right}
html[dir="rtl"] .guide-section{border-left:1px solid var(--line);border-right:5px solid var(--blue)}
@media (max-width: 900px){.guide-layout{grid-template-columns:1fr}.guide-toc{position:relative;top:auto}}

/* V5.1 dynamic i18n fix */
html[dir="rtl"] .profile-grid,
.profile-grid[dir="rtl"],
.card[dir="rtl"] {
  text-align: right;
}
html[dir="rtl"] .profile-card ul,
.profile-grid[dir="rtl"] .profile-card ul,
.card[dir="rtl"] ul {
  margin: .2rem 1.2rem 0 0;
  padding: 0;
}
html[dir="rtl"] .profile-card li,
.profile-grid[dir="rtl"] .profile-card li,
.card[dir="rtl"] li {
  padding-inline-start: 0;
}
