/* ==========================================================================
   Mein Speiseplaner – Frontend Styles (scoped)
   ========================================================================== */
.mspk-app, .mspk-app *,.modal,.modal * { box-sizing: border-box; }
.mspk-app {
  --mspk-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mspk-text: #0f172a;
  --mspk-muted: #64748b;
  --mspk-border: #e5e7eb;
  --mspk-bg: #ffffff;
  --mspk-soft: #f8fafc;
  --mspk-primary-1:#ffa64d;
  --mspk-primary-2:#ff8a33;
  --mspk-ring: rgba(255,148,71,.25);

  font-family: var(--mspk-font);
  font-size: 14px; line-height: 1.45; color: var(--mspk-text);
  max-width: 1100px; margin: 24px auto; padding: 0 12px;
}

/* Headings */
.mspk-app h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing:.1px; }
.mspk-app h2 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.mspk-app h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }

/* Topbar + Tabs */
.mspk-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mspk-user { color: var(--mspk-muted); }
.mspk-tabs { display:flex; gap:8px; margin-bottom:12px; }
.mspk-tabs button {
  border:0; background:#f3f4f6; color:#0f172a; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.mspk-tabs button.is-active {
  background:linear-gradient(180deg,var(--mspk-primary-1),var(--mspk-primary-2));
  color:#fff; box-shadow:0 4px 12px rgba(255,138,51,.28);
}
.tab { display:none; } .tab.is-active { display:block; }

/* Cards */
.card { background: var(--mspk-bg); border-radius: 14px; box-shadow: 0 8px 24px rgba(18,38,63,.06); padding: 14px; margin-bottom: 14px; }
.card-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Inputs */
.mspk-app input[type=text], .mspk-app input[type=number], .mspk-app input[type=search],
.mspk-app select, .mspk-app textarea {
  width:100%; height:38px; padding:7px 10px; appearance:none;
  border:1px solid var(--mspk-border) !important; background:#fff !important;
  border-radius:10px !important; font-size:14px; color:var(--mspk-text);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.mspk-app textarea { min-height:96px; height:auto; resize:vertical; }
.mspk-app input:focus, .mspk-app select:focus, .mspk-app textarea:focus {
  border-color:#ff9447 !important; box-shadow:0 0 0 3px var(--mspk-ring) !important;
}
.mspk-app ::placeholder { color:#9ca3af; }
.mspk-app label { font-weight:600; color:#111827; letter-spacing:.1px; }

/* Buttons */
.btn { border:0; padding:8px 12px; border-radius:10px; background:#eef1f4; cursor:pointer; font-weight:600; letter-spacing:.1px; }
.btn:hover { filter:brightness(.98); } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:linear-gradient(180deg,var(--mspk-primary-1),var(--mspk-primary-2)); color:#fff; box-shadow:0 6px 16px rgba(255,138,51,.30); }
.btn-primary:hover { filter:brightness(1.02); }
.btn-small { padding:6px 10px; border-radius:9px; font-size: 13px; }
.btn-danger { background:#ffe9e9; color:#b10000; }

/* Tabellen */
.table .row { display:grid; grid-template-columns: 1fr 180px 180px 210px; gap:12px; align-items:center; padding:8px 6px; border-bottom:1px solid #f0f2f5; }
.table .name { font-weight:700; } .table .sub { font-size:12px; color:var(--mspk-muted); margin-top:2px; }
.table .tr { text-align:right; }

/* Supplier-Tabelle (4 Spalten) */
#mspk-suppliers .table .row { grid-template-columns: 1fr 220px 160px 220px; }

/* KPIs */
.kpis { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:10px 0; }
.kpi { background:#f6f7f7; border-radius:10px; padding:10px; }
.kpi .l { font-size:12px; color:var(--mspk-muted); }
.kpi .v { font-size:18px; font-weight:700; }

/* Items-Formleiste */
.items-head { display:flex; gap:8px; align-items:center; margin:10px 0; flex-wrap:wrap; }

/* Modal */
.modal[aria-hidden="true"] { display:none; }
.modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(16,24,40,.45); backdrop-filter: blur(2px); }
.modal-box { width:min(820px, 96vw); background:#fff; border-radius:16px; box-shadow:0 24px 64px rgba(16,24,40,.22), 0 4px 12px rgba(16,24,40,.08); position:relative; }
.modal-x { position:absolute; right:12px; top:10px; border:0; background:transparent; cursor:pointer; font-size:20px; line-height:1; color:#6b7280; }
.modal-x:hover { color:#111827; }
.modal-body { padding:16px 18px 18px; }
.modal-body h3 { margin:2px 0 10px; font-size:18px; font-weight:700; }
.modal-body .grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 14px; row-gap: 12px; }
@media (max-width: 720px) { .modal-body .grid { grid-template-columns: 1fr; } }
.modal-body label { display:flex; flex-direction:column; gap:6px; }
.modal-body input[type="text"], .modal-body input[type="number"], .modal-body textarea, .modal-body select {
  height:38px !important; padding:7px 10px !important; border:1px solid var(--mspk-border) !important; border-radius:10px !important; background:#fff !important; box-shadow:none !important;
}
.modal-body textarea { min-height:96px !important; height:auto !important; }
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { border-color:#ff9447 !important; box-shadow:0 0 0 3px var(--mspk-ring) !important; }
.modal-body .actions { margin-top:8px; display:flex; gap:8px; }

/* Export */
.exp-filter { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.exp-filter input[type=text] { min-width:240px; }
.table-export .thead, .table-export .row { display:grid; grid-template-columns: 44px 1fr 200px 200px; gap:10px; align-items:center; padding:8px 6px; border-bottom:1px solid #f0f2f5; }
.table-export .thead { font-weight:700; background:#fafafa; border-radius:10px 10px 0 0; }
.table-export .cell.chk { text-align:center; } .table-export .cell.title { font-weight:600; }
.table-export .cell.act .btn { margin-right:6px; }
.exp-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.pager { display:flex; gap:6px; align-items:center; }
.pager #exp-page { background:#0d6efd; color:#fff; padding:5px 9px; border-radius:8px; font-weight:700; font-size:13px; }

/* Misc */
.mspk-guard { background:#fff; border:1px solid var(--mspk-border); border-radius:10px; padding:14px; color:#111827; }

@media (max-width: 980px) {
  .table .row { grid-template-columns: 1fr 160px 160px 170px; }
  .table-export .thead,.table-export .row { grid-template-columns: 40px 1fr 160px 160px; }
}