/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#f7fbf8;--bg-soft:#eef7f1;--surface:rgba(255,255,255,.94);--surface-strong:#ffffff;--surface-2:#f8fbff;--border:rgba(148,163,184,.18);--text:#122219;--text-muted:#5d7568;--text-soft:#83978c;--primary:#1fc16b;--cyan:#25b6e6;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--shadow-sm:0 8px 24px rgba(17,37,28,.05);--shadow-md:0 18px 40px rgba(17,37,28,.08);--radius-sm:12px;--radius-md:18px;--radius-lg:24px;--radius-xl:30px;--sidebar-w:254px;--sidebar-collapsed:82px;--topbar-h:80px;
}
:root[data-theme="dark"]{
  --bg:#07111b;--bg-soft:#0b1724;--surface:rgba(10,20,34,.94);--surface-strong:#0d1930;--surface-2:#0f2038;--border:rgba(148,163,184,.14);--text:#edf4ff;--text-muted:#b5c3d8;--text-soft:#8ea2bc;--shadow-sm:0 8px 24px rgba(0,0,0,.24);--shadow-md:0 18px 40px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Prompt',system-ui,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(31,193,107,.10), transparent 26%),
    radial-gradient(circle at top right, rgba(37,182,230,.08), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 94%, white) 100%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
svg{display:block}
.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.simple-card{width:100%;max-width:720px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px;box-shadow:var(--shadow-sm)}

.login-compact-page{min-height:100vh;display:grid;place-items:center;padding:18px}
.login-compact-card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:var(--shadow-md)}
.login-brand-row{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.login-brand-mark{flex:0 0 54px;width:54px;height:54px}
.login-title-block h1{margin:0;font-size:1.85rem;line-height:1.1}
.login-title-block p{margin:4px 0 0;color:var(--text-muted);font-size:.96rem;line-height:1.5}
.login-compact-form{gap:16px}
.field,.owner-field{display:grid;grid-gap:8px;gap:8px}
.field span,.owner-field span{font-size:.92rem;font-weight:600}
.field input,.owner-field input,.owner-field select{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;box-shadow:var(--shadow-sm)
}
.field input:focus,.owner-field input:focus,.owner-field select:focus{border-color:var(--primary)}
.login-submit-btn{width:100%;min-height:52px;border-radius:16px;font-size:1rem;font-weight:600}
.full-span{grid-column:1/-1}

.pill-btn,.icon-btn,.sidebar-toggle,.profile-action,.primary-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);transition:.18s ease
}
.primary-btn{border:0;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 14px;border-radius:14px}
.pill-btn.ghost{background:var(--surface)}
.icon-btn,.sidebar-toggle{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.profile-action{width:100%;text-align:left;border-radius:14px;padding:12px;background:transparent}
.primary-btn:hover,.pill-btn:hover,.icon-btn:hover,.sidebar-toggle:hover,.profile-action:hover{transform:translateY(-1px)}
.danger-outline{color:#b91c1c;border-color:rgba(239,68,68,.20);background:rgba(239,68,68,.05)}

.error-box,.success-box{border-radius:14px;padding:12px 14px;font-size:.92rem;line-height:1.5}
.error-box{background:rgba(239,68,68,.10);color:#b91c1c;border:1px solid rgba(239,68,68,.16)}
.success-box{background:rgba(34,197,94,.10);color:#15803d;border:1px solid rgba(34,197,94,.16)}
.subtle-line{color:var(--text-soft);font-size:.86rem;margin-top:4px}
.small{font-size:.9rem;color:var(--text-soft)}

.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) 1fr}
.shell.collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}
.sidebar{
  position:-webkit-sticky;
  position:sticky;top:0;height:100vh;padding:14px 10px;background:linear-gradient(180deg, color-mix(in oklab, var(--surface-strong) 92%, white), var(--surface));border-right:1px solid var(--border);display:flex;flex-direction:column;gap:18px;z-index:30
}
.brand{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 6px}
.brand-mark{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--cyan));flex:0 0 44px;box-shadow:var(--shadow-md)}
.brand-mark-inner{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:#fff}
.brand-copy h1{margin:0;font-size:1.02rem;line-height:1.1;font-weight:700}
.sidebar-toggle{margin-left:auto}
.nav-list{display:grid;grid-gap:8px;gap:8px}
.nav-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:18px;color:var(--text-muted);transition:.18s ease}
.nav-item:hover{background:color-mix(in oklab, var(--surface-strong) 88%, white 12%);color:var(--text)}
.nav-item.active{color:var(--text);background:linear-gradient(90deg, rgba(31,193,107,.12), rgba(37,182,230,.08));box-shadow:inset 0 0 0 1px rgba(31,193,107,.10)}
.nav-icon{width:22px;display:inline-flex;justify-content:center;align-items:center;flex:0 0 22px}
.nav-label{font-size:.98rem;font-weight:500}
.shell.collapsed .brand-copy,.shell.collapsed .nav-label{display:none}
.shell.collapsed .sidebar{padding-inline:8px}
.shell.collapsed .brand{justify-content:center;padding-inline:0}
.shell.collapsed .sidebar-toggle{margin-left:0}
.shell.collapsed .nav-item{justify-content:center;padding:0}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:-webkit-sticky;
  position:sticky;top:0;z-index:25;min-height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px;border-bottom:1px solid var(--border);background:color-mix(in oklab, var(--bg) 80%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)
}
.topbar-right{display:flex;align-items:center;gap:12px}
.profile-wrap{position:relative}
.profile-chip{display:flex;align-items:center;gap:12px;min-width:240px;padding:10px 14px;border-radius:18px;border:1px solid var(--border);background:var(--surface)}
.avatar{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#d20fae,#4f46e5)}
.avatar.large{width:54px;height:54px}
.avatar.xl{width:72px;height:72px}
.profile-copy{display:grid;grid-gap:2px;gap:2px;text-align:left}
.profile-copy strong{font-size:.93rem}
.profile-copy span{font-size:.83rem;color:var(--text-soft);text-transform:capitalize}
.profile-arrow{margin-left:auto;color:var(--text-soft)}
.profile-menu{position:absolute;top:calc(100% + 10px);right:0;width:300px;padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--surface-strong);display:grid;grid-gap:8px;gap:8px;z-index:50}
.profile-menu-elevated{box-shadow:0 22px 60px rgba(15,23,42,.18)}
.profile-menu-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.profile-menu-head strong,.profile-menu-head span{display:block}
.profile-menu-head span{margin-top:2px;font-size:.84rem;color:var(--text-soft)}
.icon-action{display:flex;align-items:center;gap:10px}

.page{padding:28px;display:grid;grid-gap:22px;gap:22px}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.page-header h2{margin:0;font-size:1.95rem;line-height:1.06}
.simple-header{padding:2px 2px 0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:18px;gap:18px}
.panel-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:18px;gap:18px;align-items:start}
.card{border-radius:24px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.kpi-card{padding:22px;color:#fff}
.kpi-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kpi-label{font-size:.92rem;opacity:.95}
.kpi-value{margin-top:8px;font-size:3rem;font-weight:700;line-height:1}
.kpi-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.mint{background:linear-gradient(135deg,#18c178,#34b7e5)}
.blue{background:linear-gradient(135deg,#4d9cff,#736ef7)}
.orange{background:linear-gradient(135deg,#f3b23a,#fb8a57)}
.pink{background:linear-gradient(135deg,#ef6d90,#c678df)}

.padded{padding:22px}
.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-header h3{margin:0;font-size:1.18rem}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:.81rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft)}
tbody tr:hover{background:color-mix(in oklab, var(--surface-2) 88%, transparent)}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;font-size:.82rem;font-weight:600}
.badge.success{background:rgba(34,197,94,.12);color:#15803d}
.badge.warning{background:rgba(245,158,11,.12);color:#b45309}
.badge.danger{background:rgba(239,68,68,.12);color:#b91c1c}
.badge.gray{background:rgba(148,163,184,.16);color:var(--text-muted)}

.filter-row{display:grid;grid-template-columns:2fr 1fr;grid-gap:18px;gap:18px}
.filter-row.one-wide{grid-template-columns:1fr}
.inline-actions{display:flex;flex-wrap:wrap;gap:8px}
.actions-end{display:flex;justify-content:flex-end;gap:10px}
.settings-profile-card{display:flex;gap:16px;align-items:center;padding:16px;border-radius:18px;border:1px solid var(--border);background:var(--surface-2)}
.check-row{display:flex;align-items:center;gap:10px}

.pagination-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px}
.pagination-meta{font-size:.9rem;color:var(--text-muted)}

.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.36);display:grid;place-items:center;padding:18px;z-index:100}
.modal-card{width:100%;background:var(--surface-strong);border:1px solid var(--border);border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.22)}
.modal-card.sm{max-width:440px}
.modal-card.md{max-width:620px}
.modal-card.lg{max-width:860px}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0;font-size:1.08rem}
.modal-body{padding:20px}
.modal-note{color:var(--text-muted);line-height:1.6}
.detail-stack{display:grid;grid-gap:12px;gap:12px}

.operator-wrap{min-height:100vh;max-width:720px;margin:0 auto;padding:20px;display:grid;grid-gap:18px;gap:18px}
.operator-header{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;gap:16px}
.operator-header h1{margin:0}
.operator-grid{display:grid;grid-gap:16px;gap:16px}
.operator-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--shadow-sm)}
.operator-card h3{margin-top:0;margin-bottom:10px}
.operator-card p{margin:0;color:var(--text-muted);line-height:1.7}

@media (max-width:1180px){
  .grid-4,.panel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .shell,.shell.collapsed{grid-template-columns:1fr}
  .sidebar{position:static;height:auto}
  .topbar,.page-header,.section-header{flex-direction:column;align-items:flex-start}
  .filter-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page{padding:18px}
  .grid-4,.panel-grid{grid-template-columns:1fr}
  .topbar{padding:14px 18px}
  .login-compact-card{padding:22px}
  .login-title-block h1,.page-header h2{font-size:1.7rem}
  .profile-chip{min-width:0;width:100%}
  .topbar-right{width:100%;flex-wrap:wrap}
  .pagination-bar{flex-direction:column;align-items:flex-start}
}

/* Wave 1 polish overrides */
.profile-copy strong,
.profile-menu-head strong,
.profile-menu-head span,
.icon-action span,
.profile-action {
  color: var(--text);
}
.profile-copy span {
  color: var(--text-soft);
}
.profile-chip:hover,
.profile-menu-elevated,
.icon-action:hover {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}
.temp-password-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 14px;
}
.temp-password-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.08em;
  word-break: break-all;
}
.change-password-card {
  max-width: 560px;
}
.compact-title {
  margin-bottom: 20px;
}
.policy-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.policy-card strong {
  display: block;
  margin-bottom: 6px;
}
.policy-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}
.change-password-submit {
  min-height: 54px;
  font-size: 1rem;
}
.modal-card .icon-btn {
  flex: 0 0 44px;
}


.farms-filter-row{
  grid-template-columns:2fr 1fr 1fr;
}

.modal-card.lg{
  max-width: 920px;
}
.modal-card .modal-body{
  max-height: min(76vh, 820px);
  overflow-y: auto;
}
.modal-scroll-form{
  align-items: start;
}
.sticky-actions{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: var(--surface-strong);
  padding-top: 10px;
  margin-top: 6px;
}
.operator-picker{
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.operator-picker > input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-sm);
}
.operator-picker-list{
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  padding: 8px;
}
.operator-picker-item{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.operator-picker-item strong{
  font-size: .95rem;
}
.operator-picker-item span{
  color: var(--text-soft);
  font-size: .84rem;
}
.operator-picker-item:hover,
.operator-picker-item.active{
  background: color-mix(in oklab, var(--surface-strong) 86%, white 14%);
}
.operator-picker-empty{
  padding: 10px 12px;
  color: var(--text-soft);
  font-size: .9rem;
}
.sensor-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
@media (max-width: 760px){
  .sensor-grid{
    grid-template-columns: 1fr;
  }
}

.check-row-large{
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.check-row-large input[type="checkbox"]{
  width: 18px;
  height: 18px;
}
.operator-picker-selected{
  font-size: .88rem;
  color: var(--primary);
  font-weight: 600;
  padding: 0 2px;
}

.weekday-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-gap:10px;
  gap:10px;
}
.weekday-chip{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  min-height:44px;
  border-radius:14px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.weekday-chip.active{
  background:linear-gradient(135deg,var(--primary),var(--cyan));
  color:#fff;
  border-color:transparent;
}
@media (max-width:760px){
  .weekday-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.three-up{
  grid-template-columns: 2fr 1fr 1fr;
}
.spec-cell{
  max-width: 360px;
  color: var(--text-soft);
  white-space: normal;
}
@media (max-width: 880px){
  .three-up{
    grid-template-columns: 1fr;
  }
}

.assigned-devices-block{
  display:grid;
  grid-gap:12px;
  gap:12px;
}
.section-subhead{
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
}
.device-assign-list{
  display:grid;
  grid-gap:10px;
  gap:10px;
  max-height:320px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-2);
  padding:10px;
}
.device-assign-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  grid-gap:12px;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.device-assign-meta{
  display:grid;
  grid-gap:4px;
  gap:4px;
}
.device-assign-meta span{
  color:var(--text-soft);
  font-size:.84rem;
}
.device-assign-qty input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}
@media (max-width:760px){
  .device-assign-row{
    grid-template-columns:1fr;
  }
}

.farm-col{
  min-width: 340px;
}


.automation-summary-line{
  color: var(--text-soft);
  font-size: .84rem;
}




.automation-builder-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  grid-gap:24px;
  gap:24px;
  align-items:start;
}

.automation-builder-main,
.automation-builder-side{
  min-width:0;
}

.automation-top-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-gap:16px;
  gap:16px;
}

.automation-top-full{
  grid-column:1 / -1;
}

.automation-farm-picker{
  display:grid;
  grid-gap:16px;
  gap:16px;
}

.automation-farm-results{
  display:grid;
  grid-gap:10px;
  gap:10px;
  max-height:320px;
  overflow:auto;
}

.automation-farm-result{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:14px 16px;
  border:1px solid var(--border-color, #e5e7eb);
  background:var(--card-bg, #fff);
  border-radius:16px;
  cursor:pointer;
  text-align:left;
}

.automation-farm-result.selected{
  border-color:var(--primary, #3b82f6);
  box-shadow:0 0 0 1px var(--primary, #3b82f6) inset;
}

.automation-farm-result span{
  color:var(--text-soft);
  font-size:.88rem;
}

.automation-routines-stack{
  display:grid;
  grid-gap:20px;
  gap:20px;
}

.automation-routine-card{
  border:1px solid var(--border-color, #e5e7eb);
  border-radius:22px;
  padding:18px;
  background:var(--card-bg, #fff);
  box-shadow:0 6px 24px rgba(15,23,42,.04);
}

.automation-routine-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.automation-routine-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.automation-routine-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-gap:16px;
  gap:16px;
}

.automation-section-card{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.14);
}

.automation-section-card h5{
  margin:0 0 12px;
  font-size:1rem;
}

.automation-weekday-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.weekday-chip{
  border:1px solid var(--border-color, #d1d5db);
  background:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:.86rem;
  cursor:pointer;
}

.weekday-chip.active{
  border-color:var(--primary, #3b82f6);
  color:var(--primary, #3b82f6);
  font-weight:600;
}

.automation-summary-block{
  display:grid;
  grid-gap:10px;
  gap:10px;
  margin-bottom:18px;
}

.automation-summary-block h4{
  margin:0;
  font-size:.96rem;
}

.automation-summary-list{
  display:grid;
  grid-gap:8px;
  gap:8px;
}

.automation-summary-item{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.12);
}

.automation-summary-item p{
  margin:6px 0 0;
  color:var(--text-soft);
  font-size:.88rem;
  line-height:1.45;
}

.automation-validation-list{
  margin:0;
  padding-left:18px;
  color:#b42318;
  display:grid;
  grid-gap:6px;
  gap:6px;
}

.automation-empty-note{
  color:var(--text-soft);
  padding:10px 0;
}

.sticky-card{
  position:-webkit-sticky;
  position:sticky;
  top:16px;
}

.success-box.compact{
  padding:10px 12px;
  margin:0;
}

@media (max-width: 1180px){
  .automation-builder-shell{
    grid-template-columns:1fr;
  }
  .sticky-card{
    position:static;
  }
}

@media (max-width: 720px){
  .automation-top-grid,
  .automation-routine-grid{
    grid-template-columns:1fr;
  }
  .automation-routine-head{
    flex-direction:column;
    align-items:flex-start;
  }
}




.automation-flow-connector{
  width:2px;
  height:20px;
  background:linear-gradient(180deg, rgba(59,130,246,.35), rgba(148,163,184,.12));
  margin:8px auto;
  border-radius:999px;
}

.flow-block{
  position:relative;
}

.flow-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:700;
  margin-bottom:14px;
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
}

.flow-rows-stack{
  display:grid;
  grid-gap:12px;
  gap:12px;
}

.flow-action-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,220px) auto;
  grid-gap:14px;
  gap:14px;
  align-items:end;
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(148,163,184,.18);
}

.flow-row-actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:2px;
}

.flow-delay-block{
  background:linear-gradient(180deg, rgba(250,204,21,.09), rgba(148,163,184,.08));
}

.automation-collapsed-preview{
  color:var(--text-soft);
  font-size:.92rem;
  line-height:1.5;
  padding:8px 2px 0;
}

.weekday-chip{
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#0f172a;
  border-radius:999px;
  padding:8px 13px;
  font-size:.86rem;
  cursor:pointer;
  font-weight:600;
}

.weekday-chip.active{
  background:#2563eb;
  border-color:#2563eb;
  color:#ffffff;
  box-shadow:0 6px 18px rgba(37,99,235,.18);
}

.weekday-chip:hover{
  border-color:#2563eb;
}

@media (max-width: 860px){
  .flow-action-row{
    grid-template-columns:1fr;
  }
}








.kpi-card.pink{
  background: linear-gradient(135deg, #ef6aa5 0%, #f48fb1 100%);
  color: #ffffff;
}

.kpi-card.purple{
  background: linear-gradient(135deg, #7c5cff 0%, #a855f7 100%);
  color: #ffffff;
}

.kpi-card.green{
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
}

.kpi-card.yellow{
  background: linear-gradient(135deg, #f4c542 0%, #f59e0b 100%);
  color: #ffffff;
}

.kpi-card.pink .kpi-label,
.kpi-card.purple .kpi-label,
.kpi-card.green .kpi-label,
.kpi-card.yellow .kpi-label{
  color: rgba(255,255,255,.94);
}

.kpi-card.pink .kpi-value,
.kpi-card.purple .kpi-value,
.kpi-card.green .kpi-value,
.kpi-card.yellow .kpi-value{
  color: #ffffff;
}

.kpi-card.pink .kpi-icon,
.kpi-card.purple .kpi-icon,
.kpi-card.green .kpi-icon,
.kpi-card.yellow .kpi-icon{
  color: #ffffff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
}


.ghost-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

.operator-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.operator-kpis{
  grid-template-columns:repeat(2,1fr);
}

.operator-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.operator-list{
  display:grid;
  grid-gap:12px;
  gap:12px;
}

.operator-list-item{
  display:grid;
  grid-gap:4px;
  gap:4px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface-2);
}

.operator-list-item.static{
  cursor:default;
}

.operator-list-item strong{
  font-size:1rem;
}

.operator-list-item span{
  color:var(--text-muted);
  line-height:1.5;
}

.operator-subblock{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--border);
  display:grid;
  grid-gap:4px;
  gap:4px;
}

.operator-mini{
  display:grid;
  grid-gap:4px;
  gap:4px;
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(148,163,184,.08);
}

@media (max-width:760px){
  .operator-kpis{
    grid-template-columns:1fr;
  }
  .operator-actions{
    width:100%;
  }
  .ghost-btn{
    width:100%;
  }
}


/* ===== Operator UI Stabilization ===== */
.op-shell{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  min-height:100vh;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.09), transparent 28%),
    radial-gradient(circle at top left, rgba(14,165,233,.08), transparent 24%),
    linear-gradient(180deg,#f6fbf8 0%, #eef4f1 100%);
}
.op-sidebar{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  height:100vh;
  padding:18px 14px;
  background:linear-gradient(180deg,#ffffff 0%, #f7faf8 100%);
  border-right:1px solid rgba(15,23,42,.08);
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.op-sidebar-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.op-brand-block{
  display:flex;
  align-items:center;
  gap:12px;
}
.op-brand-mark{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#20c997,#0ea5e9 55%, #8b5cf6 100%);
  box-shadow:0 14px 28px rgba(14,165,233,.22);
}
.op-brand-kicker{
  font-size:.78rem;
  color:#6b7280;
  margin-bottom:3px;
}
.op-sidebar-head h2{
  margin:0;
  font-size:1.55rem;
  line-height:1.05;
  color:#122119;
}
.op-farm-picker{
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#f4fbf7);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.op-farm-picker-label{
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:6px;
}
.op-farm-picker-value{
  font-weight:800;
  font-size:1.08rem;
  color:#122119;
}
.op-nav{
  display:grid;
  grid-gap:8px;
  gap:8px;
}
.op-nav-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.op-nav-icon{
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:800;
  color:#136f63;
  background:linear-gradient(180deg,#eafdf6,#dff7ef);
}
.op-nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  color:#24353b;
  text-decoration:none;
  border:1px solid transparent;
  transition:.18s ease;
}
.op-nav-item:hover{
  background:#f4faf7;
  border-color:rgba(15,23,42,.06);
}
.op-nav-item.active{
  background:linear-gradient(90deg,#dff7ec 0%, #eefaff 100%);
  border-color:rgba(14,165,233,.14);
  box-shadow:0 12px 26px rgba(16,185,129,.10);
}
.op-nav-item.active .op-nav-icon{
  color:#fff;
  background:linear-gradient(135deg,#10b981,#14b8a6 55%, #3b82f6 100%);
}
.op-nav-item.disabled{
  opacity:.65;
  border:1px dashed rgba(15,23,42,.12);
}
.op-nav-item small{
  color:#8b5cf6;
  font-weight:700;
}
.op-logout-btn{
  margin-top:auto;
  min-height:52px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:1rem;
  font-weight:800;
  background:linear-gradient(135deg,#0f172a,#111827 60%, #1d4ed8 100%);
  box-shadow:0 18px 30px rgba(15,23,42,.18);
  cursor:pointer;
}
.op-main{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr;
}
.op-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:10;
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  background:rgba(246,251,248,.86);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.op-topbar.vibrant{
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.12), transparent 28%),
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,248,244,.92));
}
.op-topbar-left{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.op-topbar-left h1{
  margin:0;
  font-size:1.95rem;
  line-height:1.02;
  letter-spacing:-.02em;
  color:#122119;
}
.op-topbar-left p{
  margin:4px 0 0;
  color:#667085;
  font-size:1rem;
}
.op-page-kicker{
  font-size:.82rem;
  color:#6b7280;
  margin-bottom:4px;
}
.op-topbar-right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.op-page{
  padding:20px;
  display:grid;
  grid-gap:18px;
  gap:18px;
}
.op-icon-btn{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg,#ffffff,#f7faf8);
  box-shadow:0 10px 22px rgba(15,23,42,.05);
  cursor:pointer;
}
.mobile-only{
  display:none;
}
.op-grid{
  display:grid;
  grid-gap:12px;
  gap:12px;
}
.op-grid.metrics-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.op-grid.metrics-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.op-hero-grid{
  display:grid;
  grid-gap:14px;
  gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.op-sensor-grid{
  display:grid;
  grid-gap:14px;
  gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.op-section-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:#fff;
  padding:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.07);
  position:relative;
  overflow:hidden;
}
.op-section-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#dbeafe,#ede9fe,#dcfce7,#ffedd5);
  opacity:.9;
}
.op-section-card.blue{
  background:linear-gradient(180deg,#ffffff 0%, #f2f8ff 100%);
}
.op-section-card.purple{
  background:linear-gradient(180deg,#ffffff 0%, #f8f3ff 100%);
}
.op-section-card.green{
  background:linear-gradient(180deg,#ffffff 0%, #effcf4 100%);
}
.op-section-card.orange{
  background:linear-gradient(180deg,#ffffff 0%, #fff6ea 100%);
}
.op-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.op-section-head h3{
  margin:0;
  font-size:1.14rem;
  line-height:1.1;
  color:#122119;
}
.op-section-head p{
  margin:5px 0 0;
  color:#667085;
  font-size:.94rem;
  line-height:1.5;
}
.op-hero-card,
.op-sensor-tile{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 36px rgba(15,23,42,.08);
}
.op-hero-card{
  min-height:138px;
  padding:16px 18px 18px;
}
.op-hero-card-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  position:relative;
  z-index:2;
}
.op-hero-copy{
  display:grid;
  grid-gap:8px;
  gap:8px;
}
.op-hero-label{
  font-size:.88rem;
  font-weight:800;
  color:rgba(255,255,255,.92);
}
.op-hero-value{
  font-size:2.2rem;
  line-height:1;
  letter-spacing:-.04em;
  color:#ffffff;
  text-shadow:0 1px 0 rgba(255,255,255,.10);
}
.op-hero-note{
  font-size:.9rem;
  color:rgba(255,255,255,.82);
  font-weight:600;
}
.op-hero-icon-wrap{
  position:relative;
  z-index:2;
}
.op-hero-icon{
  width:50px;
  height:50px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.op-hero-wave{
  position:absolute;
  inset:auto -10% -8% -2%;
  height:58%;
  border-radius:100% 0 0 0;
  opacity:.32;
}
.op-hero-card.sky{
  background:linear-gradient(135deg,#12b6c8 0%, #35b7f3 100%);
}
.op-hero-card.sky .op-hero-wave{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10));
}
.op-hero-card.purple{
  background:linear-gradient(135deg,#5f7cf7 0%, #8a63f3 100%);
}
.op-hero-card.purple .op-hero-wave{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10));
}
.op-hero-card.green{
  background:linear-gradient(135deg,#19c6a4 0%, #15c46b 100%);
}
.op-hero-card.green .op-hero-wave{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
}
.op-hero-card.orange{
  background:linear-gradient(135deg,#ffb13b 0%, #ff8a52 100%);
}
.op-hero-card.orange .op-hero-wave{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
}
.op-hero-card.rose{
  background:linear-gradient(135deg,#fb7185 0%, #e879f9 100%);
}
.op-hero-card.rose .op-hero-wave{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
}
.op-hero-card.neutral{
  background:linear-gradient(135deg,#64748b 0%, #475569 100%);
}
.op-hero-card.neutral .op-hero-wave{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
}

.op-sensor-tile{
  min-height:144px;
  padding:16px 18px 18px;
}
.op-sensor-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.op-sensor-copy{
  display:grid;
  grid-gap:8px;
  gap:8px;
}
.op-sensor-label{
  font-size:.92rem;
  color:rgba(255,255,255,.96);
  font-weight:800;
}
.op-sensor-value{
  font-size:2rem;
  line-height:1;
  letter-spacing:-.04em;
  color:#ffffff;
  text-shadow:0 1px 0 rgba(255,255,255,.10);
}
.op-sensor-note{
  font-size:.88rem;
  color:rgba(255,255,255,.82);
  font-weight:600;
  line-height:1.35;
}
.op-sensor-icon{
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.op-sensor-wave{
  position:absolute;
  inset:auto -8% -12% -4%;
  height:54%;
  opacity:.34;
  -webkit-clip-path:polygon(0 58%,16% 46%,31% 62%,49% 38%,67% 54%,84% 28%,100% 42%,100% 100%,0 100%);
          clip-path:polygon(0 58%,16% 46%,31% 62%,49% 38%,67% 54%,84% 28%,100% 42%,100% 100%,0 100%);
  background:rgba(255,255,255,.24);
}
.op-sensor-tile.orange{
  background:linear-gradient(135deg,#ff6848 0%, #ff3f35 100%);
}
.op-sensor-tile.sky{
  background:linear-gradient(135deg,#2ea9ff 0%, #2b8ee8 100%);
}
.op-sensor-tile.green{
  background:linear-gradient(135deg,#9bcf45 0%, #7fbe41 100%);
}
.op-sensor-tile.purple{
  background:linear-gradient(135deg,#8c63f8 0%, #b083ff 100%);
}
.op-sensor-tile.rose{
  background:linear-gradient(135deg,#f97393 0%, #ef476f 100%);
}
.op-sensor-tile.neutral{
  background:linear-gradient(135deg,#64748b 0%, #475569 100%);
}
.op-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
}
.op-badge.green{background:#dcfce7;color:#15803d; box-shadow:inset 0 0 0 1px #bbf7d0}
.op-badge.red{background:#fee2e2;color:#b91c1c; box-shadow:inset 0 0 0 1px #fecaca}
.op-badge.yellow{background:#fef3c7;color:#b45309; box-shadow:inset 0 0 0 1px #fde68a}
.op-badge.blue{background:#dbeafe;color:#1d4ed8; box-shadow:inset 0 0 0 1px #bfdbfe}
.op-badge.gray{background:#eef2f2;color:#6b7280; box-shadow:inset 0 0 0 1px #d7dddd}
.op-badge.purple{background:#ede9fe;color:#7c3aed; box-shadow:inset 0 0 0 1px #ddd6fe}
.op-badge.rose{background:#ffe4e6;color:#e11d48; box-shadow:inset 0 0 0 1px #fecdd3}
.op-badge.sky{background:#dff7ff;color:#0891b2; box-shadow:inset 0 0 0 1px #bae6fd}
.op-badge.amber{background:#ffedd5;color:#c2410c; box-shadow:inset 0 0 0 1px #fed7aa}
.op-badge.indigo{background:#e0e7ff;color:#4338ca; box-shadow:inset 0 0 0 1px #c7d2fe}
.op-list{
  display:grid;
  grid-gap:12px;
  gap:12px;
}
.op-list-card{
  display:grid;
  grid-gap:6px;
  gap:6px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#ffffff,#f8fbfa);
}
.op-list-card.linkable:hover,
.op-row-link:hover .op-data-row{
  background:linear-gradient(180deg,#f9fffc,#f1fbf6);
}
.op-list-card.feature{
  background:linear-gradient(135deg,#ffffff 0%, #eef8ff 42%, #f7efff 100%);
  box-shadow:0 18px 34px rgba(15,23,42,.06);
}
.op-list-card strong{
  font-size:1.02rem;
  color:#13231a;
}
.op-list-card p,
.op-list-card small{
  margin:0;
  color:#667085;
  line-height:1.5;
}
.op-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.op-inline.wrap{
  flex-wrap:wrap;
}
.op-table-card{
  display:grid;
  grid-gap:0;
  gap:0;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#fbfdfc);
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.op-row-link{
  text-decoration:none;
  color:inherit;
}
.op-data-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-gap:14px;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid rgba(15,23,42,.06);
  background:linear-gradient(180deg,#ffffff,#fbfdfc);
  transition:.16s ease;
}
.op-data-row:last-child{
  border-bottom:none;
}
.op-data-main{
  display:grid;
  grid-gap:4px;
  gap:4px;
}
.op-data-main strong{
  font-size:1rem;
  color:#122119;
}
.op-data-main small{
  color:#667085;
  line-height:1.45;
}
.op-data-value{
  text-align:right;
  font-weight:800;
  color:#122119;
}
.op-control-card{
  display:grid;
  grid-gap:12px;
  gap:12px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(135deg,#ffffff 0%, #f7fffb 50%, #f6fbff 100%);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.op-control-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.op-control-head p{
  margin:4px 0 0;
  color:#667085;
  line-height:1.5;
}
.op-control-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
  gap:10px;
}
.op-seg-btn{
  min-height:48px;
  border:none;
  border-radius:16px;
  font-weight:800;
  cursor:pointer;
}
.op-seg-btn.off{
  background:#eef2f2;
  color:#334155;
}
.op-seg-btn.off.active{
  background:#334155;
  color:#fff;
}
.op-seg-btn.on{
  background:#eef2f2;
  color:#334155;
}
.op-seg-btn.on.active{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}
.op-seg-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.op-empty{
  display:grid;
  grid-gap:6px;
  gap:6px;
  padding:22px;
  border-radius:22px;
  border:1px dashed rgba(15,23,42,.12);
  background:linear-gradient(180deg,#ffffff,#fbfdfc);
}
.op-empty p{
  margin:0;
  color:#667085;
}
.op-program-card{
  display:grid;
  grid-gap:14px;
  gap:14px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#ffffff,#fbf8ff);
}
.op-program-head,
.op-routine-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.op-program-head p,
.op-routine-head p{
  margin:4px 0 0;
  color:#667085;
}
.op-routine-card{
  display:grid;
  grid-gap:12px;
  gap:12px;
  padding:16px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
}
.op-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-gap:12px;
  gap:12px;
}
.op-mini-block{
  display:grid;
  grid-gap:4px;
  gap:4px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fbfa,#f2f7f5);
}
.op-mini-block small{
  color:#667085;
  line-height:1.45;
}
.ghost-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg,#ffffff,#f7faf8);
  text-decoration:none;
  color:#23313a;
  font-weight:700;
}
.ghost-btn.strong{
  background:linear-gradient(135deg,#10b981,#14b8a6 55%, #3b82f6 100%);
  color:#fff;
  border:none;
}
.error-box{
  padding:12px 14px;
  border-radius:16px;
  background:#fff1f2;
  color:#be123c;
  border:1px solid #fecdd3;
}
.op-backdrop{
  display:none;
}

@media (max-width: 1024px){
  .op-shell{
    grid-template-columns:1fr;
  }
  .op-sidebar{
    position:fixed;
    left:0;
    top:0;
    width:min(86vw,320px);
    transform:translateX(-104%);
    transition:.22s ease;
    box-shadow:0 22px 70px rgba(15,23,42,.18);
  }
  .op-sidebar.open{
    transform:translateX(0);
  }
  .op-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.34);
    z-index:25;
  }
  .mobile-only{
    display:grid;
    place-items:center;
  }
}

@media (max-width: 760px){
  .op-page{
    padding:16px;
  }
  .op-topbar{
    padding:14px 16px;
    flex-direction:column;
    align-items:flex-start;
  }
  .op-topbar-left,
  .op-topbar-right{
    width:100%;
  }
  .op-topbar-left h1{
    font-size:1.55rem;
  }
  .op-grid.metrics-2,
  .op-grid.metrics-3,
  .op-mini-grid{
    grid-template-columns:1fr;
  }
  .op-data-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .op-data-value{
    text-align:left;
  }
  .ghost-btn{
    width:100%;
  }
}

.op-metric-card.orange .op-metric-value,
.op-metric-card.green .op-metric-value,
.op-metric-card.blue .op-metric-value,
.op-metric-card.purple .op-metric-value,
.op-metric-card.sky .op-metric-value,
.op-metric-card.rose .op-metric-value{
  color:#102117;
}

@media (min-width: 900px){
  .op-grid.metrics-3 .op-metric-card{
    min-height:168px;
  }
  .op-grid.metrics-2 .op-metric-card{
    min-height:162px;
  }
}

.op-metric-card.orange .op-metric-value,
.op-metric-card.green .op-metric-value,
.op-metric-card.blue .op-metric-value,
.op-metric-card.purple .op-metric-value,
.op-metric-card.sky .op-metric-value,
.op-metric-card.rose .op-metric-value{
  color:#102117;
}

@media (min-width: 900px){
  .op-grid.metrics-3 .op-metric-card{
    min-height:172px;
  }
  .op-grid.metrics-2 .op-metric-card{
    min-height:166px;
  }
}


.op-topbar-title-only{
  display:flex;
  align-items:center;
  min-height:42px;
}

@media (min-width: 900px){
  .op-hero-card{
    min-height:146px;
  }
  .op-sensor-tile{
    min-height:148px;
  }
}

@media (max-width: 1024px){
  .op-hero-grid{
    grid-template-columns:1fr 1fr;
  }
  .op-sensor-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 760px){
  .op-topbar{
    padding:10px 12px;
  }
  .op-topbar-left h1{
    font-size:1.28rem;
  }
  .op-page{
    padding:12px;
    gap:12px;
  }
  .op-hero-grid,
  .op-sensor-grid,
  .op-grid.metrics-2,
  .op-grid.metrics-3,
  .op-mini-grid{
    grid-template-columns:1fr;
  }
  .op-hero-card{
    min-height:124px;
    padding:14px 16px 16px;
  }
  .op-sensor-tile{
    min-height:128px;
    padding:14px 16px 16px;
  }
  .op-hero-value{
    font-size:1.85rem;
  }
  .op-sensor-value{
    font-size:1.72rem;
  }
  .op-hero-icon{
    width:44px;
    height:44px;
  }
  .op-sensor-icon{
    width:48px;
    height:48px;
  }
}


.op-selected-farm{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-gap:18px;
  gap:18px;
  align-items:end;
  padding:20px 22px;
  border-radius:28px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(135deg,#0ea5e9 0%, #14b8a6 44%, #8b5cf6 100%);
  box-shadow:0 22px 48px rgba(15,23,42,.10);
}
.op-selected-farm-main,
.op-selected-farm-side{
  position:relative;
  z-index:2;
}
.op-selected-kicker{
  display:inline-block;
  font-size:.84rem;
  font-weight:800;
  color:rgba(255,255,255,.88);
  margin-bottom:8px;
}
.op-selected-farm h2{
  margin:0;
  font-size:1.9rem;
  line-height:1.02;
  letter-spacing:-.03em;
  color:#fff;
}
.op-selected-farm p{
  margin:8px 0 0;
  color:rgba(255,255,255,.86);
  line-height:1.5;
}
.op-selected-farm-side{
  display:grid;
  grid-gap:12px;
  gap:12px;
  align-items:end;
  justify-items:end;
}
.op-selected-mini{
  min-width:108px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.16);
  color:#fff;
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.op-selected-mini span{
  display:block;
  font-size:.8rem;
  color:rgba(255,255,255,.82);
}
.op-selected-mini strong{
  display:block;
  margin-top:4px;
  font-size:1.4rem;
  line-height:1;
}
.op-selected-wave{
  position:absolute;
  inset:auto -10% -18% auto;
  width:320px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 46%, transparent 70%);
}
.op-hero-card{
  box-shadow:0 22px 38px rgba(15,23,42,.10);
}
.op-sensor-tile{
  box-shadow:0 20px 34px rgba(15,23,42,.09);
}
.op-sensor-note,
.op-hero-note{
  max-width:26ch;
}
@media (max-width: 760px){
  .op-selected-farm{
    grid-template-columns:1fr;
    padding:18px;
    gap:14px;
  }
  .op-selected-farm h2{
    font-size:1.45rem;
  }
  .op-selected-farm-side{
    justify-items:stretch;
  }
  .op-selected-mini{
    min-width:0;
  }
}

/* ===== Operator palette mapping ===== */
.op-sensor-tile.bittersweet{
  background:linear-gradient(135deg,#FC6E51 0%, #E9573F 100%);
}
.op-sensor-tile.sunflower{
  background:linear-gradient(135deg,#FFCE54 0%, #FCBB42 100%);
}
.op-sensor-tile.grass{
  background:linear-gradient(135deg,#A0D468 0%, #8CC152 100%);
}
.op-sensor-tile.mint{
  background:linear-gradient(135deg,#48CFAD 0%, #37BC9B 100%);
}
.op-sensor-tile.aqua{
  background:linear-gradient(135deg,#4FC1E9 0%, #3BAFDA 100%);
}
.op-sensor-tile.bluejeans{
  background:linear-gradient(135deg,#5D9CEC 0%, #4A89DC 100%);
}
.op-sensor-tile.lavender{
  background:linear-gradient(135deg,#AC92EC 0%, #967ADC 100%);
}
.op-sensor-tile.pinkrose{
  background:linear-gradient(135deg,#EC87C0 0%, #D770AD 100%);
}
.op-sensor-tile.darkgray{
  background:linear-gradient(135deg,#656D78 0%, #434A54 100%);
}

.op-selected-farm.compact{
  grid-template-columns:minmax(0,1fr) auto;
  padding:18px 20px;
}
.op-selected-farm.compact .op-selected-farm-main p{
  display:none;
}
.op-farm-select-row{
  width:100%;
  padding:0;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.op-farm-select-row.active .op-data-row{
  background:linear-gradient(180deg,#f5fffa,#eefaff);
}
@media (max-width: 760px){
  .op-selected-farm.compact{
    grid-template-columns:1fr;
  }
}

.op-sidebar-actions{
  margin-top:18px;
  display:grid;
  grid-gap:10px;
  gap:10px;
}

.op-nav-item-secondary{
  background:linear-gradient(180deg,#ffffff,#f8fbfa);
  border:1px solid rgba(15,23,42,.08);
}

.op-logout-btn.modern{
  margin-top:0;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:1rem;
  font-weight:800;
  background:linear-gradient(135deg,#0f172a,#1f2937 58%, #334155 100%);
  box-shadow:0 16px 28px rgba(15,23,42,.16);
  cursor:pointer;
  transition:.18s ease;
}

.op-logout-btn.modern:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 34px rgba(15,23,42,.20);
}

.op-logout-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
}

.op-logout-icon-svg{
  width:20px;
  height:20px;
  display:block;
}

@media (max-width: 1024px){
  .op-sidebar-actions{
    margin-top:14px;
  }
}

.op-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
  gap:10px;
}
.op-mode-btn{
  min-height:50px;
  border:none;
  border-radius:18px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#f6f8f7);
  color:#344054;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.op-mode-btn.active.auto{
  background:linear-gradient(135deg,#5f7cf7 0%, #8a63f3 100%);
  color:#fff;
  box-shadow:none;
}
.op-mode-btn.active.manual{
  background:linear-gradient(135deg,#19c6a4 0%, #15c46b 100%);
  color:#fff;
  box-shadow:none;
}
.op-mode-btn:disabled{
  opacity:.7;
  cursor:not-allowed;
}

.op-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.42);
  display:grid;
  place-items:center;
  padding:18px;
  z-index:60;
}
.op-modal-card{
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 30px 80px rgba(15,23,42,.22);
  padding:20px;
}
.op-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.op-modal-head h3{
  margin:0;
  font-size:1.2rem;
  color:#122119;
}
.op-modal-head p{
  margin:6px 0 0;
  color:#667085;
}
.op-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:14px;
  gap:14px;
  margin-top:14px;
}
.op-field{
  display:grid;
  grid-gap:8px;
  gap:8px;
}
.op-field span{
  font-size:.9rem;
  font-weight:800;
  color:#122119;
}
.op-field input,
.op-field textarea{
  width:100%;
  border:none;
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(180deg,#ffffff,#f7faf8);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.10);
  font:inherit;
  color:#122119;
}
.op-field-full{
  grid-column:1 / -1;
}
.op-picker-block{
  margin-top:16px;
  display:grid;
  grid-gap:12px;
  gap:12px;
}
.op-picker-head{
  display:grid;
  grid-gap:4px;
  gap:4px;
}
.op-picker-head small{
  color:#667085;
}
.op-slot-picker{
  display:grid;
  grid-gap:10px;
  gap:10px;
}
.op-slot-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-gap:12px;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#fbfdfc);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
  cursor:pointer;
}
.op-slot-option.checked{
  background:linear-gradient(180deg,#f3fffb,#eefaf7);
  box-shadow:inset 0 0 0 2px rgba(16,185,129,.18);
}
.op-slot-option input{
  margin-top:3px;
}
.op-slot-option strong{
  display:block;
  color:#122119;
}
.op-slot-option small{
  display:block;
  margin-top:4px;
  color:#667085;
}
.op-modal-actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 760px){
  .op-form-grid{
    grid-template-columns:1fr;
  }
  .op-modal-actions{
    flex-direction:column;
  }
}

.op-control-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.op-control-mini-btn{
  min-height:38px;
  padding:0 12px;
  border:none;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  color:#23313a;
  background:linear-gradient(180deg,#ffffff,#f4f7f6);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.op-control-mini-btn.danger{
  color:#b42318;
  background:linear-gradient(180deg,#fff5f5,#ffe9e9);
  box-shadow:inset 0 0 0 1px rgba(240,68,56,.14);
}
.op-control-mini-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

@media (max-width: 760px){
  .op-control-head{
    align-items:flex-start;
  }
  .op-control-head .op-badge{
    max-width:92px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .op-control-footer{
    justify-content:stretch;
  }
  .op-control-mini-btn{
    flex:1 1;
  }
}

.op-selected-status-row{
  margin-top:10px;
}

.op-farm-picker-hero{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,#12b6c8 0%, #35b7f3 50%, #8a63f3 100%);
  box-shadow:0 18px 34px rgba(59,130,246,.18);
}
.op-farm-picker-hero .op-farm-picker-label{
  color:rgba(255,255,255,.86);
}
.op-farm-picker-hero .op-farm-picker-value{
  color:#fff;
}

.op-sidebar-actions{
  margin-top:22px;
  display:grid;
  grid-gap:14px;
  gap:14px;
}

.op-dashboard-farm-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-gap:14px;
  gap:14px;
  align-items:center;
  width:100%;
  text-align:left;
}
.op-dashboard-farm-main{
  display:grid;
  grid-gap:4px;
  gap:4px;
}
.op-dashboard-farm-main strong{
  font-size:1rem;
  color:#122119;
}
.op-dashboard-farm-main small{
  color:#667085;
  line-height:1.45;
}

@media (max-width: 760px){
  .op-dashboard-farm-row{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .op-control-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:flex-start;
  }
  .op-control-head > div:first-child{
    min-width:0;
  }
  .op-control-head p{
    margin-top:6px;
    display:block;
    max-width:none;
    white-space:normal;
    word-break:break-word;
  }
}

.op-farm-picker-hero{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,#22c1c3 0%, #3ba9f4 55%, #8b6af3 100%);
  box-shadow:0 18px 34px rgba(59,130,246,.18);
}
.op-farm-picker-hero .op-farm-picker-label{
  color:rgba(255,255,255,.86);
}
.op-farm-picker-hero .op-farm-picker-value{
  color:#fff;
}

.op-sidebar-actions{
  margin-top:22px;
  display:grid;
  grid-gap:14px;
  gap:14px;
  padding-top:8px;
}

.op-dashboard-farm-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-gap:16px;
  gap:16px;
  align-items:center;
  width:100%;
  text-align:left;
  padding:4px 2px;
}
.op-dashboard-farm-main{
  display:grid;
  grid-gap:6px;
  gap:6px;
}
.op-dashboard-farm-main strong{
  font-size:1rem;
  color:#122119;
}
.op-dashboard-farm-main small{
  color:#667085;
  line-height:1.55;
}

.op-sensor-tile.mint{
  background:linear-gradient(135deg,#48CFAD 0%, #37BC9B 100%);
}
.op-sensor-tile.aqua{
  background:linear-gradient(135deg,#4FC1E9 0%, #3BAFDA 100%);
}
.op-sensor-tile.bluejeans{
  background:linear-gradient(135deg,#5D9CEC 0%, #4A89DC 100%);
}
.op-sensor-tile.lavender{
  background:linear-gradient(135deg,#AC92EC 0%, #967ADC 100%);
}
.op-sensor-tile.darkgray{
  background:linear-gradient(135deg,#656D78 0%, #434A54 100%);
}

@media (max-width: 760px){
  .op-dashboard-farm-row{
    grid-template-columns:1fr;
    align-items:flex-start;
    gap:10px;
  }
  .op-table-card .op-farm-select-row{
    padding:6px 0;
  }
}

/* ===== Bright palette refresh ===== */
.op-sensor-tile.sunflower,
.op-hero-card.sunflower{
  background: linear-gradient(135deg, #FFCE54 0%, #FCBB42 100%);
}
.op-sensor-tile.pinkrose,
.op-hero-card.pinkrose{
  background: linear-gradient(135deg, #EC87C0 0%, #D770AD 100%);
}
.op-sensor-tile.grass,
.op-hero-card.grass{
  background: linear-gradient(135deg, #A0D468 0%, #8CC152 100%);
}
.op-sensor-tile.aqua,
.op-hero-card.aqua{
  background: linear-gradient(135deg, #4FC1E9 0%, #3BAFDA 100%);
}
.op-sensor-tile.bluejeans,
.op-hero-card.bluejeans{
  background: linear-gradient(135deg, #5D9CEC 0%, #4A89DC 100%);
}
.op-sensor-tile.lavender,
.op-hero-card.lavender{
  background: linear-gradient(135deg, #AC92EC 0%, #967ADC 100%);
}
.op-sensor-tile.mint,
.op-hero-card.mint{
  background: linear-gradient(135deg, #48CFAD 0%, #37BC9B 100%);
}

/* ===== Farm list card spacing refresh ===== */
.op-table-card .op-farm-select-row{
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.op-table-card .op-farm-select-row + .op-farm-select-row{
  margin-top: 10px;
}

.op-dashboard-farm-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 18px;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.08),
    0 8px 20px rgba(15, 23, 42, 0.04);
}

.op-farm-select-row.active .op-dashboard-farm-row{
  background: linear-gradient(180deg, #f8fdff, #f3f8ff);
  box-shadow:
    inset 0 0 0 1px rgba(59, 130, 246, 0.18),
    0 10px 24px rgba(59, 130, 246, 0.08);
}

.op-dashboard-farm-main{
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.op-dashboard-farm-main strong{
  font-size: 1.04rem;
  line-height: 1.35;
  color: #122119;
}

.op-dashboard-farm-main small{
  display: block;
  color: #667085;
  line-height: 1.55;
  font-size: 0.95rem;
}

.op-dashboard-farm-row .op-inline.wrap{
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.op-dashboard-farm-row .op-badge{
  white-space: nowrap;
}

@media (max-width: 760px){
  .op-table-card .op-farm-select-row{
    padding: 8px 4px;
  }

  .op-dashboard-farm-row{
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
  }

  .op-dashboard-farm-row .op-inline.wrap{
    justify-content: flex-start;
    gap: 8px;
  }

  .op-dashboard-farm-main strong{
    font-size: 1rem;
  }

  .op-dashboard-farm-main small{
    font-size: 0.93rem;
  }
}

/* ===== Sidebar polish ===== */
.op-brand-copy{
  min-width: 0;
}
.op-brand-username{
  font-size: 1.85rem;
  line-height: 1.08;
  font-weight: 800;
  color: #122119;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.op-nav-icon.real-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}
.op-sidebar-actions.compact{
  margin-top: 12px;
  gap: 12px;
  padding-top: 0;
}
.op-logout-btn.modern.compact{
  margin-top: 0;
}


/* ===== Farm list flattening ===== */
.op-table-card{
  padding: 10px 12px;
  background: linear-gradient(180deg,#ffffff,#fcfdff);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}

.op-table-card .op-farm-select-row{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  cursor:pointer;
  text-align:left;
  border-radius:0;
}

.op-table-card .op-farm-select-row + .op-farm-select-row{
  border-top:1px solid rgba(15,23,42,.08);
  margin-top:0;
  padding-top:10px;
}

.op-dashboard-farm-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-gap:14px;
  gap:14px;
  align-items:center;
  width:100%;
  padding:12px 10px;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

.op-farm-select-row.active .op-dashboard-farm-row{
  background:rgba(96,165,250,.04) !important;
  border-radius:12px;
}

.op-dashboard-farm-main{
  display:grid;
  grid-gap:6px;
  gap:6px;
  min-width:0;
}

.op-dashboard-farm-main strong{
  font-size:1.02rem;
  line-height:1.35;
  color:#122119;
}

.op-dashboard-farm-main small{
  color:#667085;
  line-height:1.5;
  font-size:.95rem;
}

.op-dashboard-farm-row .op-inline.wrap{
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

@media (max-width: 760px){
  .op-table-card{
    padding:8px 10px;
  }

  .op-table-card .op-farm-select-row + .op-farm-select-row{
    padding-top:8px;
  }

  .op-dashboard-farm-row{
    grid-template-columns:1fr;
    align-items:flex-start;
    gap:10px;
    padding:12px 8px;
  }

  .op-dashboard-farm-main strong{
    font-size:1rem;
  }

  .op-dashboard-farm-main small{
    font-size:.93rem;
  }

  .op-dashboard-farm-row .op-inline.wrap{
    justify-content:flex-start;
    gap:8px;
  }
}

/* Admin Automations: routine tones (premium muted palette) */
.automation-routine-card{
  position:relative;
  overflow:hidden;
}

.automation-routine-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:22px 0 0 22px;
  background:var(--routine-accent, rgba(100,116,139,.55));
  pointer-events:none;
}

.automation-routine-card .automation-routine-head{
  padding:4px 2px 14px;
  border-bottom:1px solid color-mix(in oklab, var(--border) 82%, var(--routine-accent, transparent) 18%);
}

.automation-routine-card .automation-collapsed-preview{
  background:var(--routine-preview-bg, color-mix(in oklab, var(--surface-2) 88%, white 12%));
  border:1px solid color-mix(in oklab, var(--border) 80%, var(--routine-accent, transparent) 20%);
}

.automation-routine-card .automation-section-card{
  background:var(--routine-section-bg, color-mix(in oklab, var(--surface) 92%, white 8%));
  border-color:color-mix(in oklab, var(--border) 82%, var(--routine-accent, transparent) 18%);
}

.automation-flow-connector{
  width: 4px;
  height: 44px;
  margin: 10px auto;
  border-radius: 999px;
  background:
    radial-gradient(circle, color-mix(in oklab, var(--routine-accent, rgba(148,163,184,.55)) 78%, transparent) 0 72%, transparent 73%) center top / 4px 8px repeat-y;
  opacity: .98;
}

:root[data-theme="dark"] .automation-flow-connector{
  background:
    radial-gradient(circle, color-mix(in oklab, var(--routine-accent, rgba(148,163,184,.65)) 84%, transparent) 0 74%, transparent 75%) center top / 4px 8px repeat-y;
  opacity: .95;
}

.automation-routine-card.routine-tone-teal{
  --card-bg: color-mix(in oklab, var(--surface) 88%, #99f6e4 12%);
  --border-color: color-mix(in oklab, var(--border) 66%, #14b8a6 34%);
  --routine-accent: rgba(20,184,166,.68);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 84%, #ccfbf1 16%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #f0fdfa 10%);
}

.automation-routine-card.routine-tone-emerald{
  --card-bg: color-mix(in oklab, var(--surface) 88%, #bbf7d0 12%);
  --border-color: color-mix(in oklab, var(--border) 66%, #34d399 34%);
  --routine-accent: rgba(16,185,129,.68);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 84%, #d1fae5 16%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #ecfdf5 10%);
}

.automation-routine-card.routine-tone-violet{
  --card-bg: color-mix(in oklab, var(--surface) 88%, #ddd6fe 12%);
  --border-color: color-mix(in oklab, var(--border) 66%, #8b5cf6 34%);
  --routine-accent: rgba(139,92,246,.68);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 84%, #ede9fe 16%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #f5f3ff 10%);
}

.automation-routine-card.routine-tone-amber{
  --card-bg: color-mix(in oklab, var(--surface) 88%, #fde68a 12%);
  --border-color: color-mix(in oklab, var(--border) 66%, #f59e0b 34%);
  --routine-accent: rgba(245,158,11,.7);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 84%, #fef3c7 16%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #fffbeb 10%);
}

.automation-routine-card.routine-tone-rose{
  --card-bg: color-mix(in oklab, var(--surface) 88%, #fecdd3 12%);
  --border-color: color-mix(in oklab, var(--border) 66%, #f43f5e 34%);
  --routine-accent: rgba(244,63,94,.68);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 84%, #ffe4e6 16%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #fff1f2 10%);
}

.automation-routine-card.routine-tone-blue{
  --card-bg: color-mix(in oklab, var(--surface) 88%, #bfdbfe 12%);
  --border-color: color-mix(in oklab, var(--border) 66%, #3b82f6 34%);
  --routine-accent: rgba(59,130,246,.68);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 84%, #dbeafe 16%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #eff6ff 10%);
}

:root[data-theme="dark"] .automation-routine-card.routine-tone-teal{
  --card-bg: color-mix(in oklab, var(--surface) 92%, #0f2f2d 8%);
  --border-color: color-mix(in oklab, var(--border) 68%, #14b8a6 32%);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 88%, #0d2626 12%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #0d2222 10%);
}

:root[data-theme="dark"] .automation-routine-card.routine-tone-emerald{
  --card-bg: color-mix(in oklab, var(--surface) 92%, #052e26 8%);
  --border-color: color-mix(in oklab, var(--border) 68%, #10b981 32%);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 88%, #052e2b 12%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #06271f 10%);
}

:root[data-theme="dark"] .automation-routine-card.routine-tone-violet{
  --card-bg: color-mix(in oklab, var(--surface) 92%, #2a1746 8%);
  --border-color: color-mix(in oklab, var(--border) 68%, #8b5cf6 32%);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 88%, #21133a 12%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #1c1131 10%);
}

:root[data-theme="dark"] .automation-routine-card.routine-tone-amber{
  --card-bg: color-mix(in oklab, var(--surface) 92%, #3a2608 8%);
  --border-color: color-mix(in oklab, var(--border) 68%, #f59e0b 32%);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 88%, #302109 12%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #281d0a 10%);
}

:root[data-theme="dark"] .automation-routine-card.routine-tone-rose{
  --card-bg: color-mix(in oklab, var(--surface) 92%, #3a1220 8%);
  --border-color: color-mix(in oklab, var(--border) 68%, #f43f5e 32%);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 88%, #31111c 12%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #281018 10%);
}

:root[data-theme="dark"] .automation-routine-card.routine-tone-blue{
  --card-bg: color-mix(in oklab, var(--surface) 92%, #10233d 8%);
  --border-color: color-mix(in oklab, var(--border) 68%, #3b82f6 32%);
  --routine-preview-bg: color-mix(in oklab, var(--surface-2) 88%, #102033 12%);
  --routine-section-bg: color-mix(in oklab, var(--surface) 90%, #0f1d30 10%);
}

/* ===== Operator Automations Phase 1 ===== */
.op-automation-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.op-automation-topmeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.op-program-card-automation{
  display:grid;
  grid-gap:14px;
  gap:14px;
}

.op-routine-stack{
  display:grid;
  grid-gap:14px;
  gap:14px;
}

.op-routine-card-mobile{
  border-radius:20px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.9));
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.op-routine-summary{
  display:grid;
  grid-gap:6px;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(37,99,235,.06);
  border:1px solid rgba(37,99,235,.12);
}

.op-routine-summary strong{
  font-size:.92rem;
  color:var(--text);
}

.op-routine-summary p{
  margin:0;
  color:var(--text-muted);
  line-height:1.6;
  font-size:.92rem;
}

.op-routine-card-mobile .op-inline{
  margin-top:4px;
}

.op-routine-card-mobile .op-mini-block{
  min-height:100%;
}

@media (max-width:760px){
  .op-automation-topbar{
    align-items:stretch;
  }
  .op-automation-topbar .pill-btn{
    width:100%;
  }
}

/* ===== Operator Automations Phase 1B ===== */
.op-program-card-automation{
  gap:16px;
  padding:20px;
  border-radius:28px;
  border:1px solid rgba(99,102,241,.10);
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.06), transparent 26%),
    radial-gradient(circle at top left, rgba(16,185,129,.05), transparent 22%),
    linear-gradient(180deg,#ffffff 0%, #fbf8ff 100%);
  box-shadow:0 16px 42px rgba(15,23,42,.06);
}

.op-routine-stack{
  display:grid;
  grid-gap:16px;
  gap:16px;
}

.op-routine-card-mobile{
  position:relative;
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg,#ffffff 0%, #fcfcff 100%);
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.op-routine-card-mobile::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:22px 0 0 22px;
  background:linear-gradient(180deg,#22c55e 0%, #38bdf8 100%);
  opacity:.9;
}

.op-routine-summary{
  display:grid;
  grid-gap:8px;
  gap:8px;
  padding:14px 15px;
  border-radius:18px;
  border:1px solid rgba(99,102,241,.10);
  background:
    linear-gradient(180deg, rgba(239,246,255,.95), rgba(245,243,255,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.op-routine-summary strong{
  color:#1f2a44;
  font-size:.94rem;
}

.op-routine-summary p{
  margin:0;
  color:#5b667a;
  line-height:1.68;
  font-size:.93rem;
}

.op-mini-block{
  border:1px solid rgba(148,163,184,.10);
  background:linear-gradient(180deg,#fbfdfc 0%, #f4f8f6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.op-mini-block strong{
  color:#0f172a;
  font-size:.95rem;
}

.op-mini-block small{
  color:#677489;
  line-height:1.62;
}

.op-automation-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.op-automation-topmeta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width:760px){
  .op-program-card-automation{
    padding:16px;
    border-radius:24px;
  }

  .op-routine-card-mobile{
    padding:16px;
    border-radius:20px;
  }

  .op-routine-summary{
    padding:12px 13px;
  }

  .op-automation-topbar{
    align-items:stretch;
  }

  .op-automation-topbar .pill-btn{
    width:100%;
  }
}

/* ===== Operator Automations Premium Program Hierarchy ===== */
.op-program-card-automation{
  gap:18px;
  padding:20px;
  border-radius:30px;
  border:1px solid rgba(99,102,241,.10);
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.07), transparent 24%),
    radial-gradient(circle at top left, rgba(16,185,129,.05), transparent 20%),
    linear-gradient(180deg,#ffffff 0%, #fcfaff 100%);
  box-shadow:
    0 22px 50px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.op-program-shell{
  display:grid;
  grid-gap:12px;
  gap:12px;
  padding:2px 2px 0;
}

.op-program-header{
  display:grid;
  grid-gap:8px;
  gap:8px;
}

.op-program-title-wrap{
  display:grid;
  grid-gap:6px;
  gap:6px;
}

.op-program-title{
  display:block;
  font-size:1.18rem;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#142132;
}

.op-program-description{
  margin:0;
  color:#748092;
  line-height:1.55;
}

.op-program-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.op-program-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding-top:4px;
}

.op-program-action-row .pill-btn{
  min-width:88px;
}

.op-program-routines{
  display:grid;
  grid-gap:14px;
  gap:14px;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.10);
  background:
    linear-gradient(180deg, rgba(248,250,252,.65), rgba(245,243,255,.72));
}

.op-program-routines-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.12);
  color:#5b5bd6;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.01em;
}

.op-routine-stack{
  display:grid;
  grid-gap:16px;
  gap:16px;
}

.op-routine-card-mobile{
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg,#ffffff 0%, #fcfcff 100%);
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.op-routine-summary{
  padding:15px 16px;
  border-radius:18px;
}

.op-mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.op-mini-block{
  min-height:100%;
}

@media (max-width: 760px){
  .op-program-card-automation{
    padding:16px;
    gap:16px;
    border-radius:26px;
  }

  .op-program-title{
    font-size:1.06rem;
  }

  .op-program-routines{
    padding:12px;
    border-radius:20px;
  }

  .op-program-action-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:10px;
    gap:10px;
  }

  .op-program-action-row .pill-btn{
    width:100%;
    min-width:0;
  }

  .op-mini-grid{
    grid-template-columns:1fr;
  }

  .op-routine-card-mobile{
    padding:16px;
  }

  .op-routine-summary{
    padding:13px 14px;
  }
}

/* ===== Operator Automations Final Polish ===== */
.op-list{
  gap:22px;
}

.op-program-card-automation{
  position:relative;
  overflow:hidden;
}

.op-program-card-automation::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,#22c55e 0%, #14b8a6 42%, #8b5cf6 100%);
  opacity:.92;
}

.op-program-shell{
  gap:14px;
  padding:6px 6px 2px;
}

.op-program-meta-row{
  margin-top:2px;
}

.op-program-action-row{
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,.12);
}

.op-program-action-row .pill-btn{
  min-height:42px;
}

.op-program-routines{
  gap:16px;
  padding:16px;
}

.op-program-routines-caption{
  display:flex;
  align-items:center;
  gap:10px;
}

.op-program-routines-caption::after{
  content:"";
  flex:1 1;
  height:1px;
  background:linear-gradient(90deg, rgba(99,102,241,.18), rgba(148,163,184,.08));
}

.op-program-routines-caption span{
  color:#667085;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.01em;
}

.op-routine-head-main{
  min-width:0;
  display:grid;
  grid-gap:4px;
  gap:4px;
}

.op-routine-head-status{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

.op-routine-summary{
  line-height:1.72;
}

.op-routine-summary p{
  line-height:1.74;
}

@media (max-width: 760px){
  .op-list{
    gap:18px;
  }

  .op-program-shell{
    gap:16px;
  }

  .op-program-meta-row{
    margin-top:4px;
  }

  .op-program-action-row{
    margin-top:4px;
    padding-top:12px;
  }

  .op-routine-head{
    flex-direction:column;
    align-items:stretch;
  }

  .op-routine-head-status{
    justify-content:flex-start;
  }

  .op-routine-head-status > *{
    width:max-content;
  }

  .op-program-routines-caption span{
    font-size:.78rem;
  }
}


/* Operator settings polish */
.op-settings-head-gap{
  margin-bottom: 16px;
}
.op-settings-section-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.op-settings-section-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(15,23,42,.06);
  flex:0 0 auto;
}
.op-settings-section-copy{
  display:grid;
  grid-gap:4px;
  gap:4px;
}
.op-settings-section-copy strong{
  font-size:1rem;
  line-height:1.2;
}
.op-settings-section-copy small{
  color:var(--muted);
  line-height:1.45;
}
.op-settings-stack{
  display:grid;
  grid-gap:16px;
  gap:16px;
}
.op-settings-readonly-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-gap:12px;
  gap:12px;
}
.op-settings-readonly-row{
  display:grid;
  grid-gap:6px;
  gap:6px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(15,23,42,.06);
}
.op-settings-readonly-row span{
  font-size:.9rem;
  color:var(--muted);
  font-weight:600;
}
.op-settings-readonly-row strong{
  font-size:1rem;
  color:#20323b;
  word-break:break-word;
}
.op-settings-actions-spaced{
  margin-top:10px;
}
.op-settings-top-space{
  margin-top:8px;
}
.op-settings-security-stack{
  display:grid;
  grid-gap:14px;
  gap:14px;
}
.op-settings-security-note{
  display:grid;
  grid-gap:8px;
  gap:8px;
}
.op-btn-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
@media (max-width: 768px){
  .op-settings-readonly-grid{
    grid-template-columns:1fr;
  }
}

/* Operator settings polish round 2 */
.op-settings-section-title{
  align-items:center;
}
.op-settings-section-copy{
  min-width:0;
}
.op-settings-section-copy strong,
.op-settings-section-copy small{
  display:block;
}
.op-settings-helper{
  font-size:.9rem;
  line-height:1.5;
  color:#8a6a14;
  background:rgba(250, 204, 21, .10);
  border:1px solid rgba(250, 204, 21, .22);
  border-radius:14px;
  padding:12px 14px;
}
.op-settings-security-stack .ghost-btn{
  width:auto;
}

/* Operator sidebar spacing polish */
.op-sidebar-actions.compact{
  margin-top: 0;
  padding-top: 0;
}
.op-logout-btn.modern.compact{
  margin-top: 14px;
}

/* Operator logs */
.op-event-log-row{
  display:grid;
  grid-template-columns:110px 1fr;
  grid-gap:14px;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(15,23,42,.06);
}
.op-event-log-time{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-muted);
}
.op-event-log-main{
  display:grid;
  grid-gap:6px;
  gap:6px;
}
.op-event-log-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.op-event-log-main small{
  color:var(--text-muted);
  line-height:1.5;
}
@media (max-width: 768px){
  .op-event-log-row{
    grid-template-columns:1fr;
  }
  .op-event-log-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Phase 1A: Admin Farm Report - premium compact environment cards */
.farm-report-env-section{
  overflow:hidden;
}

.compact-section-header{
  margin-bottom:14px;
}

.farm-report-env-meta{
  align-self:flex-start;
  padding:8px 12px;
  border-radius:999px;
  background:color-mix(in oklab, var(--surface-2) 86%, #ecfeff 14%);
  border:1px solid color-mix(in oklab, var(--border) 82%, #67e8f9 18%);
  color:var(--text-soft);
  font-size:.82rem;
  white-space:nowrap;
}

.farm-report-env-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-gap:14px;
  gap:14px;
}

.farm-report-env-card{
  position:relative;
  min-height:132px;
  padding:18px 18px 16px;
  border-radius:22px;
  border:1px solid color-mix(in oklab, var(--border) 76%, var(--env-accent) 24%);
  background:
    radial-gradient(circle at 92% 16%, color-mix(in oklab, var(--env-accent) 18%, transparent) 0 34%, transparent 35%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--surface) 88%, var(--env-soft) 12%),
      color-mix(in oklab, var(--surface-2) 90%, white 10%)
    );
  box-shadow:
    0 14px 34px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.farm-report-env-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  border-radius:22px 0 0 22px;
  background:linear-gradient(180deg,var(--env-accent),color-mix(in oklab,var(--env-accent) 52%, white 48%));
  opacity:.9;
}

.env-card-topline{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-soft);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.env-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--env-accent);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--env-accent) 16%, transparent);
}

.env-card-value{
  margin-top:14px;
  color:var(--text);
  font-size:2.15rem;
  line-height:1;
  font-weight:850;
  letter-spacing:-.045em;
}

.env-card-note{
  margin-top:8px;
  color:var(--text-muted);
  font-size:.9rem;
  font-weight:600;
}

.env-temp{
  --env-accent:#10b981;
  --env-soft:#d1fae5;
}

.env-humidity{
  --env-accent:#8b5cf6;
  --env-soft:#ede9fe;
}

.env-soil{
  --env-accent:#14b8a6;
  --env-soft:#ccfbf1;
}

:root[data-theme="dark"] .farm-report-env-card{
  background:
    radial-gradient(circle at 92% 16%, color-mix(in oklab, var(--env-accent) 16%, transparent) 0 34%, transparent 35%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--surface) 92%, var(--env-soft) 8%),
      color-mix(in oklab, var(--surface-2) 94%, black 6%)
    );
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 980px){
  .farm-report-env-grid{
    grid-template-columns:1fr;
  }

  .farm-report-env-meta{
    white-space:normal;
  }
}

/* Phase 1B: Admin Farm Report - desktop layout and premium polish */
.farm-report-summary-stack{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-gap:16px;
  gap:16px;
  align-items:stretch;
}

.farm-report-summary-card{
  width:100%;
  max-width:none;
  min-height:150px;
  padding:24px 26px;
  border-radius:24px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--surface) 94%, #ecfdf5 6%),
      color-mix(in oklab, var(--surface-2) 93%, white 7%)
    );
  border:1px solid color-mix(in oklab, var(--border) 88%, #bbf7d0 12%);
  box-shadow:
    0 16px 38px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.farm-report-summary-card strong{
  display:block;
  margin-bottom:8px;
  font-size:.98rem;
}

.farm-report-env-card{
  min-height:116px;
  padding:18px 20px 17px;
  border-radius:24px;
  border:1px solid color-mix(in oklab, var(--border) 84%, var(--env-accent) 16%);
  background:
    radial-gradient(circle at 88% 14%, color-mix(in oklab, var(--env-accent) 18%, transparent) 0 28%, transparent 29%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--surface) 94%, var(--env-soft) 6%),
      color-mix(in oklab, var(--surface-2) 94%, white 6%)
    );
  box-shadow:
    0 15px 34px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.76);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.farm-report-env-card::before{
  display:none;
}

.farm-report-env-card:hover{
  transform:translateY(-1px);
  box-shadow:
    0 20px 46px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.82);
  border-color:color-mix(in oklab, var(--border) 70%, var(--env-accent) 30%);
}

.env-card-topline{
  font-size:.78rem;
  letter-spacing:.035em;
}

.env-card-value{
  margin-top:12px;
  font-size:2rem;
  letter-spacing:-.04em;
}

.env-card-note{
  margin-top:7px;
  font-size:.86rem;
}

.farm-report-water-card{
  width:100%;
  max-width:none;
  padding:24px 26px;
  border-radius:24px;
  background:
    radial-gradient(circle at 96% 12%, rgba(45,212,191,.12) 0 26%, transparent 27%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--surface) 94%, #f0fdfa 6%),
      color-mix(in oklab, var(--surface-2) 94%, white 6%)
    );
  border:1px solid color-mix(in oklab, var(--border) 84%, #99f6e4 16%);
  box-shadow:
    0 14px 34px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.farm-report-water-card strong{
  display:block;
  margin-bottom:8px;
}

:root[data-theme="dark"] .farm-report-summary-card,
:root[data-theme="dark"] .farm-report-water-card,
:root[data-theme="dark"] .farm-report-env-card{
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--surface) 94%, #052e2b 6%),
      color-mix(in oklab, var(--surface-2) 94%, black 6%)
    );
  box-shadow:
    0 16px 38px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 1100px){
  .farm-report-summary-stack{
    grid-template-columns:1fr;
  }
}

@media (max-width: 980px){
  .farm-report-env-card{
    min-height:108px;
  }
}

/* Phase 7B-2: Farm Report Water Usage date range + full-width sessions */
.water-usage-range-panel{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) auto;
  grid-gap:16px;
  gap:16px;
  align-items:end;
  margin:18px 0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, .16), transparent 34%),
    var(--surface);
  box-shadow:var(--shadow-sm);
}

.water-usage-range-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.water-usage-range-field label{
  font-weight:800;
  font-size:.86rem;
  color:var(--muted);
}

.water-usage-range-field input{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:13px 14px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  outline:none;
}

.water-usage-range-field input:focus{
  border-color:rgba(20,184,166,.55);
  box-shadow:0 0 0 4px rgba(20,184,166,.12);
}

.water-usage-range-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.farm-report-water-sessions{
  grid-column:1 / -1;
  max-width:none;
}

.water-usage-empty-state{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
  padding:18px;
  border:1px dashed var(--border);
  border-radius:18px;
  background:rgba(148,163,184,.08);
  color:var(--muted);
}

.water-usage-empty-state strong{
  color:var(--text);
}

@media (max-width: 980px){
  .water-usage-range-panel{
    grid-template-columns:1fr;
  }

  .water-usage-range-actions{
    justify-content:flex-start;
  }
}