/* Global styles and typography */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
/* --- Modern Palette --- */
:root {
  --font-family: 'Inter', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #F7F6F3;
  --color-surface: #FFFFFF;
  --color-border: #EDEAE3;
  --color-accent: #2B2C29;
  --color-accent-soft: #B5A89A;
  --color-nav: #C7BBB4;
  --color-header-bg: #2B2C29;
  --color-header-text: #E7E4D6;
  --color-nav-text: #2B2C29;
  --color-toggle-bg: #C7BBB4;
  --color-toggle-active: #B5A89A;
  --color-toggle-text: #2B2C29;
  --color-table-header: #C7BBB4;
  --color-table-row: #FFFFFF;
  --color-table-alt: #F7F6F3;
  --color-btn-bg: #2B2C29;
  --color-btn-text: #E7E4D6;
  --color-btn-hover: #44443F;
  --color-btn-outline-bg: #F7F6F3;
  --color-btn-outline-border: #C7BBB4;
  --color-btn-outline-text: #2B2C29;
  --color-input-bg: #FFFFFF;
  --color-input-border: #C7BBB4;
  --color-input-focus: #B5A89A;
  --color-error: #E07A5F;
  --color-success: #81B29A;
  --color-info: #A7C7E7;
  --color-text: #2B2C29;
  --color-text-muted: #7D7D7D;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --transition: 0.18s cubic-bezier(.4,0,.2,1);
  --slot-height: 24px; /* 15-min slot height */
  --view-hours: 10; /* number of hours visible without scrolling */
}
html { font-family: var(--font-family); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin:0; padding:0; background: var(--color-bg); color:var(--color-text); font-size:18px; line-height:1.57; }
@media (max-width:600px){ body { font-size:16px; line-height:1.3; } }

h1,h2,h3,h4 { font-weight:600; letter-spacing:.5px; margin:0 0 .75rem; line-height:1.15; color:var(--color-text); }
p { margin:.5rem 0 1rem; }
a { color: var(--color-accent); text-decoration:none; }
a:hover { text-decoration:underline; }

header { background:var(--color-header-bg); border-bottom:1px solid var(--color-border); box-shadow:0 1px 2px rgba(0,0,0,.04); padding:1.5rem 0 !important; text-align:left; width:100%; margin:0; }
header .container { padding:0 1.5rem; }
header h1 { font-size:clamp(2rem, 4vw, 2rem); background:none; color:var(--color-header-text); font-weight:600; letter-spacing:.5px; margin:0; font-family:'Inter', var(--font-family); }

/* Nav bar */
.main-nav { display:flex; gap:1rem; background:var(--color-nav); padding:0.6rem 0; justify-content:center; flex-wrap:wrap; width:100%; box-shadow:0 1px 2px rgba(0,0,0,.05); border-bottom:1px solid var(--color-border); margin:0; }
.main-nav a { text-decoration:none; color:var(--color-nav-text); padding:0.35rem 0.75rem; border-radius:24px; font-weight:500; transition:background .2s,color .2s; background:none; }
.main-nav a:hover { background:var(--color-toggle-active); }
@media (max-width:600px){ .main-nav a { font-size:.85rem; } }

/* Section headers/toggles */

.toggle, .section-header {
  font-weight:500;
  background:#C7BBB4;
  color:var(--color-toggle-text);
  border-radius:var(--radius-sm);
  margin-bottom:0.5rem;
  box-shadow:0 1px 2px rgba(44,44,44,0.04);
  text-align:center;
}
.toggle {
  padding:0.5rem;
  cursor:pointer;
  transition:background .18s;
}
.toggle:hover {
    background:var(--color-header-bg);
    color:var(--color-header-text);
}

.toggle.active, .toggle:active {
  background:var(--color-toggle-active);
  color:var(--color-toggle-text);
}
  .section-header {
    font-size:1.2rem;
    padding:0.7rem 1rem;
    position:relative;
  }
  .section-header:hover {
    background:var(--color-header-bg);
    color:var(--color-header-text);
  }

/* Add-item toggle banner */
.add-toggle {
  background: #2B2C29;
  color: #C7BBB4;
  font-size: 0.8rem;
  padding: 0.5rem;
  transition: all 0.2s ease;
}
.add-toggle:hover {
  background: #C7BBB4;
  color: #2B2C29;
  box-shadow: 0 0 12px 2px #2B2C29;
}

/* Pinned section star */
.section-header .pin-star {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

.section-header .pin-star svg {
  width: 16px;
  height: 16px;
}

.section-header .pin-star.pinned svg {
  fill: #F7F6F3;
  stroke: #2B2C29;
  stroke-width: 1;
}

/* Buttons */
.btn { background:var(--color-btn-bg); color:var(--color-btn-text); border:none; padding:.55rem .9rem; font:inherit; border-radius:var(--radius-pill); cursor:pointer; font-weight:500; box-shadow:0 2px 4px rgba(0,0,0,.08); transition:var(--transition); }
.btn:hover { background:var(--color-btn-hover); }
.btn-outline { background:var(--color-btn-outline-bg); color:var(--color-btn-outline-text); border:1px solid var(--color-btn-outline-border); }
.btn-outline:hover { background:var(--color-toggle-bg); }
.filter-apply-btn {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition);
}
.filter-apply-btn:hover {
  background: var(--color-btn-hover);
}

input,select,textarea { font:inherit; border:1px solid var(--color-input-border); border-radius:var(--radius-sm); padding:.45rem .6rem; background:var(--color-input-bg); transition:var(--transition); color:var(--color-text); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--color-input-focus); border-color:var(--color-input-focus); }

.hidden { display:none !important; }

/* Tables & lists */
table { font-size:.95rem; border-collapse:collapse; width:100%; background:var(--color-table-row); }
th,td { border:1px solid var(--color-border); padding:0.35rem 0.7rem; }
th { background:var(--color-table-header); color:var(--color-toggle-text); font-weight:600; }
tr:nth-child(even) td { background:var(--color-table-alt); }
.task-grid div, .task-row { font-size:.85rem; }

/* Form grid used across pages (labels above inputs, responsive columns) */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.75rem; align-items:center; }
.form-grid label{ display:flex; flex-direction:column; font-size:0.95rem; font-weight:600; }
.form-grid input, .form-grid select, .form-grid textarea{ width:100%; font-size:1rem; padding:0.45rem; margin-top:0.35rem; box-sizing:border-box; font-weight:400; }
.form-grid select[multiple]{ min-height:90px; }
.form-grid label.checkbox{ flex-direction:row; align-items:center; gap:0.5rem; font-weight:500; }
/* Prevent checkbox/radio inputs from inheriting 100% width applied to regular inputs */
.form-grid label.checkbox input[type="checkbox"],
.form-grid label.checkbox input[type="radio"] {
  width: auto;
  margin: 0;
  padding: 0;
  transform: translateY(1px);
}

/* Collapsible sections (animated open/close) */
.collapsible { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .28s ease, opacity .18s ease; }
.collapsible.open { max-height: 520px; opacity: 1; }

/* Small switch control (used for winter care) */
.switch { display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; }
.switch input { width:1.2rem; height:1.2rem; margin:0; accent-color: var(--color-accent); }
.switch .switch-toggle { width:36px; height:20px; border-radius:20px; background:var(--color-input-border); position:relative; display:inline-block; }
.switch .switch-toggle::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:left .15s ease; }
.switch input:checked + .switch-toggle{ background:var(--color-btn-bg); }
.switch input:checked + .switch-toggle::after{ left:18px; }

/* Repeatable item card used for diseases and watering rules */
.repeat-card{ border:1px solid var(--color-border); padding:.5rem; border-radius:8px; background:var(--color-table-row); display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); align-items:center; }
.repeat-card > div, .repeat-card label{ margin:0; }

/* Adjust table for mobile view */
@media (max-width: 600px) {
  #taskHeader.task-header, .task-row {
    grid-template-columns: 2fr 1fr 1fr; /* Reduce columns for mobile */
  }

  .task-row div:nth-child(4), /* Hide unnecessary columns */
  .task-row div:nth-child(5),
  .task-row div:nth-child(6) {
    display: none;
  }

  #taskList {
    width: 100%; /* Ensure task list fits within mobile screen */
    padding-right: 0.5rem;
  }
}

/* Adjust header names for mobile view */
@media (max-width: 600px) {
  #taskHeader.task-header > div {
    font-size: 0.8rem; /* Reduce font size for header names */
    text-overflow: ellipsis; /* Add ellipsis for long names */
    overflow: hidden;
    white-space: nowrap;
  }
}

/* Adjust task table for mobile view */
@media (max-width: 600px) {
  #taskHeader.task-header, .task-row {
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Add an 'Actions' column */
  }

  .task-row div:nth-child(5) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  .task-row div:nth-child(5) button {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  .task-row div:nth-child(5) button:hover {
    background-color: var(--color-border);
  }
}

/* Utility */
.container { width:100%; max-width:1180px; margin:0 auto; padding:0 1rem; }
.surface { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:1rem; box-shadow:0 2px 8px rgba(44,44,44,0.04); }
.grid-auto { display:grid; gap:0.75rem; }

/* Alerts */
.alert-error { background:var(--color-error); color:#fff; border-radius:var(--radius-sm); padding:0.7rem 1rem; }
.alert-success { background:var(--color-success); color:#fff; border-radius:var(--radius-sm); padding:0.7rem 1rem; }
.alert-info { background:var(--color-info); color:#fff; border-radius:var(--radius-sm); padding:0.7rem 1rem; }

/* Calendar grid (time tracker) */
.calendar-grid { display:flex; flex-direction:column; gap:0; overflow:hidden; height:100%; min-height:0; }
.cal-header-row { display:grid; grid-template-columns: 100px repeat(7, 1fr); align-items:stretch; flex:0 0 auto; }
.cal-body-row { display:grid; grid-template-columns: 100px repeat(7, 1fr); align-items:stretch; flex:1 1 auto; min-height:0; overflow-y: auto; position: relative; }
.time-col-header, .day-col-header { background: var(--color-table-header); border:1px solid var(--color-border); padding:.4rem .5rem; font-weight:600; text-align:center; }
.time-col { display:flex; flex-direction:column; border-left:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.hour-label-block { height: calc(var(--slot-height) * 4); box-sizing: border-box; border-right:1px solid var(--color-border); border-top:1px solid var(--color-border); display:flex; align-items:flex-start; justify-content:flex-end; padding:.1rem .25rem; font-size:.8rem; color:var(--color-text-muted); }
.day-col { position:relative; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border); background:var(--color-surface); }
.day-col:first-child { border-left:1px solid var(--color-border); }
.day-col .slots { position:relative; display:flex; flex-direction:column; }
.slot { height: var(--slot-height); border-top:1px dashed rgba(0,0,0,0.05); box-sizing: border-box; }
.slot:nth-child(4n+1) { border-top:1px solid var(--color-border); }
.day-col .overlay { position:absolute; inset:0 0 0 0; pointer-events:none; z-index:1; }
.selection { position:absolute; left:2px; right:2px; background: rgba(167, 199, 231, 0.35); border:1px solid rgba(167,199,231,0.8); border-radius:4px; pointer-events:none; z-index:2; }
.mini-popover { position:absolute; z-index:4; background:#fff; border:1px solid var(--color-border); box-shadow:0 4px 16px rgba(0,0,0,.12); border-radius:8px; padding:.6rem; pointer-events:auto; }
.event-block { position:absolute; left:4px; right:4px; background:#C7BBB4; border-left:3px solid #2B2C29; color:#2B2C29; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.08); padding:.2rem .4rem; display:flex; align-items:center; justify-content:space-between; gap:.4rem; pointer-events:auto; z-index:3; }
.event-block .event-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.event-block .event-edit { background:transparent; border:none; cursor:pointer; font-size:.9rem; }
.event-block .resize-handle { position:absolute; left:2px; right:2px; height:6px; cursor:ns-resize; opacity:.5; }
.event-block .resize-handle.top { top:-2px; border-top:2px solid rgba(43,44,41,.6); }
.event-block .resize-handle.bottom { bottom:-2px; border-bottom:2px solid rgba(43,44,41,.6); }
.event-block.dragging { opacity:.85; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.event-block.running { opacity: .6; }

/* Quick Start Timer */
.quick-start { margin: .5rem 0 1rem; }
.qs-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.qs-input-wrap { position:relative; flex:1 1 420px; min-width:260px; }
.qs-input { width:100%; padding:.6rem .7rem; border:1px solid var(--color-input-border); border-radius: var(--radius-sm); }
.qs-list { position:absolute; left:0; right:0; top: calc(100% + 4px); background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height: 300px; overflow:auto; z-index: 20; }
.qs-list.hidden { display:none; }
.qs-item { display:flex; justify-content:space-between; gap:.75rem; padding:.45rem .6rem; cursor:pointer; }
.qs-item:hover { background: var(--color-table-alt); }
.qs-name { font-weight: 600; }
.qs-meta { color: var(--color-text-muted); font-size: .85rem; }
.qs-empty { padding:.6rem; color: var(--color-text-muted); }
.qs-hint { margin-top:.35rem; font-size:.85rem; color: var(--color-text-muted); }

/* Modal (generic) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index: 1000; }
.modal .modal-content { background: var(--color-surface); color: var(--color-text); width: min(680px, 92vw); max-height: 88vh; overflow:auto; border-radius: 10px; border:1px solid var(--color-border); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.modal .modal-header { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--color-border); position:sticky; top:0; background:var(--color-surface); z-index:1; }
.modal .modal-body { padding: 1rem; }
.modal .modal-footer { padding: .8rem 1rem; border-top:1px solid var(--color-border); position:sticky; bottom:0; background:var(--color-surface); }
.modal .close { cursor:pointer; font-size: 1.4rem; line-height:1; padding: .25rem .5rem; }