/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f5f7fa;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  color: #333;
  overflow: hidden;
}

.dashboard-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  background: #1e3a1f;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #2d4a2e;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
}

/* Flu tarla arka planı + koyu yeşil okunabilirlik katmanı */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/sidebar-field.svg") center / cover no-repeat, #1e3a1f;
  filter: blur(3px) saturate(1.05);
  transform: scale(1.08);
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 42, 21, 0.88) 0%, rgba(24, 51, 25, 0.82) 45%, rgba(15, 33, 16, 0.9) 100%);
}

/* Site logosu (ortak) */
.logo-mark {
  width: 52px;
  height: 35px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.logo-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: #16233b;
}

.logo-tagline {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.3;
  color: #6b7280;
}

.sidebar-logo {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.sidebar-logo .logo-mark { width: 46px; height: 31px; }
.sidebar-logo .logo-title { color: #ffffff; font-size: 14px; }
.sidebar-logo .logo-tagline { color: rgba(255, 255, 255, 0.62); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-item i {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav-item.active {
  background: #4ade80;
  color: #1e3a1f;
  font-weight: 600;
}

.sidebar-footer {
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Kısa ekranlarda menü sığmazsa: yazıyı küçült, yine kaydırma çubuğu gösterme */
@media (max-height: 760px) {
  .sidebar-logo { padding: 10px 14px; }
  .sidebar-logo .logo-mark { width: 40px; height: 27px; }
  .sidebar-nav { padding: 8px; gap: 1px; }
  .nav-item { padding: 8px 12px; font-size: 13px; }
  .nav-item i { font-size: 15px; width: 20px; }
  .sidebar-footer { padding: 10px 12px; }
}
@media (max-height: 640px) {
  .nav-item { padding: 6px 12px; font-size: 12.5px; }
  .logout-btn { padding: 10px 16px; margin-bottom: 8px; }
}

/* Çıkış durumunda (giriş ekranı): yeşil sidebar gizli, içerik tam genişlikte ortalı */
body.signed-out .dashboard-container { grid-template-columns: 1fr; }
body.signed-out .sidebar { display: none; }
body.signed-out .main-content { min-width: 0; }

/* Main Content */
.main-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f7fa;
}

/* Header */
.main-header {
  background: white;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-left .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1e3a1f;
}

.header-left .logo .logo-mark { width: 58px; height: 39px; }
.header-left .logo .logo-title { font-size: 17px; }
.header-left .logo .logo-tagline { font-size: 9.5px; }

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f3f4f6;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid #e5e7eb;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* Content Area */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.page-title-section h1 {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.page-title-section p {
  font-size: 14px;
  color: #6b7280;
}

.page-actions {
  display: flex;
  gap: 12px;
}

/* Buttons */
.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}

.btn-primary {
  background: #4ade80;
  color: #1e3a1f;
}

.btn-primary:hover {
  background: #22c55e;
  transform: translateY(-1px);
}

/* Header login button (cikis sonrasi sag ustte) */
.header-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.btn-secondary {
  background: white;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn-secondary:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.positive {
  color: #22c55e;
}

.stat-change.negative {
  color: #ef4444;
}

.stat-average {
  font-size: 12px;
  color: #9ca3af;
}

/* Map List Section */
.map-list-section {
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.section-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.tab-btn {
  padding: 16px 24px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: #374151;
  background: #f9fafb;
}

.tab-btn.active {
  color: #1e3a1f;
  border-bottom-color: #4ade80;
  background: #f0fdf4;
}

.section-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.view-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}

.view-info i {
  font-size: 14px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  width: 300px;
}

.search-bar i {
  color: #9ca3af;
  font-size: 14px;
}

.search-bar input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
}

.map-list-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  height: 500px;
}

/* Map Container */
.map-container {
  position: relative;
  border-right: 1px solid #e5e7eb;
}

#fieldsMap {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 700;
}

.map-control-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #374151;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.map-control-btn:hover {
  background: #f3f4f6;
}

.map-control-btn.draw-field-btn.active {
  background: #dcfce7;
  color: #16a34a;
  box-shadow: 0 0 0 2px #16a34a inset;
}

/* Tarla sınırı çizim araç çubuğu (her iki harita) */
.leaflet-container.draw-active {
  cursor: crosshair !important;
}

.map-draw-bar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 32px);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d7ecd9;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: 12.5px;
  color: #14532d;
}

.map-draw-bar .draw-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.map-draw-bar .draw-hint i { color: #16a34a; }

.map-draw-bar .draw-hint-sub {
  color: #6b7280;
  font-weight: 500;
}

.map-draw-bar .draw-area {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  color: #15803d;
  white-space: nowrap;
}

.map-draw-bar .btn { white-space: nowrap; }

.map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: white;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.legend-title {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.green {
  background: #22c55e;
}

.legend-dot.yellow {
  background: #eab308;
}

.legend-dot.orange {
  background: #f97316;
}

/* List Container */
.list-container {
  overflow-y: auto;
}

.fields-table {
  width: 100%;
  border-collapse: collapse;
}

.fields-table thead {
  background: #f9fafb;
  position: sticky;
  top: 0;
}

.fields-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e5e7eb;
}

.fields-table td {
  padding: 16px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.fields-table tbody tr:hover {
  background: #f9fafb;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #dcfce7;
  color: #166534;
}

.status-badge.harvest-ready {
  background: #fef9c3;
  color: #854d0e;
}

.status-badge.maintenance-needed {
  background: #ffedd5;
  color: #9a3412;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f3f4f6;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #e5e7eb;
  color: #374151;
}

.add-field-form {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.form-actions .btn {
  padding: 10px 20px;
}

/* Auth Section */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  padding: 20px;
}

/* Çıkış durumunda (giriş ekranı): tüm içerik alanına çiftçi fotoğrafı arka planı */
body.signed-out .content-area {
  background: url("../img/auth-bg.jpeg") center / cover no-repeat fixed, #16281a;
  position: relative;
  isolation: isolate;
}
/* Fotoğraf üstüne yumuşak karartma + alttan yeşil geçiş (form okunaklı kalsın) */
body.signed-out .content-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10, 25, 12, 0.30) 0%, rgba(10, 25, 12, 0.18) 40%, rgba(10, 25, 12, 0.55) 100%);
  pointer-events: none;
}
body.signed-out .content-area > * { position: relative; z-index: 1; }

/* Giriş formu: cam (frosted glass) kart */
body.signed-out .auth-form {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.auth-form {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.auth-header {
  text-align: center;
  margin-bottom: 35px;
}

.auth-header h2 {
  color: #1e3a1f;
  margin: 0 0 10px 0;
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #1e3a1f 0%, #4ade80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-header p {
  color: #666;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.auth-header .auth-logo-mark {
  display: block;
  width: 108px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 14px;
}

.auth-header h2 { font-size: 30px; letter-spacing: 0.5px; }

.auth-tabs {
  display: flex;
  margin-bottom: 30px;
  background: #f0f0f0;
  border-radius: 12px;
  padding: 5px;
  gap: 5px;
}

.auth-tab {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.auth-tab.active {
  background: white;
  color: #1e3a1f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-tab:hover {
  color: #1e3a1f;
}

.auth-form-content {
  display: none;
}

.auth-form-content.active {
  display: block;
}

.auth-message {
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.auth-message.success {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  color: #155724;
  display: block;
  border: 1px solid #c3e6cb;
}

.auth-message.error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  color: #721c24;
  display: block;
  border: 1px solid #f5c6cb;
}

.section {
  display: none;
}

.section.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logout Button */
.logout-btn {
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Guide Section */
.guide-container {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 30px;
}

.guide-form {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  height: fit-content;
}

.guide-form h3 {
  color: #1e3a1f;
  margin-bottom: 20px;
  font-size: 18px;
}

.guide-results {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.guide-placeholder {
  text-align: center;
  color: #6b7280;
  padding: 50px 20px;
}

.guide-placeholder p {
  font-size: 16px;
  margin: 0;
}

.guide-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  border-left: 4px solid #4ade80;
}

.guide-section h4 {
  color: #1e3a1f;
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
}

.guide-section ul {
  margin: 0;
  padding-left: 20px;
}

.guide-section li {
  margin-bottom: 10px;
  color: #374151;
  line-height: 1.6;
}

.guide-section li strong {
  color: #1e3a1f;
}

.guide-alert {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.guide-alert strong {
  color: #92400e;
}

.guide-success {
  background: #dcfce7;
  border-left: 4px solid #22c55e;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.guide-success strong {
  color: #166534;
}

/* Calculations Section */
.calculations-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.chart-container {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.analysis-table {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.analysis-table table {
  width: 100%;
  border-collapse: collapse;
}

.analysis-table th,
.analysis-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.analysis-table th {
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}

.analysis-table tbody tr:hover {
  background: #f9fafb;
}

/* Prices Section */
.prices-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.input-prices,
.crop-prices {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.input-prices h3,
.crop-prices h3 {
  color: #1e3a1f;
  font-size: 18px;
  margin-bottom: 20px;
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.price-name {
  font-weight: 600;
  color: #374151;
}

.price-value {
  color: #22c55e;
  font-weight: 500;
}

.price-trend {
  font-size: 18px;
  font-weight: bold;
}

/* Mahsul fiyat listesi (Guncel Fiyatlar - kg bazli) */
.crop-price-item {
  align-items: center;
  padding: 12px 15px;
}
.crop-price-item .price-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crop-price-item .cp-meta {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
}
.crop-price-item .price-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Hava Durumu Sayfasi ===== */
.wx-wrap { display: flex; flex-direction: column; gap: 16px; }

.wx-loc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 18px;
}
.wx-loc-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1e3a1f; font-size: 15px; min-width: 0; }
.wx-loc-name i { color: #22c55e; }
.wx-loc-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  background: #16a34a;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.wx-loc-btn:hover { background: #15803d; transform: translateY(-1px); }
.wx-loc-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.wx-loc-msg {
  font-size: 13px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
}

.wx-hero {
  border-radius: 20px;
  padding: 28px;
  color: #fff;
  background: linear-gradient(135deg, #64748b, #334155);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}
.wx-hero.wx-clear { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.wx-hero.wx-cloud { background: linear-gradient(135deg, #64748b, #334155); }
.wx-hero.wx-rain  { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.wx-hero.wx-snow  { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.wx-hero.wx-storm { background: linear-gradient(135deg, #7c3aed, #4c1d95); }

.wx-now { display: flex; flex-direction: column; gap: 22px; }
.wx-now-main { display: flex; align-items: center; gap: 20px; }
.wx-now-icon { font-size: 64px; line-height: 1; }
.wx-now-temp { font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.wx-now-info { display: flex; flex-direction: column; gap: 5px; }
.wx-now-state { font-size: 17px; font-weight: 700; }
.wx-now-loc { font-size: 13px; opacity: .9; }
.wx-now-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wx-chip {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wx-chip i { font-size: 13px; opacity: .9; }
.wx-chip-val { font-size: 17px; font-weight: 800; }
.wx-chip-lbl { font-size: 11px; opacity: .85; font-weight: 500; }

.wx-days-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1e3a1f; font-size: 15px; }
.wx-days-title i { color: #22c55e; }
.wx-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.wx-day {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  transition: transform .15s, box-shadow .15s;
}
.wx-day:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .08); }
.wx-day-today { border-color: #22c55e; background: #f0fdf4; }
.wx-day-name { font-weight: 700; color: #1e3a1f; font-size: 13px; }
.wx-day-date { font-size: 11px; color: #9ca3af; margin-top: -4px; }
.wx-day-icon { font-size: 26px; color: #f59e0b; margin: 3px 0; }
.wx-day-state { font-size: 10.5px; color: #6b7280; line-height: 1.2; min-height: 25px; }
.wx-day-temps { font-size: 14px; font-weight: 700; }
.wx-tmax { color: #1f2937; }
.wx-tmin { color: #9ca3af; margin-left: 6px; }

.wx-metric { width: 100%; text-align: left; }
.wx-metric-top { display: flex; justify-content: space-between; font-size: 10px; color: #6b7280; font-weight: 600; margin-bottom: 3px; }
.wx-metric-top i { width: 11px; }
.wx-bar { height: 5px; background: #f3f4f6; border-radius: 99px; overflow: hidden; }
.wx-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #38bdf8, #2563eb); transition: width .4s; }

.wx-loading { padding: 28px 0; text-align: center; font-weight: 600; }
.wx-error { text-align: center; padding: 24px 0; font-weight: 600; }
.wx-retry {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wx-retry:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 1200px) { .wx-days { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) {
  .wx-days { grid-template-columns: repeat(2, 1fr); }
  .wx-now-grid { grid-template-columns: repeat(2, 1fr); }
  .wx-now-temp { font-size: 46px; }
  .wx-now-icon { font-size: 50px; }
}

.price-trend[data-trend="up"] {
  color: #22c55e;
}

.price-trend[data-trend="down"] {
  color: #ef4444;
}

.price-trend[data-trend="stable"] {
  color: #6b7280;
}

.crop-search {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.crop-search input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}

.crop-search input:focus {
  outline: none;
  border-color: #4ade80;
}

.price-results {
  min-height: 100px;
  padding: 15px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* Delete Button */
.delete-btn {
  padding: 6px 12px;
  border: none;
  background: #ef4444;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.delete-btn:hover {
  background: #dc2626;
}

/* ===== Genel Bakış (Overview) ===== */
#overview.section.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content-area:has(> #overview.active) { padding: 16px 20px; }
#overview .page-header { display: none; }

.ov-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.55fr) minmax(0, 1.15fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.ov-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.ov-mid-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }

.ov-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
  flex: none;
}

.ov-card {
  background: #fff;
  border: 1px solid #ece7de;
  border-radius: 16px;
  padding: 15px 17px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-width: 0;
}

.ov-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #1f2937;
  margin-bottom: 12px;
}

.ov-chev { margin-left: auto; color: #cbd5e1; font-size: 12px; }

.ov-card-title i { color: #22c55e; }

.ov-chip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ov-chip i { color: #16a34a; }

.ov-draw-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.ov-draw-btn i { color: #16a34a; }

.ov-draw-btn:hover { background: #dcfce7; }

.ov-draw-btn.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.ov-draw-btn.active i { color: #fff; }

/* Yeni tarla modalında çizilen sınır notu */
.draw-polygon-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-left: 4px solid #22c55e;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #14532d;
}

.draw-polygon-note i { color: #16a34a; }

.ov-refresh {
  margin-left: auto;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ov-refresh:hover { background: #dcfce7; transform: rotate(90deg); }

/* Tarla haritası (uydu görünümü) */
.ov-map-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.ov-map-wrap {
  position: relative;
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ov-map {
  position: relative;
  flex: 1;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0dacd;
  background: #dfe6ea;
}

/* Tarlalarım haritasındaki belirgin "Sınır Çiz" düğmesi */
.map-draw-fab {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #16a34a;
  border: 1px solid #15803d;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.35);
  transition: all 0.2s ease;
  font-family: inherit;
}

.map-draw-fab i { font-size: 14px; }

.map-draw-fab:hover { background: #15803d; transform: translateY(-1px); }

.map-draw-fab.active { background: #b91c1c; border-color: #991b1b; box-shadow: 0 8px 20px rgba(185, 28, 28, 0.35); }

.map-control-btn.locate-btn.active {
  background: #dcfce7;
  color: #16a34a;
  box-shadow: 0 0 0 2px #16a34a inset;
}

/* Konum alınırken: içHTML değişmeden sadece ikon döner (titreme yapmaz) */
@keyframes loc-spin { to { transform: rotate(360deg); } }
.map-control-btn.locate-btn.loading i,
.ov-locate-btn.loading i {
  animation: loc-spin 1s linear infinite;
}

/* Genel Bakış haritasındaki "Konumum" düğmesi */
.ov-locate-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d7ecd9;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #15803d;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: all 0.2s ease;
  font-family: inherit;
}

.ov-locate-btn i { color: #16a34a; }

.ov-locate-btn:hover { background: #dcfce7; }

.ov-locate-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }

.ov-locate-btn.active i { color: #fff; }

/* Kullanıcının anlık konum işareti */
.user-loc-marker-wrap { background: transparent; border: 0; }

.user-loc-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===== Gelir - Gider sayfası ===== */
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.ledger-card {
  background: #fff;
  border: 1px solid #ece7de;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ledger-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.ledger-card.income .ledger-icon { background: #dcfce7; color: #16a34a; }
.ledger-card.expense .ledger-icon { background: #fee2e2; color: #dc2626; }
.ledger-card.profit .ledger-icon { background: #dbeafe; color: #2563eb; }

.ledger-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; }
.ledger-value { font-size: 22px; font-weight: 800; color: #1f2937; }
.ledger-card.income .ledger-value { color: #15803d; }
.ledger-card.expense .ledger-value { color: #b91c1c; }
.ledger-card.profit.negative .ledger-value { color: #b91c1c; }
.ledger-card.profit.positive .ledger-value { color: #1d4ed8; }

.ledger-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
  align-items: start;
}

.ledger-form-card, .ledger-list-card {
  background: #fff;
  border: 1px solid #ece7de;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ledger-form-card h3, .ledger-list-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-form-card h3 i, .ledger-list-card h3 i { color: #16a34a; }

.ledger-type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }

.ledger-type-btn {
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 10px;
  padding: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.ledger-type-btn[data-kind="expense"].active { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }
.ledger-type-btn[data-kind="income"].active { background: #f0fdf4; border-color: #16a34a; color: #15803d; }

.ledger-form-actions { display: flex; gap: 8px; margin-top: 6px; }

.ledger-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ledger-list-head h3 { margin-bottom: 0; }

.ledger-filters { display: flex; gap: 6px; }

.ledger-filter {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
}

.ledger-filter.active { background: #1e3a1f; border-color: #1e3a1f; color: #fff; }

.ledger-empty {
  text-align: center;
  padding: 36px 16px;
  color: #9ca3af;
}

.ledger-empty i { font-size: 40px; margin-bottom: 10px; color: #d1d5db; }
.ledger-empty p { font-size: 13.5px; line-height: 1.6; }

.ledger-list { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; }

.ledger-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #f0ede6;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}

.ledger-item-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.ledger-item.income .ledger-item-ic { background: #dcfce7; color: #16a34a; }
.ledger-item.expense .ledger-item-ic { background: #fee2e2; color: #dc2626; }

.ledger-item-body { flex: 1; min-width: 0; }
.ledger-item-title { font-size: 13.5px; font-weight: 700; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-item-sub { font-size: 11.5px; color: #9ca3af; }

.ledger-item-amount { font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.ledger-item.income .ledger-item-amount { color: #15803d; }
.ledger-item.expense .ledger-item-amount { color: #b91c1c; }

.ledger-item-actions { display: flex; gap: 4px; }

.ledger-mini-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.ledger-mini-btn:hover { background: #f3f4f6; }
.ledger-mini-btn.del:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ===== Güncel Fiyatlar: kullanıcı düzenlemesi ===== */
.prices-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.prices-head h3 { margin: 0; }
.prices-updated { font-size: 11px; color: #9ca3af; font-weight: 600; }
.market-edit { margin-top: 16px; border-top: 1px dashed #e5e7eb; padding-top: 14px; }
.market-edit h4 { font-size: 13.5px; font-weight: 800; color: #1f2937; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.market-edit h4 i { color: #16a34a; }
.market-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.market-edit-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-edit-row input[type="number"] { width: 110px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-family: inherit; }
.market-edit-row select { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 12.5px; font-family: inherit; background: #fff; }
.market-edit-unit { font-size: 12px; color: #6b7280; min-width: 36px; }
.market-edit-row.fuel label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #6b7280; }
.market-edit-row.fuel input[type="number"] { width: 78px; }
.fuel-edit-card { grid-column: 1 / -1; }
.prices-container + .prices-container { margin-top: 16px; }

/* OCR ilerleme + sesli komut önizleme */
.ov-action .ov-progress { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.92); margin-top: 2px; }
.ov-voice-hint { font-size: 10.5px; color: #6b7280; margin-top: 6px; line-height: 1.5; }

/* Grafik kartındaki özet rozetleri */
.ov-chart-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.ov-chart-pill {
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.ov-chart-pill.inc { background: #dcfce7; color: #15803d; }
.ov-chart-pill.exp { background: #fee2e2; color: #b91c1c; }
.ov-chart-pill.pro { background: #dbeafe; color: #1d4ed8; }
.ov-chart-pill.pro.neg { background: #fee2e2; color: #b91c1c; }

.ov-chart-card .ov-card-title { flex-wrap: wrap; row-gap: 8px; }

@media (max-width: 900px) {
  .ledger-summary { grid-template-columns: 1fr; }
  .ledger-layout { grid-template-columns: 1fr; }
}

.ov-map .leaflet-container {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #dfe6ea;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ov-map-marker-wrap {
  background: transparent;
  border: 0;
}

.ov-map-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d7ecd9;
  border-left: 4px solid #22c55e;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  font-size: 12.5px;
  font-weight: 700;
  color: #14532d;
  white-space: nowrap;
  transform: translate(14px, -50%);
  pointer-events: none;
}

.ov-map-marker::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #d7ecd9;
  border-bottom: 1px solid #d7ecd9;
  transform: translateY(-50%) rotate(45deg);
}

.ov-map-marker i {
  color: #16a34a;
  font-size: 13px;
}

/* Tarla yokken Genel Bakış haritasındaki yönlendirme rozeti */
.ov-empty-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d7ecd9;
  border-left: 4px solid #22c55e;
  border-radius: 10px;
  padding: 9px 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  font-size: 12.5px;
  font-weight: 700;
  color: #14532d;
  white-space: nowrap;
  pointer-events: none;
}

.ov-empty-hint i { color: #16a34a; }

/* Hesaplamalar kısayolu (kompakt) */
.ov-calc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  text-align: center;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%);
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ov-calc:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(234, 88, 12, 0.38); }

.ov-calc::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.ov-calc-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  z-index: 1;
}

.ov-calc-body { position: relative; z-index: 1; }
.ov-calc-title { display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }

.ov-calc-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  transition: transform 0.2s ease;
}

.ov-calc:hover .ov-calc-arrow { transform: translateX(3px); }

/* Anlık Durum (kompakt hava durumu) */
.ov-weather { min-width: 0; display: flex; flex-direction: column; }
.ov-weather-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.ov-wx-row { display: flex; align-items: center; gap: 12px; }
.ov-wx-icon { font-size: 34px; color: #f59e0b; line-height: 1; }
.ov-wx-temp { font-size: 30px; font-weight: 800; color: #111827; line-height: 1; margin-left: auto; }
.ov-wx-desc { font-size: 13px; font-weight: 700; color: #374151; margin-top: 8px; }
.ov-wx-details { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: #6b7280; }
.ov-wx-details span { display: flex; align-items: center; gap: 5px; }
.ov-wx-details i { color: #16a34a; }

/* Yakıt fiyatları (kompakt) */
.ov-fuel-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ov-fuel-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #9ca3af;
  padding: 4px 6px;
  border-bottom: 1px solid #eee6da;
}
.ov-fuel-table td { padding: 5px 6px; border-bottom: 1px solid #f5f1ea; color: #374151; font-variant-numeric: tabular-nums; }
.ov-fuel-table tr:last-child td { border-bottom: none; }
.ov-fuel-table td:not(:first-child) { font-weight: 700; color: #111827; }
.ov-note { margin-top: 6px; font-size: 10px; color: #9ca3af; }

/* Ekilen ürünleri (kompakt) */
.ov-crop-list { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.ov-crop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f6fbf6;
  border: 1px solid #e6f4ea;
  border-radius: 10px;
}
.ov-crop-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 13px;
  flex-shrink: 0;
}
.ov-crop-info { min-width: 0; }
.ov-crop-name { font-size: 12px; font-weight: 700; color: #14532d; line-height: 1.1; }
.ov-crop-meta { font-size: 10px; color: #6b7280; line-height: 1.1; }
.ov-days {
  font-size: 10px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ov-days.soon { color: #b45309; background: #fef3c7; }
.ov-days.ready { color: #b91c1c; background: #fee2e2; }
.ov-days.unknown { color: #6b7280; background: #f3f4f6; font-weight: 600; }

.ov-loading { color: #9ca3af; font-size: 14px; padding: 20px 0; text-align: center; }
.ov-empty { color: #9ca3af; font-size: 14px; text-align: center; padding: 24px 8px; line-height: 1.6; }
.ov-empty i { display: block; font-size: 26px; margin-bottom: 8px; color: #d1d5db; }
.ov-retry {
  margin-top: 12px;
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
}
.ov-retry:hover { background: #16a34a; }

/* Finansal grafik */
.ov-chart-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ov-chart-wrap { position: relative; flex: 1; min-height: 180px; }

/* Güncel girdi fiyatları (4'lü mini kart) */
.ov-prices-card { min-width: 0; }
.ov-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.ov-price-card {
  background: #faf7f1;
  border: 1px solid #efe9df;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ov-price-card:hover {
  transform: translateY(-2px);
  border-color: #dccfb8;
  box-shadow: 0 8px 18px rgba(120, 90, 40, 0.12);
}

.ov-price-head { display: flex; align-items: center; gap: 7px; min-width: 0; }

.ov-price-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.ov-price-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #8b7355;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-price-value { font-size: 16px; font-weight: 800; color: #1f2937; font-variant-numeric: tabular-nums; }
.ov-price-unit { font-size: 10px; font-weight: 600; color: #9ca3af; margin-left: 3px; }
.ov-price-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ov-price-trend { display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; }
.ov-price-trend.up { color: #16a34a; }
.ov-price-trend.down { color: #c2410c; }
.ov-price-trend.flat { color: #8b5a2b; }
.ov-spark { width: 48px; height: 18px; display: block; flex-shrink: 0; }

/* Fatura OCR / hızlı işlemler (kompakt) */
.ov-ocr-card { min-width: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ov-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.ov-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: 14px;
  padding: 14px 10px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  text-align: center;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ov-action i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.ov-action strong { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.3px; }
.ov-action small { display: none; }

.ov-action-voice {
  background: linear-gradient(160deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
}

.ov-action-voice:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(22, 163, 74, 0.38); }

.ov-action-invoice {
  background: linear-gradient(160deg, #fb923c 0%, #ea580c 55%, #9a3412 100%);
  box-shadow: 0 8px 18px rgba(194, 65, 12, 0.28);
}

.ov-action-invoice:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(194, 65, 12, 0.38); }

.ov-action.listening i { animation: ovMicPulse 1.1s ease-in-out infinite; }

@keyframes ovMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* WhatsApp yardım butonu */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  z-index: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.55);
}

.whatsapp-fab:active {
  transform: scale(0.96);
}

/* Telefon arama butonu (WhatsApp butonunun bir üstünde) */
.phone-fab {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(22, 163, 74, 0.45);
  z-index: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.phone-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.55);
}

.phone-fab:active {
  transform: scale(0.96);
}

/* ===== Ayarlar ===== */
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  max-width: 1100px;
}

.settings-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.settings-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #1e3a1f;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.settings-card-title i {
  color: #22c55e;
  width: 20px;
  text-align: center;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 3px;
}

.setting-info span {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  word-break: break-word;
}

/* Aç/Kapa anahtarı */
.settings-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

.settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-switch .slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings-switch .slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.settings-switch input:checked + .slider {
  background: #22c55e;
}

.settings-switch input:checked + .slider::before {
  transform: translateX(20px);
}

@media (max-width: 640px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Şifre sıfırlama ===== */
.forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 16px;
}

.forgot-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  text-decoration: underline;
  cursor: pointer;
}

.forgot-link-btn:hover {
  color: #15803d;
}

.forgot-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f0fdf4;
  border: 1px solid #d1f0dc;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #166534;
  line-height: 1.55;
  margin-bottom: 18px;
}

.forgot-intro i {
  color: #22c55e;
  margin-top: 2px;
}

.forgot-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #92400e;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ===== KVKK / Açık rıza / Çerez ===== */
.btn-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.btn-danger:hover {
  background: #fecaca;
  transform: none;
}

.consent-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.consent-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a1f;
  margin: 0 0 12px;
}

.consent-title i {
  color: #22c55e;
}

.consent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #374151;
  line-height: 1.55;
  margin-bottom: 10px;
  cursor: pointer;
}

.consent-item:last-child {
  margin-bottom: 0;
}

.consent-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: #22c55e;
  cursor: pointer;
}

.consent-link,
.cookie-link {
  color: #16a34a;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.consent-link:hover,
.cookie-link:hover {
  color: #15803d;
}

/* Yasal bilgilendirme modalı */
.legal-content {
  max-width: 640px;
}

.legal-body {
  padding: 24px;
}

.legal-section {
  margin-bottom: 26px;
  scroll-margin-top: 12px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1e3a1f;
  margin: 0 0 10px;
}

.legal-section h3 i {
  color: #22c55e;
}

.legal-section p {
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.65;
  margin: 0 0 10px;
}

.legal-section ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.legal-section li {
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 6px;
}

.legal-note {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  border-left: 4px solid #22c55e;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #065f46;
  line-height: 1.6;
}

/* Çerez bandı */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950; /* FAB butonlarının (900) üstünde, modalın (1000) altında */
  background: #111827;
  color: #f3f4f6;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  border-top: 1px solid #374151;
}

.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  flex: 1;
}

.cookie-text i {
  color: #fbbf24;
  font-size: 20px;
  margin-top: 2px;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }

  .cookie-actions {
    justify-content: flex-end;
  }
}

/* Bildirim (toast) */
.ov-toast {
  position: fixed;
  right: 24px;
  bottom: 162px;
  z-index: 3000;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1f2937;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.ov-toast.show { opacity: 1; transform: translateY(0); }
.ov-toast i { font-size: 16px; flex-shrink: 0; }
.ov-toast.success { background: linear-gradient(135deg, #16a34a, #15803d); }
.ov-toast.warn { background: linear-gradient(135deg, #d97706, #92400e); }
.ov-toast.error { background: linear-gradient(135deg, #dc2626, #991b1b); }
.ov-toast.info { background: linear-gradient(135deg, #374151, #1f2937); }

@media (max-width: 1280px) {
  #overview.section.active { height: auto; }
  .ov-layout { grid-template-columns: 1fr 1fr; flex: none; }
  .ov-map-card { grid-column: 1 / -1; min-height: 300px; }
  .ov-chart-wrap { min-height: 240px; }
}

@media (max-width: 900px) {
  .ov-layout { grid-template-columns: 1fr; }
  .ov-bottom-row { grid-template-columns: 1fr; }
  .ov-map, .ov-map .leaflet-container { min-height: 260px; }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-container {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .map-list-content {
    grid-template-columns: 1fr;
    grid-template-rows: 400px auto;
    height: auto;
  }

  .map-container {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .list-container {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .content-area {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
  }

  .page-actions {
    width: 100%;
    flex-direction: column;
  }

  .page-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .search-bar {
    width: 100%;
  }

  .section-header-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .main-header {
    padding: 12px 16px;
  }

  .user-name {
    display: none;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}