/* ============================================================
   IDLE FARMER — style.css  v0.06
   Warm rustic farm aesthetic — tabbed layout

   TABLE OF CONTENTS
   ---------------------------------------------------------
   1.  CSS Variables & Themes (light + dark)
   2.  Reset & Base
   3.  Layout (wrapper, header, game body, footer)
   4.  Left Panel — Resource Dashboard
         Resource bar, resource boxes, res-grid, pills,
         animal grid, worker grid, upkeep, warnings
   5.  Main Panel — Tab System
         Tab bar, sub-tabs, tier-3, tier-4, tab content,
         tab sections, scroll arrows, tab links
   6.  Action Cards & Buttons
         action-card, action-btn, chop-btn, alert badges,
         sell input, plant/remove controls, field adj btns,
         danger pill, land purchase row
   7.  Modals — General
         Overlays, settings, confirm, welcome/sawmill/offline,
         remove-fields, repair-confirm, modal components
   8.  Storage Tab
   9.  Logging, Toasts & Scrollbar
   10. Tooltips
   11. Sawmill Repair Progress Bar
   12. Crop Modal — Filing Cabinet Style
         Wrapper, tab bar, modal box, left panel, field grid,
         field states & animations, machine overlays
   13. Crop Modal — Help Page
   14. Crops Tab — Overview (portrait box layout)
   15. Rotate Overlay
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');


/* ============================================================
   1. CSS VARIABLES & THEMES
   ============================================================ */

/* ---- Light Theme (default) ---- */
:root {
  --bg-page:        #f5ede0;
  --bg-panel:       #ede0cc;
  --bg-card:        #e4d2b4;
  --bg-card-hover:  #d9c49e;
  --bg-header:      #c8a96e;
  --bg-res-box:     #f0e4d0;
  --bg-group-header: #eadbc2;

  --border:         #b8956a;
  --border-light:   #9a7848;

  --gold:           #7a5010;
  --gold-light:     #5a3800;
  --green:          #2d6e24;
  --green-light:    #1e5018;
  --red:            #8c3a2f;
  --red-light:      #6e1f16;
  --amber:          #8a5200;

  --text-primary:   #2c1a06;
  --text-secondary: #5a3a10;
  --text-muted:     #7a5428;

  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'Lato', 'Trebuchet MS', sans-serif;

  --radius:         6px;
  --shadow:         0 4px 16px rgba(0,0,0,0.15);
  --transition:     0.2s ease;

  --panel-width:    400px;
  --btn-hover-bg:   #e8dcc8;
  --btn-hover-text: var(--text-primary);
}

/* ---- Dark Theme ---- */
[data-theme="dark"] {
  --bg-page:        #1a1208;
  --bg-panel:       #2b1f0e;
  --bg-card:        #352710;
  --bg-card-hover:  #3e2e13;
  --bg-header:      #0f0a04;
  --bg-res-box:     #221608;
  --bg-group-header: #2c1f0c;

  --border:         #5a3e1b;
  --border-light:   #7a5a2b;

  --gold:           #d4a043;
  --gold-light:     #f0c060;
  --green:          #4a8c3f;
  --green-light:    #6ab05e;
  --red:            #8c3a2f;
  --red-light:      #c0544a;
  --amber:          #c47a1a;

  --text-primary:   #f0ddb0;
  --text-secondary: #a08050;
  --text-muted:     #6a5030;

  --shadow:         0 4px 16px rgba(0,0,0,0.5);
  --btn-hover-bg:   #3a2d1a;
  --btn-hover-text: var(--text-primary);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

body {
  background: var(--bg-page);
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(180,130,60,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(80,120,40,0.08) 0%, transparent 60%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 100vh;
  line-height: 1.5;
}


/* ============================================================
   3. LAYOUT — WRAPPER, HEADER, GAME BODY, FOOTER
   ============================================================ */

#game-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* ---- Header ---- */
#game-header {
  background: var(--bg-header) url('header2.webp') center center / cover no-repeat;
  border-bottom: 2px solid var(--border);
  height: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

#header-controls { display: flex; gap: 8px; }

.ctrl-btn {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.ctrl-btn:hover { background: rgba(0,0,0,0.65); border-color: rgba(255,255,255,0.5); color: #fff; }
.ctrl-btn.danger:hover { border-color: var(--red-light); color: var(--red-light); }

/* ---- Game Body ---- */
#game-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

/* ---- Footer ---- */
#game-footer {
  background: var(--bg-header);
  border-top: 1px solid var(--border);
  padding: 6px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}


/* ============================================================
   4. LEFT PANEL — RESOURCE DASHBOARD
   ============================================================ */

#panel-resources {
  background: var(--bg-panel);
  border-right: 2px solid var(--border);
  flex: 0 0 var(--panel-width);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sticky resource bar — always visible at top of left panel */
#box-resources {
  flex-shrink: 0;
  background: var(--bg-card);
  border-bottom: 3px solid var(--border-light);
  z-index: 10;
}

#resources-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 10px;
  gap: 4px;
  flex-wrap: nowrap;
}

.res-bar-item {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.res-bar-val { color: var(--text-primary); font-weight: 700; }
.res-bar-cap { color: var(--text-muted); font-weight: 400; }

.res-bar-divider {
  color: var(--border-light);
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
}

/* Resource bar tab links (Cash / Lumber / Land) */
.res-resource-link { color: #1a4a8a; cursor: pointer; font-weight: 700; }
.res-resource-link:hover { color: #2a6acc; }
[data-theme="dark"] .res-resource-link       { color: #5a9de8; }
[data-theme="dark"] .res-resource-link:hover { color: #7ab8f5; }

/* Scrollable area below the sticky bar */
#panel-resources-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* ---- Resource Box ---- */
.res-box {
  background: var(--bg-res-box);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.res-box-title {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.res-box-hint {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}

.res-box-food {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: auto;
  padding-right: 4px;
}

.res-box-btn {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  transition: var(--transition);
  white-space: nowrap;
}
.res-box-btn:hover    { background: var(--btn-hover-bg); border-color: var(--border-light); color: var(--btn-hover-text); }
.res-box-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- 2-column grid inside resource boxes ---- */
.res-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.res-item {
  background: var(--bg-res-box);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.res-item.full-width {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.res-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.res-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.res-cap          { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.res-muted        { color: var(--text-muted) !important; font-style: italic; font-size: 10px; }
.res-muted-italic { font-style: italic; font-size: 10px; color: var(--text-muted); }

/* ---- Left panel group headers ---- */
.res-group-header {
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10px;
  padding: 6px 8px 3px 8px;
  background: var(--bg-group-header);
  border-bottom: 1px solid var(--border);
}

.res-group-spacer { height: 6px; background: var(--bg-page); grid-column: 1 / -1; }

/* ---- Acreage field rows ---- */
.acreage-field-row {
  background: var(--bg-res-box);
  padding: 5px 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  grid-column: span 1;
}

.acreage-field-row .res-label.tab-link {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

/* ---- Building rows ---- */
.building-row .res-label.tab-link       { color: #1a4a8a; cursor: pointer; font-weight: 700; }
.building-row .res-label.tab-link:hover { color: #2a6acc; }
[data-theme="dark"] .building-row .res-label.tab-link       { color: #5a9de8; }
[data-theme="dark"] .building-row .res-label.tab-link:hover { color: #7ab8f5; }

/* ---- Animal grid ---- */
.animal-grid { display: flex; flex-direction: column; }

.animal-grid-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 4px 0;
  background: var(--bg-res-box);
  border-bottom: 2px solid var(--border);
}

.animal-grid-header span {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0 8px;
  border-right: 1px solid var(--border);
}
.animal-grid-header span:last-child { border-right: none; }

.animal-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.animal-grid-row:last-child { border-bottom: none; }

.animal-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-right: 1px solid var(--border);
}
.animal-grid-row .animal-cell:last-child { border-right: none; }

/* Product cell layout */
.animal-cell-product { display: flex; flex-direction: row; align-items: center; gap: 0; padding: 0 6px; }
.animal-product-left  { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 1px; }
.animal-product-right { display: flex; flex-direction: column; align-items: flex-end; flex: 1; gap: 1px; }
.animal-product-divider { color: var(--border); font-size: 14px; font-weight: 300; padding: 0 4px; align-self: center; }

.animal-cell .res-val   { font-size: 12px; }
.animal-cell .res-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.animal-cell .res-label.tab-link       { color: #1a4a8a; cursor: pointer; font-weight: 700; }
.animal-cell .res-label.tab-link:hover { color: #2a6acc; }
[data-theme="dark"] .animal-cell .res-label.tab-link       { color: #5a9de8; }
[data-theme="dark"] .animal-cell .res-label.tab-link:hover { color: #7ab8f5; }

.upkeep-cell .res-val { color: var(--amber); font-size: 12px; }
.animals-empty-msg    { grid-column: 1 / -1; }

/* ---- Worker grid ---- */
.worker-grid-header { grid-template-columns: 1.2fr 1fr 0.8fr; }
.worker-grid-row    { grid-template-columns: 1.2fr 1fr 0.8fr; }

/* ---- Upkeep rows — amber to signal ongoing consumption ---- */
.upkeep-row .res-label { color: var(--amber); }
.upkeep-row .res-val   { color: var(--amber); font-size: 12px; }

/* ---- Harvest ready highlight ---- */
.harvest-ready-box .res-val   { color: var(--green-light); }
.harvest-ready-box .res-label { color: var(--green); }

/* ---- Warnings ---- */
.storage-warn { color: var(--red-light) !important; animation: flashWarn 1.2s infinite; }
.cost-warn    { color: var(--red-light) !important; font-weight: 700 !important; animation: flashWarn 1.2s infinite; }
@keyframes flashWarn {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Assign card hunger warning */
.assign-hunger-warning {
  margin-top: 8px;
  padding: 5px 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--red-light);
  text-align: center;
  animation: flashWarn 1.2s infinite;
  grid-column: 1 / -1;
  width: 100%;
}

/* ---- Crop pills (storage panel) ---- */
.crop-pill-container { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; }

.pill-empty-msg {
  width: 100%;
  padding: 4px 2px;
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

.crop-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  transition: var(--transition);
  flex: 0 0 calc(33.33% - 4px);
  justify-content: space-between;
  min-width: 0;
}
.crop-pill:hover { filter: brightness(1.08); transform: translateY(-1px); }

.pill-label { font-weight: 700; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-val   { font-weight: 700; white-space: nowrap; opacity: 0.9; }

.pill-green  { background: rgba(45,110,36,0.15);  border-color: rgba(45,110,36,0.4);  color: var(--green); }
.pill-yellow { background: rgba(200,160,20,0.15); border-color: rgba(200,160,20,0.4); color: #8a7000; }
.pill-orange { background: rgba(180,90,0,0.15);   border-color: rgba(180,90,0,0.4);   color: #8a4500; }
.pill-red    { background: rgba(140,58,47,0.15);  border-color: rgba(140,58,47,0.4);  color: var(--red); }

[data-theme="dark"] .pill-yellow { color: #d4b800; }
[data-theme="dark"] .pill-orange { color: #d47000; }

.pill-sort-btns { display: flex; gap: 3px; }
.pill-sort-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  transition: var(--transition);
}
.pill-sort-btn:hover  { color: var(--gold); border-color: var(--gold); }
.pill-sort-btn.active { background: rgba(212,160,67,0.15); border-color: var(--gold); color: var(--gold); }


/* ============================================================
   5. MAIN PANEL — TAB SYSTEM
   ============================================================ */

#panel-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  background: var(--bg-panel);
}

/* ---- Main Tab Bar wrapper ---- */
#tab-bar-wrapper {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-panel);
  position: relative;
}

/* Scroll arrows */
.tab-scroll-arrow {
  display: none;
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 28px;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 13px;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  border: none;
}
#tab-arrow-left  { left: 0;  background: linear-gradient(to right, var(--bg-panel) 60%, transparent); }
#tab-arrow-right { right: 0; background: linear-gradient(to left,  var(--bg-panel) 60%, transparent); }
.tab-scroll-arrow:hover { color: var(--gold-light); }

/* ---- Main Tab Bar ---- */
#tab-bar {
  display: flex;
  background: var(--bg-panel);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 32px;
  gap: 2px;
}
#tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-left: 1px solid rgba(184,149,106,0.3);
  border-right: 1px solid rgba(184,149,106,0.3);
  color: var(--text-secondary);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  transition: var(--transition);
  white-space: nowrap;
  margin-bottom: -2px;
}
.tab-btn:hover { color: var(--gold-light); background: var(--bg-res-box); }
.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--bg-card);
  background: var(--bg-card);
  border-top: 2px solid var(--border-light);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  margin-top: -2px;
}

/* ---- Sub-Tab Bar (pill style) ---- */
.sub-tab-bar {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 0 4px 10px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tab-bar::-webkit-scrollbar { display: none; }

.sub-tab-btn {
  background: var(--bg-res-box);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
}
.sub-tab-btn:hover  { color: var(--gold-light); border-color: var(--border-light); }
.sub-tab-btn.active { background: rgba(212,160,67,0.12); border-color: var(--gold); color: var(--gold); }

.sub-tab-content        { display: none; flex-direction: column; gap: 10px; }
.sub-tab-content.active { display: flex; }

/* ---- Tier-3 Tab Bar ---- */
.tier3-tab-bar {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 0 4px;
  border-bottom: 2px solid var(--border);
  margin-top: -10px;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
}
.tier3-tab-bar::-webkit-scrollbar { display: none; }

/* When tier-3 is first child of sub-tab-content, reset negative margin */
.sub-tab-content .tier3-tab-bar:first-child { margin-top: 10px; }

.tier3-tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: var(--text-secondary);
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
  position: relative;
  bottom: -2px;
}
.tier3-tab-btn:hover  { color: var(--gold-light); background: var(--bg-res-box); }
.tier3-tab-btn.active {
  background: var(--bg-card);
  border-color: var(--border-light);
  border-bottom-color: var(--bg-card);
  color: var(--gold);
  z-index: 1;
}

.tier3-tab-content        { display: none; flex-direction: column; gap: 10px; padding: 12px 0 0 0; }
.tier3-tab-content.active { display: flex; }

/* Remove top padding from tier3 content that hosts tier4 tabs */
#tier3-market-products-crops,
#tier3-market-products-food { padding-top: 0; }

/* ---- Tier-4 Tab Bar ---- */
.tier4-tab-bar {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 0 4px;
  border-bottom: 2px solid var(--border);
  margin-top: -8px;
  margin-bottom: 0;
  margin-left: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
}
.tier4-tab-bar::-webkit-scrollbar { display: none; }

.tier4-tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: var(--text-secondary);
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
  position: relative;
  bottom: -2px;
}
.tier4-tab-btn:hover  { color: var(--gold-light); background: var(--bg-res-box); }
.tier4-tab-btn.active {
  background: var(--bg-card);
  border-color: var(--border-light);
  border-bottom-color: var(--bg-card);
  color: var(--gold);
  z-index: 1;
}

.tier4-tab-content        { display: none; flex-direction: column; gap: 10px; padding: 12px 0 0 0; }
.tier4-tab-content.active { display: flex; }

/* ---- Tab Content area ---- */
.tab-content        { display: none; overflow-y: auto; flex: 1; padding: 16px; gap: 20px; flex-direction: column; }
.tab-content.active { display: flex; }

/* Storage tab overrides */
#tab-storage        { display: none; flex-direction: column; overflow: hidden; flex: 1; padding: 0; }
#tab-storage.active { display: flex; }

/* Crops tab overrides (shell handles its own padding) */
#tab-crops { padding: 0; }

/* Tab section */
.tab-section  { display: flex; flex-direction: column; gap: 10px; }

.section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  letter-spacing: 0.5px;
}

/* ---- Tab Links — inline navigation text ---- */
.tab-link       { color: #1a4a8a; font-weight: 700; cursor: pointer; text-decoration: none; transition: var(--transition); }
.tab-link:hover { color: #2a6acc; }
[data-theme="dark"] .tab-link       { color: #5a9de8; }
[data-theme="dark"] .tab-link:hover { color: #7ab8f5; }


/* ============================================================
   6. ACTION CARDS & BUTTONS
   ============================================================ */

/* ---- Action Card ---- */
.action-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: var(--transition);
  position: relative;
}
.action-card:hover           { background: var(--bg-card-hover); border-color: var(--border-light); }
.action-card.info-card:hover { background: var(--bg-card); }

.action-info      { flex: 1; }
.action-info h3   { font-size: 14px; color: var(--gold-light); margin-bottom: 4px; font-family: var(--font-display); }
.action-info p    { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
.cost-line        { font-size: 11px !important; margin-top: 4px !important; }
.cost             { color: var(--gold); font-weight: 700; }

/* ---- Action Button ---- */
.action-btn {
  background: var(--bg-page);
  border: 2px solid var(--border);
  color: var(--text-primary);
  padding: 8px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
  min-width: 130px;
  text-align: center;
}
.action-btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--border-light);
  color: var(--btn-hover-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.action-btn:active   { transform: translateY(0); }
.action-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.action-btn.green { border-color: var(--green); }
.action-btn.green:hover {
  background: var(--btn-hover-bg);
  border-color: var(--green);
  color: var(--btn-hover-text);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ---- Danger button ---- */
.danger-btn { border-color: var(--red) !important; color: var(--red-light) !important; min-width: 0 !important; }
.danger-btn:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red-light) !important; box-shadow: 0 4px 12px rgba(140,58,47,0.4) !important; }

/* ---- Danger pill ---- */
.danger-pill { border-color: var(--red) !important; color: var(--red-light) !important; font-size: 11px !important; padding: 2px 8px !important; min-width: 0 !important; }
.danger-pill:hover    { background: var(--red) !important; color: #fff !important; border-color: var(--red-light) !important; }
.danger-pill:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---- Chop Button — button IS the progress bar ---- */
.chop-btn { position: relative; overflow: hidden; min-width: 130px; z-index: 0; }
.logging-chop-btn { width: 100%; margin-top: auto; }
.chop-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--chop-fill, 0%);
  background: #4a90d9;
  z-index: -1;
  border-radius: var(--radius);
}
.chop-btn.chopping { color: #fff !important; border-color: #2a6aaa !important; cursor: not-allowed; }

/* ---- Alert Badges ---- */
.tab-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  font-family: var(--font-body);
  border-radius: 8px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  vertical-align: middle;
  letter-spacing: 0;
  animation: badge-pulse 1.8s ease-in-out infinite;
}

.card-alert-badge {
  position: absolute;
  top: -7px; right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  font-family: var(--font-body);
  border-radius: 10px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: none;
  animation: badge-pulse 1.8s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 6px rgba(192,57,43,0.4); }
  50%       { transform: scale(1.18); box-shadow: 0 2px 10px rgba(192,57,43,0.7); }
}

/* Teaser / locked building card */
.card-locked            { opacity: 0.45; filter: grayscale(40%); pointer-events: none; }
.card-locked .action-btn { cursor: not-allowed; }

/* ---- Spinners / qty controls ---- */
.assign-card     { align-items: center; }
.assign-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.field-adj-btn {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  line-height: 1;
}
.field-adj-btn:hover { background: var(--btn-hover-bg); border-color: var(--border-light); color: var(--btn-hover-text); }

.field-remove-qty {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Field remove row layout */
.field-row-left            { display: flex; align-items: center; gap: 6px; min-width: 70px; flex-shrink: 0; }
.field-row-left .res-label { white-space: nowrap; }
.field-row-left .res-val   { font-size: 12px; }

.field-remove-row     { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 8px 8px !important; }
.field-remove-controls { display: flex; align-items: center; gap: 4px; width: 100%; flex-wrap: wrap; }

.field-preset-btns { display: flex; gap: 3px; flex: 1; }
.field-preset-btn {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  transition: var(--transition);
  white-space: nowrap;
}
.field-preset-btn:hover { border-color: var(--border-light); color: var(--gold); }

/* Plant/Remove card controls */
.plant-remove-controls { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.plant-remove-btns     { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.plant-remove-btns .action-btn { min-width: 110px; padding: 7px 14px; font-size: 12px; }

/* ---- Sell Input ---- */
.sell-input {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 3px 6px;
  border-radius: 4px;
  width: 65px;
  font-size: 12px;
  font-family: var(--font-body);
}
.sell-input:focus { outline: 1px solid var(--gold); }

/* ---- Sell Qty Row ---- */
.sell-qty-row     { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sell-qty-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.sell-pct-presets { border-left: 1px solid var(--border); padding-left: 8px; }

.sell-qty-btn {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  transition: var(--transition);
  white-space: nowrap;
}
.sell-qty-btn:hover  { background: var(--btn-hover-bg); border-color: var(--border-light); color: var(--btn-hover-text); }
.sell-qty-btn.active { background: rgba(212,160,67,0.12); border-color: var(--gold); color: var(--gold); }

.sell-qty-adj { display: flex; align-items: center; gap: 5px; }
.sell-qty-val { font-size: 13px; font-weight: 700; color: var(--text-primary); min-width: 28px; text-align: center; }

/* ---- Land purchase row ---- */
.land-purchase-row { flex-wrap: wrap; gap: 6px !important; padding: 8px 8px !important; align-items: center; }
.land-qty-btns     { display: flex; gap: 4px; flex: 1; justify-content: center; }

.land-qty-btn {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  transition: var(--transition);
  white-space: nowrap;
}
.land-qty-btn:hover  { border-color: var(--border-light); color: var(--gold); }
.land-qty-btn.active { background: rgba(212,160,67,0.12); border-color: var(--gold); color: var(--gold); }


/* ============================================================
   7. MODALS — GENERAL
   ============================================================ */

.modal-hidden  { display: none; }
.modal-visible { display: flex; }

/* All modal overlays */
#modal-overlay,
#modal-overlay-confirm,
#modal-overlay-remove-fields,
#modal-overlay-welcome,
#modal-overlay-sawmill-discovery,
#modal-overlay-repair-confirm,
#modal-overlay-sawmill-ready,
#modal-overlay-offline,
#modal-overlay-crop-fields {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

/* Modal box sizes */
#modal-settings {
  background: var(--bg-panel); border: 2px solid var(--border);
  border-radius: var(--radius); width: 480px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}

#modal-confirm {
  background: var(--bg-panel); border: 2px solid var(--red);
  border-radius: var(--radius); width: 400px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}

#modal-remove-fields {
  background: var(--bg-panel); border: 2px solid var(--red);
  border-radius: var(--radius); width: 420px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}

#modal-welcome,
#modal-sawmill-discovery,
#modal-sawmill-ready,
#modal-offline {
  background: var(--bg-panel); border: 2px solid var(--border);
  border-radius: var(--radius); width: 520px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}

#modal-repair-confirm {
  background: var(--bg-panel); border: 2px solid var(--border);
  border-radius: var(--radius); width: 400px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}

/* Modal components */
.modal-header {
  background: var(--bg-header);
  border-bottom: 2px solid var(--border);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); }

.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { border-color: var(--red-light); color: var(--red-light); }

.modal-body    { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.modal-section { display: flex; flex-direction: column; gap: 10px; }

.modal-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.danger-section .modal-section-title { color: var(--red-light); border-color: var(--red); }

.modal-row      { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
.modal-row-info { display: flex; flex-direction: column; gap: 3px; }
.modal-row-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.modal-row-desc  { font-size: 11px; color: var(--text-muted); }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: var(--transition);
}
.toggle-slider:before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: var(--transition);
}
.toggle-switch input:checked + .toggle-slider              { background: var(--green); }
.toggle-switch input:checked + .toggle-slider:before       { transform: translateX(20px); background: #fff; }

/* Confirm modal */
.confirm-text        { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; }
.confirm-text strong { color: var(--red-light); }
.confirm-buttons     { display: flex; gap: 10px; justify-content: flex-end; }

/* Welcome / narrative modals */
.welcome-body  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.welcome-intro { font-family: var(--font-display); font-size: 15px !important; color: var(--gold) !important; font-style: italic; }
.welcome-tip {
  background: rgba(122,80,16,0.12);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 11px !important;
  color: var(--text-muted) !important;
}


/* ============================================================
   8. STORAGE TAB
   ============================================================ */

#storage-sticky-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--border);
  padding: 10px 16px 8px;
  flex-shrink: 0;
}

.storage-header-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.storage-header-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  display: flex; gap: 5px; align-items: center;
}
.storage-header-chip.chip-full { border-color: var(--amber); background: rgba(138,82,0,0.1); }

.chip-label { font-weight: 700; color: var(--text-primary); }
.chip-avail { color: var(--green); font-weight: 700; }
.chip-full .chip-avail { color: var(--amber); }

.storage-header-empty   { font-size: 11px; font-style: italic; color: var(--text-muted); }

.storage-warning-banner {
  background: rgba(138,82,0,0.1);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--amber);
  font-style: italic;
}

#storage-tab-content { padding: 12px 16px; overflow-y: auto; flex: 1; }
.storage-empty-msg   { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 16px 0; }

.storage-alloc-grid {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}

.storage-grid-row         { display: flex; align-items: center; border-bottom: 1px solid var(--border); min-height: 40px; }
.storage-grid-row:last-child { border-bottom: none; }

.storage-grid-header {
  background: var(--bg-card);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--gold); min-height: 36px;
}

.storage-grid-crop { flex: 0 0 90px; padding: 6px 10px; font-weight: 700; font-size: 12px; color: var(--text-primary); border-right: 1px solid var(--border); }
.storage-grid-header .storage-grid-crop { font-size: 10px; color: var(--gold); }

.storage-grid-cell {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 4px 6px; border-right: 1px solid var(--border);
  text-align: center; font-size: 11px; color: var(--text-muted);
}
.storage-grid-header .storage-grid-cell { flex-direction: column; gap: 1px; font-size: 10px; color: var(--gold); }

.storage-grid-cap-hint { font-size: 9px; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.storage-alloc-val     { font-size: 13px; font-weight: 700; color: var(--text-primary); min-width: 20px; text-align: center; }
.storage-adj-btn       { width: 20px !important; height: 20px !important; font-size: 12px !important; }

.storage-grid-total { flex: 0 0 110px; padding: 6px 10px; text-align: right; font-size: 12px; }
.storage-grid-header .storage-grid-total { font-size: 10px; color: var(--gold); font-weight: 700; }

.storage-total-val  { font-weight: 700; color: var(--green); }
.storage-total-used { font-size: 10px; color: var(--text-muted); display: block; }


/* ============================================================
   9. LOGGING, TOASTS & SCROLLBAR
   ============================================================ */

/* ---- Log Drawer ---- */
#log-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 280px;
  background: var(--bg-panel);
  border-top: 2px solid var(--border);
  z-index: 900;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
}
.log-drawer-closed { transform: translateY(100%); }
.log-drawer-open   { transform: translateY(0); }

#log-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  color: var(--gold); font-size: 1rem;
  flex-shrink: 0;
}

#log-entries {
  overflow-y: auto; padding: 10px 16px;
  display: flex; flex-direction: column; gap: 5px;
  flex: 1;
}

.log-entry {
  padding: 5px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--border);
  background: rgba(0,0,0,0.2);
  color: var(--text-secondary);
  font-size: 11px;
  animation: fadeIn 0.3s ease;
}
.log-entry.good { border-left-color: var(--green);  color: var(--green-light); }
.log-entry.bad  { border-left-color: var(--red);    color: var(--red-light); }
.log-entry.info { border-left-color: var(--gold);   color: var(--gold-light); }
.log-entry.warn { border-left-color: var(--amber);  color: var(--amber); }

.log-time { color: var(--text-muted); font-size: 10px; display: block; margin-bottom: 1px; }

/* ---- Toast Notifications ---- */
#toast-container {
  position: fixed; bottom: 48px; right: 20px;
  z-index: 1000;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  animation: toastIn 0.25s ease forwards;
  max-width: 300px;
  pointer-events: none;
  border-left: 4px solid var(--gold);
}
.toast.error   { border-left-color: var(--red-light);   color: var(--red-light); }
.toast.good    { border-left-color: var(--green-light); color: var(--green-light); }
.toast.fadeout { animation: toastOut 0.4s ease forwards; }

/* ---- Shared keyframes ---- */
@keyframes fadeIn  { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }

/* ---- Scrollbar ---- */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }


/* ============================================================
   10. TOOLTIPS
   ============================================================ */

#tooltip-bubble {
  position: fixed;
  max-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: 1100;
  display: none;
}
#tooltip-bubble.visible { display: block; }

#tooltip-text {
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
  word-break: break-word;
  white-space: pre-line;
}


/* ============================================================
   11. SAWMILL REPAIR PROGRESS BAR
   ============================================================ */

.repair-progress-wrap { margin-top: 10px; }

.repair-progress-track {
  width: 100%; height: 18px;
  background: var(--card-bg, #e8dcc8);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.repair-progress-bar {
  height: 100%;
  background: var(--green, #5a8a3c);
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 0%;
}
.repair-progress-bar.full {
  width: 100%;
  background: var(--green, #5a8a3c);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
}

.repair-progress-label { margin-top: 4px; font-size: 11px; color: var(--text-muted); text-align: center; }
.repair-done-link      { margin-top: 8px; font-size: 12px; color: var(--text); }
.repair-step-label     { margin-top: 6px; font-size: 11px; font-style: italic; color: var(--text-muted); text-align: center; }

.repair-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }


/* ============================================================
   12. CROP MODAL — FILING CABINET STYLE
   ============================================================ */

/* Wrapper */
#modal-crop-fields-wrapper {
  display: flex; flex-direction: column;
  align-items: flex-start;
  max-height: 90vh;
}

/* ---- Floating Tab Bar ---- */
#crop-modal-tab-bar {
  display: flex; gap: 3px;
  padding: 0 0 0 12px;
  position: relative; z-index: 1;
}

.crop-modal-tab {
  background: var(--bg-card);
  border: 2px solid var(--border); border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--text-secondary);
  padding: 8px 20px;
  cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
  opacity: 0.75;
  transform: translateY(2px);
}
.crop-modal-tab:hover { color: var(--gold-light); opacity: 0.9; }
.crop-modal-tab.active {
  background: var(--bg-panel);
  border-color: var(--border-light);
  color: var(--gold);
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 2px 0 var(--bg-panel);
}

/* ---- Modal Box ---- */
#modal-crop-fields {
  background: var(--bg-panel);
  border: 2px solid var(--border-light);
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  width: 920px; max-width: 96vw;
  height: calc(90vh - 44px); max-height: calc(90vh - 44px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

/* Close button */
.crop-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 4px; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); z-index: 2;
}
.crop-modal-close:hover { border-color: var(--red-light); color: var(--red-light); }

/* ---- Two-column body ---- */
#crop-modal-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ---- Left Panel ---- */
#crop-modal-left {
  flex: 0 0 290px;
  background: var(--bg-card);
  border-right: 2px solid var(--border);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto;
}

.crop-modal-panel-title {
  font-family: var(--font-display);
  font-size: 15px; color: var(--gold);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.crop-modal-section-title {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted); margin-bottom: 8px;
}

.crop-modal-stat-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.crop-modal-stat-row   { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.crop-modal-stat-label { color: var(--text-secondary); }
.crop-modal-stat-val   { font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }

.crop-modal-divider { height: 1px; background: var(--border); margin: 12px 0; }

.crop-modal-hint { font-size: 11px; color: var(--text-muted); font-style: italic; line-height: 1.5; }

/* Worker spinner buttons */
.crop-modal-spinner-btn {
  background: var(--bg-page); border: 1px solid var(--border); color: var(--text-primary);
  width: 20px; height: 20px; border-radius: 3px; cursor: pointer;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: var(--transition); flex-shrink: 0;
}
.crop-modal-spinner-btn:hover { background: var(--btn-hover-bg); border-color: var(--border-light); }

.crop-modal-spinner-val { min-width: 20px; text-align: center; font-size: 13px; font-weight: 700; color: var(--green); }

/* Priority slider */
.crop-modal-priority-slider-wrap  { display: flex; flex-direction: column; gap: 4px; }
.crop-modal-priority-labels { display: flex; justify-content: space-between; font-size: 14px; padding: 0 2px; }

.crop-modal-priority-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--border); outline: none; cursor: pointer;
}
.crop-modal-priority-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--border-light);
  cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.crop-modal-priority-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--border-light);
  cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.crop-modal-priority-readout { text-align: center; font-size: 11px; font-weight: 700; color: var(--gold); margin-top: 2px; }

/* Machine layout */
.crop-modal-machine-block   { display: flex; flex-direction: column; gap: 2px; }
.crop-modal-machine-row     { display: flex; align-items: center; gap: 4px; }
.crop-modal-machine-label   { font-size: 12px; font-weight: 700; color: var(--text-secondary); flex: 0 0 auto; white-space: nowrap; }
.crop-modal-machine-spinner { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.crop-modal-machine-owned   { font-size: 11px; font-weight: 700; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; }
.crop-modal-machine-free         { color: var(--green); font-weight: 700; }
.crop-modal-machine-free.empty   { color: var(--red-light); }
.crop-modal-machine-covered      { font-size: 11px; color: var(--text-muted); padding-left: 4px; }
.crop-modal-machine-covered strong { color: var(--green); }

/* ---- Right: Field Grid ---- */
#crop-modal-right { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-panel); }

#crop-field-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* Individual Field Box */
.crop-field-box {
  display: flex; flex-direction: column;
  border: 2px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-width: 0;
  background: var(--bg-card); transition: var(--transition);
}

.crop-field-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 5px 8px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); text-align: center;
}

.crop-field-art {
  flex: 1; min-height: 80px;
  background: var(--bg-res-box);
  overflow: hidden; position: relative;
}

/* Main field image */
.crop-field-art > img:first-child {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  position: absolute; top: 0; left: 0;
}

/* Dormant image dimming */
.crop-field-art.art-dormant > img:first-child { filter: brightness(0.4); }

/* Bottom action bar */
.crop-field-btn-wrap { height: 34px; flex-shrink: 0; }

/* Base bar style */
.crop-field-bar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  border: none; cursor: default;
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
}

/* State: Dormant */
.state-dormant     { border-color: var(--border); opacity: 0.55; }
.state-dormant-bar { background: var(--bg-card); color: var(--text-muted); font-style: italic; }

/* State: Ready to Plant */
.state-ready-plant { border-color: var(--border); }
.state-plant-btn   { background: var(--green); color: #fff; cursor: pointer; transition: var(--transition); }
.state-plant-btn:hover { background: var(--green-light); }

/* State: Progress bars */
.state-progress-bar { background: var(--bg-card); color: var(--text-primary); }

.crop-field-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: rgba(122,80,16,0.25);
  transition: width 0.4s ease; border-radius: 0;
}
.state-progress-bar.growing    .crop-field-progress-fill { background: rgba(45,110,36,0.25); }
.state-progress-bar.harvesting .crop-field-progress-fill { background: rgba(180,130,30,0.3); }

.crop-field-progress-label { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: var(--text-primary); }

/* State: Harvest ready */
.state-harvest-ready { border-color: var(--green); box-shadow: 0 0 0 2px rgba(45,110,36,0.25); }
.state-harvest-btn {
  background: var(--gold); color: var(--bg-page);
  cursor: pointer; transition: var(--transition);
  animation: harvestPulse 1.4s ease-in-out infinite;
}
.state-harvest-btn:hover { background: var(--gold-light); }

@keyframes harvestPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* No-fields placeholder */
.crop-modal-no-fields {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  padding: 20px; text-align: center; grid-column: 1 / -1;
}

/* ---- Machine overlay icons ---- */
.crop-field-machine {
  position: absolute; bottom: 6px;
  width: 40px; height: 40px; object-fit: contain;
  animation: machinePulse 1.6s ease-in-out infinite;
  background: rgba(245, 237, 224, 0.85);
  border-radius: 50%; padding: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
[data-theme="dark"] .crop-field-machine { background: rgba(43, 31, 14, 0.85); }

.crop-field-tractor { left: 6px; }
.crop-field-combine { right: 6px; }

/* Machine alert overlays on crop type boxes */
.crop-type-machine {
  position: absolute; bottom: 6px;
  width: 44px; height: 44px; object-fit: contain;
  display: none;
  background: rgba(245, 237, 224, 0.88);
  border-radius: 50%; padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  animation: machinePulse 1.6s ease-in-out infinite;
}
[data-theme="dark"] .crop-type-machine { background: rgba(43, 31, 14, 0.88); }

.crop-type-tractor { left: 6px; }
.crop-type-combine { right: 6px; }

/* Crops tab button machine badges */
.crops-tab-machine {
  display: inline-block;
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: middle;
  background: rgba(245, 237, 224, 0.88);
  border-radius: 50%; padding: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  animation: machinePulse 1.6s ease-in-out infinite;
  margin: 0 3px;
}
[data-theme="dark"] .crops-tab-machine { background: rgba(43, 31, 14, 0.88); }
.crops-tab-machine.hidden { display: none; }

@keyframes machinePulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.08); }
}


/* ============================================================
   13. CROP MODAL — HELP PAGE
   ============================================================ */

.help-page-title {
  font-family: var(--font-display);
  font-size: 22px; color: var(--gold);
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  letter-spacing: 0.3px;
}

.help-page-intro { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 4px; }

.help-page-section {
  margin-top: 22px; padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}

.help-page-heading {
  font-family: var(--font-display);
  font-size: 15px; color: var(--gold);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}

.help-page-heading-icon { font-size: 18px; line-height: 1; }

.help-page-body            { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 8px; }
.help-page-body:last-child { margin-bottom: 0; }

.help-page-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.help-page-list li {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.7; padding-left: 18px; position: relative;
}

.help-page-list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--gold); font-weight: 700;
}


/* ============================================================
   14. CROPS TAB — PORTRAIT BOX LAYOUT
   ============================================================ */

#crops-tab-shell {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 16px 16px 16px;
}

#crops-manage-btn-wrap { display: flex; justify-content: flex-start; }

.crops-manage-btn {
  min-width: 180px !important; padding: 6px 20px !important;
  font-size: 13px !important;
  border-color: var(--gold) !important; color: var(--gold) !important;
  letter-spacing: 0.5px;
}
.crops-manage-btn:hover {
  background: rgba(212,160,67,0.12) !important;
  border-color: var(--gold-light) !important; color: var(--gold-light) !important;
}

#crop-type-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: start; justify-content: flex-start;
}

#land-card-grid,
#logging-card-grid,
#sawmill-card-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: start; justify-content: flex-start;
}

.crop-type-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  width: 210px; flex-shrink: 0;
  height: 350px;
}
.crop-type-box-locked {
  pointer-events: none;
}
.crop-type-box-locked .crop-type-image-wrap {
  opacity: 0.55; filter: grayscale(50%);
}
.crop-type-image-wrap { position: relative; }
.crop-type-lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
  gap: 6px;
}
.crop-type-lock-icon  { font-size: 28px; line-height: 1; }

/* Unlock conditions panel — bottom of locked teaser cards */
.crop-type-unlock-conditions {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.unlock-conditions-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--gold); text-align: center; letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 3px;
}
.unlock-condition-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; padding: 2px 0;
}
.unlock-cond-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.unlock-cond-val   { font-weight: 700; color: var(--text-primary); font-size: 11px; }
.unlock-condition-row.unlock-met .unlock-cond-label { color: var(--green); }
.unlock-condition-row.unlock-met .unlock-cond-val   { color: var(--green); }
.unlock-fields-breakdown {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.unlock-field-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px;
}
.unlock-field-label { color: var(--text-muted); }
.unlock-field-count { font-weight: 700; color: var(--text-primary); }
.unlock-field-total {
  margin-top: 3px; padding-top: 3px;
  border-top: 1px solid var(--border);
}
.unlock-field-total .unlock-field-label { color: var(--text-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px; }
.unlock-field-total .unlock-field-count { color: var(--gold); font-weight: 700; }
.unlock-no-fields { font-size: 10px; color: var(--text-muted); font-style: italic; }

.crop-type-title {
  background: var(--bg-header); border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.4px; text-align: center;
}

.crop-type-image-wrap {
  width: 100%; height: 130px; overflow: hidden;
  flex-shrink: 0; position: relative;
}

.crop-type-image {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%; display: block;
}

.crop-type-divider { height: 1px; background: var(--border); flex-shrink: 0; }

.crop-type-stats { padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; }

.crop-type-stat-row   { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.crop-type-stat-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; }
.crop-type-stat-val   { font-weight: 700; color: var(--text-primary); font-size: 12px; }

.crop-stat-ready { color: var(--gold)  !important; }
.crop-stat-good  { color: var(--green) !important; }

.crop-type-controls     { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 5px; }
.crop-type-control-row  { display: flex; align-items: center; gap: 5px; }
.crop-type-ctrl-label   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); flex: 0 0 44px; }
.crop-type-spinner      { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }

.crop-type-btn-plant,
.crop-type-btn-remove {
  flex: 1; min-width: 0 !important; padding: 3px 4px !important;
  font-size: 10px !important; white-space: nowrap;
}

.crop-type-cost-line { font-size: 10px; color: var(--text-muted); text-align: center; margin: 0; }

.crop-type-empty {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  padding: 20px; text-align: center; grid-column: 1 / -1;
}


/* ============================================================
   15. ROTATE OVERLAY — shown on portrait mobile devices via JS
   ============================================================ */

#rotate-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: #2c1a06;
  align-items: center; justify-content: center; text-align: center;
}

#rotate-overlay-content { padding: 32px 24px; color: #f0ddb0; font-family: 'Lato', sans-serif; }

#rotate-icon { font-size: 64px; margin-bottom: 20px; animation: rotate-hint 2s ease-in-out infinite; }

#rotate-overlay-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px; color: #d4a043; margin-bottom: 12px;
}

#rotate-overlay-content p { font-size: 14px; color: #a08050; max-width: 260px; line-height: 1.6; }

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  40%       { transform: rotate(90deg); }
  60%       { transform: rotate(90deg); }
}