/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#faf7f2;--cream2:#f3ede4;--cream3:#e8dfd3;
  --brown:#5c3d2e;--brown2:#8b6b54;--brown3:#b89a7e;
  --green:#4a7c59;--green2:#6a9e5c;--green-light:#e8f5e9;
  --orange:#d4812a;--orange-light:#fff3e0;
  --red:#c0392b;--red-light:#fce4e4;
  --text:#3e2c20;--text2:#6b5648;--text3:#9e8b7d;
  --white:#fff;--shadow:0 2px 8px rgba(92,61,46,.12);
  --shadow-lg:0 6px 24px rgba(92,61,46,.18);
  --radius:10px;--radius-sm:6px;
  --transition:.2s ease;
  --breakfast:#f59e0b;--lunch:#22c55e;--dinner:#6366f1;--snack:#ec4899;
  --sidebar-w:280px;--grocery-w:320px;
}
html{font-size:15px}
body{background:var(--cream);color:var(--text);font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;overflow-x:hidden}
button{cursor:pointer;font-family:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
.hidden{display:none!important}

/* ===== Buttons ===== */
.btn{
  padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--cream3);
  background:var(--white);color:var(--text);font-size:.85rem;transition:all var(--transition);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.btn:hover{background:var(--cream2);border-color:var(--brown3)}
.btn-sm{padding:4px 10px;font-size:.8rem}
.btn-accent{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-accent:hover{background:var(--green2)}
.btn-danger{color:var(--red)}
.btn-danger:hover{background:var(--red-light)}
.icon-btn{background:none;border:none;font-size:1.2rem;padding:4px 8px;color:var(--text2);border-radius:var(--radius-sm)}
.icon-btn:hover{background:var(--cream2)}

/* ===== Header ===== */
#header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:10px 16px;background:var(--white);border-bottom:2px solid var(--cream3);
  position:sticky;top:0;z-index:100;
}
.header-left{display:flex;align-items:center;gap:10px}
.header-left h1{font-size:1.2rem;font-weight:700;color:var(--brown)}
.header-center{display:flex;align-items:center}
.servings-label{font-size:.85rem;color:var(--text2);display:flex;align-items:center;gap:6px}
.servings-label select{padding:4px 8px;border:1px solid var(--cream3);border-radius:var(--radius-sm);background:var(--white);color:var(--text)}
.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-controls{display:flex;align-items:center;gap:4px}
.plan-controls select{padding:4px 8px;border:1px solid var(--cream3);border-radius:var(--radius-sm);background:var(--white);max-width:160px}

/* ===== Layout ===== */
#app{display:flex;flex-direction:column;min-height:100vh}
#sidebar,#main,#grocery-panel{transition:all .25s ease}

/* Sidebar */
.sidebar{
  position:fixed;left:0;top:52px;bottom:0;width:var(--sidebar-w);
  background:var(--white);border-right:1px solid var(--cream3);z-index:80;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(0);
}
.sidebar:not(.open){transform:translateX(-100%)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--cream3)}
.sidebar-header h2{font-size:1rem;font-weight:600;color:var(--brown)}
.search-input{
  margin:8px 10px;padding:8px 12px;border:1px solid var(--cream3);border-radius:var(--radius);
  background:var(--cream);outline:none;
}
.search-input:focus{border-color:var(--brown3)}
.recipe-list{flex:1;overflow-y:auto;padding:6px 10px}

/* Recipe cards in sidebar */
.recipe-card{
  padding:10px 12px;margin-bottom:6px;background:var(--cream);border:1px solid var(--cream3);
  border-radius:var(--radius);cursor:grab;transition:all var(--transition);
  border-left:4px solid var(--text3);position:relative;
}
.recipe-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.recipe-card:active{cursor:grabbing}
.recipe-card[data-category="breakfast"]{border-left-color:var(--breakfast)}
.recipe-card[data-category="lunch"]{border-left-color:var(--lunch)}
.recipe-card[data-category="dinner"]{border-left-color:var(--dinner)}
.recipe-card[data-category="snack"]{border-left-color:var(--snack)}
.recipe-card .rc-name{font-weight:600;font-size:.9rem;color:var(--brown)}
.recipe-card .rc-meta{font-size:.75rem;color:var(--text3);margin-top:2px}
.recipe-card .rc-actions{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;transition:opacity var(--transition)}
.recipe-card:hover .rc-actions{opacity:1}
.recipe-card .rc-actions button{font-size:.7rem;padding:2px 5px}
.recipe-group-label{font-size:.75rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:8px 0 4px;font-weight:600}

/* Main area */
#main{
  margin-left:var(--sidebar-w);padding:12px 16px;flex:1;transition:margin .25s ease;
}
.sidebar:not(.open)~#main{margin-left:0}
.planner-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.plan-info{font-size:.85rem;color:var(--text2)}
.planner-actions{display:flex;gap:6px}

/* Planner Grid */
.planner-grid{
  display:grid;
  grid-template-columns:80px repeat(7,1fr);
  grid-template-rows:auto repeat(4,minmax(90px,1fr));
  gap:4px;overflow-x:auto;
}
.grid-header{
  padding:8px;text-align:center;font-weight:700;font-size:.85rem;
  color:var(--brown);background:var(--cream2);border-radius:var(--radius-sm);
}
.grid-row-label{
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.8rem;color:var(--white);
  border-radius:var(--radius-sm);writing-mode:horizontal-tb;
  padding:6px;text-align:center;
}
.grid-row-label[data-meal="breakfast"]{background:var(--breakfast)}
.grid-row-label[data-meal="lunch"]{background:var(--lunch)}
.grid-row-label[data-meal="dinner"]{background:var(--dinner)}
.grid-row-label[data-meal="snack"]{background:var(--snack)}

.grid-cell{
  min-height:80px;background:var(--white);border:2px dashed var(--cream3);
  border-radius:var(--radius);padding:6px;transition:all var(--transition);
  display:flex;flex-direction:column;gap:4px;position:relative;
}
.grid-cell.drag-over{border-color:var(--green);background:var(--green-light);border-style:solid}
.grid-cell.empty::after{
  content:'Σύρτε ένα γεύμα εδώ';display:flex;align-items:center;justify-content:center;
  height:100%;font-size:.75rem;color:var(--text3);font-style:italic;
}
.grid-cell:not(.empty)::after{display:none}

/* Placed meal card in grid */
.meal-card{
  padding:6px 8px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:all var(--transition);position:relative;
  color:var(--white);
}
.meal-card:hover{opacity:.85;transform:scale(1.02)}
.meal-card[data-category="breakfast"]{background:var(--breakfast)}
.meal-card[data-category="lunch"]{background:var(--lunch)}
.meal-card[data-category="dinner"]{background:var(--dinner)}
.meal-card[data-category="snack"]{background:var(--snack)}
.meal-card .mc-remove{
  position:absolute;top:2px;right:4px;background:none;border:none;
  color:rgba(255,255,255,.7);font-size:.7rem;cursor:pointer;padding:0 2px;
}
.meal-card .mc-remove:hover{color:#fff}

/* Grocery Panel */
.grocery-panel{
  position:fixed;right:0;top:52px;bottom:0;width:var(--grocery-w);
  background:var(--white);border-left:1px solid var(--cream3);z-index:80;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform .25s ease;
}
.grocery-panel.open{transform:translateX(0)}
.grocery-header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;
  padding:12px 14px;border-bottom:1px solid var(--cream3);
}
.grocery-header h2{font-size:1rem;font-weight:600;color:var(--brown)}
.grocery-actions{display:flex;gap:4px;flex-wrap:wrap}
.grocery-list{flex:1;overflow-y:auto;padding:10px 14px}
.grocery-category{margin-bottom:14px}
.grocery-category-header{font-size:.85rem;font-weight:700;color:var(--brown);padding:6px 0;border-bottom:1px solid var(--cream3);margin-bottom:4px}
.grocery-item{
  display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:var(--radius-sm);
  transition:background var(--transition);
}
.grocery-item:hover{background:var(--cream)}
.grocery-item input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
.grocery-item.checked .gi-text{text-decoration:line-through;color:var(--text3)}
.gi-text{font-size:.85rem;flex:1}
.gi-qty{font-size:.8rem;color:var(--text2);white-space:nowrap}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:70}

/* Slot Popup */
.slot-popup{
  position:absolute;z-index:90;background:var(--white);border:1px solid var(--cream3);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:10px;min-width:200px;
}
.slot-popup .sp-name{font-weight:700;font-size:.95rem;color:var(--brown);margin-bottom:6px}
.slot-popup .sp-meta{font-size:.8rem;color:var(--text2);margin-bottom:4px}
.slot-popup .sp-ingredients{font-size:.78rem;color:var(--text3);margin-bottom:8px;max-height:100px;overflow-y:auto}
.slot-popup .sp-method{font-size:.78rem;color:var(--text2);margin-bottom:8px;max-height:120px;overflow-y:auto;line-height:1.5;white-space:pre-wrap}
.slot-popup .sp-actions{display:flex;gap:6px}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal{
  background:var(--white);border-radius:var(--radius);width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  border-bottom:1px solid var(--cream3);
}
.modal-header h2{font-size:1.1rem;font-weight:700;color:var(--brown)}
.recipe-form{padding:16px 18px}
.form-row{margin-bottom:12px}
.form-row label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--text2);font-weight:600}
.form-row input,.form-row select{padding:8px 10px;border:1px solid var(--cream3);border-radius:var(--radius-sm);background:var(--cream);outline:none}
.form-row input:focus,.form-row select:focus{border-color:var(--brown3)}
.form-row-half{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-section{margin-top:12px}
.form-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.form-section-header h3{font-size:.9rem;color:var(--brown)}
.ingredients-list{display:flex;flex-direction:column;gap:6px}
.ingredient-row{
  display:grid;grid-template-columns:1fr 70px 90px 120px 28px;gap:6px;align-items:center;
}
.ingredient-row input,.ingredient-row select{
  padding:6px 8px;border:1px solid var(--cream3);border-radius:var(--radius-sm);
  background:var(--cream);font-size:.82rem;
}
.ingredient-row .remove-ing{
  background:none;border:none;color:var(--red);font-size:1rem;cursor:pointer;padding:0;
  text-align:center;
}
.method-textarea{
  width:100%;padding:8px 10px;border:1px solid var(--cream3);border-radius:var(--radius-sm);
  background:var(--cream);outline:none;resize:vertical;font-size:.85rem;line-height:1.5;
}
.method-textarea:focus{border-color:var(--brown3)}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--cream3)}

/* ===== Responsive ===== */
@media(max-width:900px){
  .sidebar{width:100%;height:50vh;top:auto;bottom:0;left:0;right:0;
    border-right:none;border-top:2px solid var(--cream3);transform:translateY(100%);
  }
  .sidebar.open{transform:translateY(0)}
  #main{margin-left:0!important}
  .grocery-panel{width:100%}
  .planner-grid{grid-template-columns:60px repeat(7,minmax(100px,1fr))}
  .header-right .plan-controls{display:none}
}
@media(max-width:640px){
  .planner-grid{font-size:.8rem}
  .grid-cell{min-height:60px;padding:4px}
  .ingredient-row{grid-template-columns:1fr 60px 80px 100px 24px}
  #header{padding:8px 10px}
  .header-left h1{font-size:1rem}
}

/* ===== Print ===== */
@media print{
  #header,#sidebar,.overlay,.modal-overlay,#main,.grocery-header .grocery-actions{display:none!important}
  .grocery-panel{position:static!important;transform:none!important;width:100%!important;border:none!important}
  .grocery-item input[type="checkbox"]{display:none}
  .grocery-item::before{content:"☐ ";font-size:1rem}
  .grocery-item.checked::before{content:"☑ "}
  body{background:#fff;color:#000}
  .grocery-category-header{color:#000;border-color:#ccc}
  .gi-text{color:#000!important;text-decoration:none!important}
}