/* The site's design tokens. Every page links this file; shared
   typography, colour and spacing live HERE as custom properties, and
   shared component styling as classes below. When building from an
   approved design, put its palette, type scale and spacing into these
   tokens — do not copy the design's <style> block into pages. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --font-display: 'Fredoka', 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
  --font-body: 'Inter', 'Trebuchet MS', Arial, sans-serif;
  --font-size: 16px;
  --line-height: 1.45;

  --snow: #FAF7F2;
  --paper: #FFFDF9;
  --plum: #4B2E57;
  --plum-2: #35203f;
  --lilac: #8B6CFF;
  --lavender: #CDB6FF;
  --sand: #F2D8B8;
  --berry: #FF5A63;
  --green: #21B553;
  --ink: #322340;
  --muted: #7B6C82;
  --border: #E7D0EB;

  --color-bg: var(--snow);
  --color-text: var(--ink);
  --color-muted-text: var(--muted);
  --color-accent: var(--lilac);
  --color-accent-strong: #6f43ff;
  --color-surface: var(--paper);
  --color-error: var(--berry);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --gap-sm: var(--space-2);
  --gap: var(--space-4);
  --container-max: 480px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow: 0 6px 16px rgba(75, 46, 87, 0.10);
  --shadow-lg: 0 18px 40px rgba(75, 46, 87, 0.16);
  --max-width: 1480px;
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html {
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color-text);
  background:
    radial-gradient(circle at 13% 5%, rgba(205, 182, 255, 0.16), transparent 18%),
    radial-gradient(circle at 89% 12%, rgba(242, 216, 184, 0.25), transparent 20%),
    var(--color-bg);
  min-height: 100vh;
}

body { margin: 0; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

button, input { font: inherit; }

/* Login page layout */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.login-card {
  width: min(420px, 100%);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.login-logo {
  width: 48px;
  height: 48px;
  position: relative;
  flex: 0 0 auto;
}

.login-logo i {
  position: absolute;
  left: 21px;
  top: 3px;
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lavender), var(--lilac));
  transform-origin: 3px 21px;
}

.login-logo i:nth-child(2) { transform: rotate(45deg); }
.login-logo i:nth-child(3) { transform: rotate(90deg); }
.login-logo i:nth-child(4) { transform: rotate(135deg); }
.login-logo i:nth-child(5) { transform: rotate(180deg); }
.login-logo i:nth-child(6) { transform: rotate(225deg); }
.login-logo i:nth-child(7) { transform: rotate(270deg); }
.login-logo i:nth-child(8) { transform: rotate(315deg); }

.login-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 0.95;
  color: var(--plum);
  margin: 0;
}

.login-subtitle {
  font-size: 18px;
  color: var(--color-muted-text);
  margin: 0 0 var(--space-6);
}

.login-form {
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

.login-field {
  display: grid;
  gap: var(--space-2);
}

.login-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
}

.login-field input {
  height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--color-surface);
  padding: 0 var(--space-4);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 3px 9px rgba(56, 38, 77, 0.03);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.login-field input:focus {
  outline: none;
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.login-error {
  color: var(--color-error);
  font-size: 14px;
  font-weight: 500;
  min-height: 20px;
  margin: calc(-1 * var(--space-2)) 0 0;
}

.login-button {
  height: 48px;
  border-radius: var(--radius);
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
  box-shadow: 0 5px 12px rgba(109, 66, 255, 0.25);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(109, 66, 255, 0.30);
}

.login-button:active {
  transform: translateY(0);
}

.login-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.25), 0 5px 12px rgba(109, 66, 255, 0.25);
}

@media (max-width: 480px) {
  .login-page { padding: var(--space-4); }
  .login-card { padding: var(--space-5) var(--space-4); }
  .login-title { font-size: 36px; }
}

/* App shell: navigation + main content for authenticated pages */
.app-page {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  padding: var(--space-3);
  overflow-x: hidden;
}

.app-nav {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow-wrap: break-word;
  flex-wrap: wrap;
}

.app-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
}

.app-nav-logo {
  width: 32px;
  height: 32px;
  position: relative;
  flex: 0 0 auto;
}

.app-nav-logo i {
  position: absolute;
  left: 13px;
  top: 2px;
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lavender), var(--lilac));
  transform-origin: 2px 14px;
}

.app-nav-logo i:nth-child(2) { transform: rotate(45deg); }
.app-nav-logo i:nth-child(3) { transform: rotate(90deg); }
.app-nav-logo i:nth-child(4) { transform: rotate(135deg); }
.app-nav-logo i:nth-child(5) { transform: rotate(180deg); }
.app-nav-logo i:nth-child(6) { transform: rotate(225deg); }
.app-nav-logo i:nth-child(7) { transform: rotate(270deg); }
.app-nav-logo i:nth-child(8) { transform: rotate(315deg); }

.app-nav-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--plum);
  margin: 0;
}

.app-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  flex-wrap: wrap;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease-out, background 150ms ease-out;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
  color: var(--plum);
  background: rgba(139, 108, 255, 0.08);
  outline: none;
}

.app-nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
}

.app-main {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow-wrap: break-word;
}

.app-card {
  width: 100%;
  max-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-3);
  box-shadow: var(--shadow);
  overflow-wrap: break-word;
}

.app-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: var(--plum);
  margin: 0 0 var(--space-2);
}

.app-subtitle {
  font-size: 16px;
  color: var(--color-muted-text);
  margin: 0 0 var(--space-5);
}

.app-form {
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

.app-field {
  display: grid;
  gap: var(--space-2);
}

.app-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
}

.app-field input,
.app-field select {
  height: 48px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--color-surface);
  padding: 0 var(--space-4);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 3px 9px rgba(56, 38, 77, 0.03);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.app-field input[type="color"] {
  padding: 4px;
  cursor: pointer;
}

.app-field input:focus,
.app-field select:focus {
  outline: none;
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.app-field input::placeholder {
  color: #a69ba9;
}

.app-field-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.app-button {
  height: 48px;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
  box-shadow: 0 5px 12px rgba(109, 66, 255, 0.25);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.app-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(109, 66, 255, 0.30);
}

.app-button:active {
  transform: translateY(0);
}

.app-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.25), 0 5px 12px rgba(109, 66, 255, 0.25);
}

.app-button-secondary {
  height: 40px;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid #ae88ff;
  color: #8658f2;
  background: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.app-button-secondary:hover,
.app-button-secondary:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  outline: none;
}

.app-button-danger {
  height: 40px;
  max-width: 100%;
  border-radius: var(--radius);
  border: 0;
  color: #fff;
  background: var(--berry);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.app-button-danger:hover,
.app-button-danger:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(255, 90, 99, 0.25);
  outline: none;
}

.app-button-small {
  height: 34px;
  padding: 0 var(--space-3);
  font-size: 14px;
  flex: 0 0 auto;
}

.app-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.app-list-empty {
  color: var(--muted);
  font-size: 14px;
  padding: var(--space-3) 0;
}

.app-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(56, 38, 77, 0.03);
}

.app-list-item-text {
  font-size: 15px;
  color: var(--ink);
  word-break: break-word;
}

.app-error {
  color: var(--color-error);
  font-size: 14px;
  font-weight: 500;
  min-height: 20px;
}

.app-success {
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
  min-height: 20px;
}

/* User table and avatars */
.user-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.user-table th,
.user-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.user-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--plum);
  background: rgba(139, 108, 255, 0.06);
}

.user-table tr:last-child td {
  border-bottom: 0;
}

.user-table td {
  color: var(--ink);
  vertical-align: middle;
}

.user-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.recipe-url-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-3);
}

.recipe-url-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.recipe-url-item a {
  color: var(--lilac);
  text-decoration: none;
  font-weight: 500;
  word-break: break-all;
}

.recipe-url-item a:hover {
  text-decoration: underline;
}

.recipe-url-empty {
  color: var(--muted);
  font-size: 14px;
  padding: var(--space-3) 0;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-block;
}

.avatar-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  background: var(--snow);
  display: inline-block;
}

.avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--lavender), var(--lilac));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
}

/* Profile picture upload preview */
.profile-pic-upload {
  display: grid;
  gap: var(--space-3);
}

.profile-pic-upload label {
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
}

.profile-pic-upload input[type="file"] {
  width: 100%;
  font-size: 14px;
  color: var(--ink);
  padding: var(--space-2) 0;
}

.profile-pic-upload input[type="file"]::file-selector-button {
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid #ae88ff;
  color: #8658f2;
  background: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: var(--space-3);
  padding: 0 var(--space-4);
  transition: background 150ms ease-out;
}

.profile-pic-upload input[type="file"]::file-selector-button:hover {
  background: rgba(139, 108, 255, 0.08);
}

.profile-pic-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  background: var(--snow);
  display: none;
}

.profile-pic-preview.visible {
  display: block;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--plum);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  animation: toast-in 200ms ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Loading indicator */
.loading-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--lilac);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Editable list (meal planner food items) */
.editable-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.editable-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  box-shadow: 0 2px 6px rgba(56, 38, 77, 0.03);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.editable-list-item:focus-within {
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.editable-list-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
  padding: var(--space-1) 0;
  outline: none;
  font-family: var(--font-body);
}

.editable-list-input::placeholder {
  color: var(--muted);
}

.editable-list-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.editable-list-remove:hover,
.editable-list-remove:focus-visible {
  background: rgba(255, 90, 99, 0.1);
  color: var(--berry);
  outline: none;
}

/* Fridge image preview */
.fridge-preview-wrap {
  margin: var(--space-2) 0;
}

.fridge-preview {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  object-fit: contain;
  box-shadow: var(--shadow);
}

.fridge-list-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--plum);
  margin: var(--space-5) 0 var(--space-3);
  letter-spacing: -0.5px;
}

/* Fridge items list */
.fridge-empty {
  text-align: center;
  padding: var(--space-6) 0;
}

.fridge-empty-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 var(--space-5);
}

.fridge-upload-btn {
  cursor: pointer;
  display: inline-flex !important;
  width: auto !important;
}

.fridge-photo-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.fridge-add-form {
  margin-bottom: var(--space-4);
}

.fridge-photo-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.fridge-photo-label {
  font-size: 14px;
  color: var(--muted);
}

.fridge-upload-inline {
  cursor: pointer;
}

.fridge-list {
  display: grid;
  gap: var(--space-3);
}

.fridge-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.fridge-item:focus-within {
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.fridge-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.fridge-item-name {
  font-weight: 600;
  color: var(--ink);
}

.fridge-item-qty {
  font-size: 13px;
  color: var(--muted);
}

.fridge-item-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.fridge-edit-btn,
.fridge-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--plum);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out, border-color 150ms ease-out;
  line-height: 1;
  padding: 0;
}

.fridge-edit-btn:hover,
.fridge-edit-btn:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  border-color: var(--lilac);
  outline: none;
}

.fridge-delete-btn {
  border: 0;
  background: none;
  color: var(--berry);
  font-size: 18px;
}

.fridge-delete-btn:hover,
.fridge-delete-btn:focus-visible {
  background: rgba(255, 90, 99, 0.12);
  outline: none;
}

.fridge-item--editing {
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.fridge-edit-name,
.fridge-edit-qty {
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
  padding: var(--space-1) 0;
  outline: none;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--border);
  transition: border-color 150ms ease-out;
}

.fridge-edit-name {
  flex: 1;
  min-width: 80px;
  font-weight: 600;
}

.fridge-edit-qty {
  width: 80px;
  font-size: 13px;
  color: var(--muted);
}

.fridge-edit-unit {
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--muted);
  padding: var(--space-1) 0;
  outline: none;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--border);
  transition: border-color 150ms ease-out;
  width: auto;
  min-width: 60px;
  cursor: pointer;
}

.fridge-edit-unit:focus {
  border-bottom-color: var(--lilac);
}

.fridge-edit-name:focus,
.fridge-edit-qty:focus {
  border-bottom-color: var(--lilac);
}

.fridge-save-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease-out;
  line-height: 1;
  padding: 0;
}

.fridge-save-btn:hover,
.fridge-save-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.fridge-cancel-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out;
  line-height: 1;
  padding: 0;
}

.fridge-cancel-btn:hover,
.fridge-cancel-btn:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  outline: none;
}

@media (max-width: 480px) {
  .fridge-photo-row { flex-direction: column; align-items: flex-start; }
  .fridge-item { flex-wrap: wrap; }
  .fridge-item-controls { width: 100%; justify-content: flex-end; }
}

/* Layout helpers */
.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 480px) {
  .app-title { font-size: 30px; }
  .app-nav-title { font-size: 20px; }
  .user-table th,
  .user-table td { padding: var(--space-2) var(--space-3); font-size: 14px; }
}

/* Calendar page */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.cal-nav-btn {
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--plum);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 2px 6px rgba(75, 46, 87, 0.04);
  transition: background 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 150ms ease-out;
}

.cal-nav-btn:hover,
.cal-nav-btn:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  border-color: var(--lilac);
  box-shadow: 0 4px 12px rgba(75, 46, 87, 0.08);
  outline: none;
}

.cal-nav-btn:active {
  transform: scale(0.97);
}

.cal-month-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--plum);
  letter-spacing: -0.5px;
  min-width: 120px;
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cal-day-header {
  background: rgba(139, 108, 255, 0.06);
  padding: var(--space-2) var(--space-1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--plum);
  text-align: center;
}

.cal-day {
  background: var(--color-surface);
  min-height: 100px;
  padding: var(--space-2);
  cursor: pointer;
  transition: background 150ms ease-out;
  position: relative;
}

.cal-day:hover {
  background: rgba(139, 108, 255, 0.04);
}

.cal-day.other-month {
  background: var(--snow);
  color: var(--muted);
}

.cal-day-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.cal-day.other-month .cal-day-number {
  color: var(--muted);
}

.cal-day.today .cal-day-number {
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-event {
  font-size: 11px;
  line-height: 1.3;
  padding: 2px var(--space-2);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  background: rgba(139, 108, 255, 0.12);
  color: var(--plum);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.cal-event:hover {
  background: rgba(139, 108, 255, 0.22);
}

.cal-event-delete {
  background: none;
  border: none;
  color: var(--berry);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.cal-event:hover .cal-event-delete {
  opacity: 1;
}

.cal-event-delete:focus-visible {
  opacity: 1;
  outline: none;
}

.event-delete-btn,
.event-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.event-delete-btn {
  color: var(--berry);
}

.event-edit-btn {
  color: var(--lilac);
}

.cal-event:hover .event-delete-btn,
.cal-event:hover .event-edit-btn {
  opacity: 1;
}

.event-delete-btn:focus-visible,
.event-edit-btn:focus-visible {
  opacity: 1;
  outline: none;
}

.event-delete-notice {
  font-size: 11px;
  line-height: 1.3;
  padding: 2px var(--space-2);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  background: rgba(33, 181, 83, 0.12);
  color: var(--green);
  font-weight: 600;
}

/* Event tile — calendar event entry with per-tile color via --event-color */
.event-tile {
  --event-color: var(--lilac);
  font-size: 11px;
  line-height: 1.3;
  padding: 2px var(--space-2);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--event-color) 12%, transparent);
  color: var(--event-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.event-tile:hover {
  background: color-mix(in srgb, var(--event-color) 22%, transparent);
}

.event-tile .cal-event-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.event-tile .cal-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tile .cal-event-detail {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tile .cal-event-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--event-color) 18%, transparent);
  color: var(--event-color);
  white-space: nowrap;
  margin-top: 1px;
}

.event-tile .event-delete-btn,
.event-tile .event-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.event-tile .event-delete-btn {
  color: var(--berry);
}

.event-tile .event-edit-btn {
  color: var(--lilac);
}

.event-tile:hover .event-delete-btn,
.event-tile:hover .event-edit-btn {
  opacity: 1;
}

.event-tile .event-delete-btn:focus-visible,
.event-tile .event-edit-btn:focus-visible {
  opacity: 1;
  outline: none;
}

/* Calendar modal for adding events */
.cal-modal-overlay,
.add-event-dialog {
  position: fixed;
  inset: 0;
  background: rgba(50, 34, 64, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cal-modal,
.add-event-dialog .cal-modal {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  width: min(520px, 100%);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.cal-modal-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--plum);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.5px;
}

/* Grouped sections inside the modal */
.cal-modal-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--snow);
}

.cal-modal-section:last-of-type {
  margin-bottom: 0;
}

.cal-modal-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

/* Actions row at bottom of modal */
.cal-modal-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* Event detail overlay — read-only view with edit/delete actions */
.event-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(50, 34, 64, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  padding: var(--space-4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.event-detail-card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  width: min(480px, 100%);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.event-detail-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--muted);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out, color 150ms ease-out;
  line-height: 1;
  padding: 0;
}

.event-detail-close:hover,
.event-detail-close:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  color: var(--plum);
  outline: none;
}

.event-detail-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--plum);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.5px;
  padding-right: var(--space-7);
}

.event-detail-body {
  display: grid;
  gap: var(--space-4);
}

.event-detail-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--snow);
}

.event-detail-section:last-of-type {
  margin-bottom: 0;
}

.event-detail-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.event-detail-row {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.event-detail-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* Modal form — styles for the form inside the calendar dialog */
.modal-form {
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

/* Form control — base input/select/textarea styling for modal fields */
.form-control,
select.form-control {
  min-height: 48px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  box-shadow: 0 3px 9px rgba(56, 38, 77, 0.03);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B2E57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

textarea.form-control {
  height: auto;
  resize: vertical;
}

.form-control:focus,
select.form-control:focus {
  outline: none;
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.form-control::placeholder {
  color: var(--muted);
}

/* Date input variant — ensures date pickers are styled consistently */
.form-control--date {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* Time input variant — ensures time pickers are styled consistently */
.form-control--time {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* Form row for side-by-side fields */
.app-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Fieldset for checkbox groups */
.app-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}

.app-fieldset-legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
  padding: 0 var(--space-2);
}

.app-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.app-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.app-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--lilac);
  cursor: pointer;
}

/* Event detail display */
.cal-event-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cal-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event-detail {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(139, 108, 255, 0.18);
  color: var(--lilac);
  white-space: nowrap;
  margin-top: 1px;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--plum);
  color: var(--snow);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
}

.toast--success {
  background: var(--green);
  color: #fff;
}

.toast--error {
  background: var(--berry);
  color: #fff;
}

/* Notification toast — slides in from top for new messages */
.notification-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform 250ms ease-out;
  pointer-events: none;
}

.notification-toast--visible {
  transform: translateY(0);
  pointer-events: auto;
}

.notification-toast-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  padding-right: var(--space-7);
  background: var(--plum);
  color: var(--snow);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  max-width: 600px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: background 150ms ease-out;
}

.notification-toast-body:hover {
  background: var(--plum-2);
}

.notification-toast-body:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(139, 108, 255, 0.4);
}

.notification-toast-sender {
  font-weight: 700;
  color: var(--lavender);
  white-space: nowrap;
}

.notification-toast-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-toast-close {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--lavender);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color 150ms ease-out, background 150ms ease-out;
}

.notification-toast-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.notification-toast-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lilac);
}

@media (max-width: 600px) {
  .notification-toast-body {
    max-width: 100%;
    border-radius: 0;
    padding-right: var(--space-7);
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .cal-day { min-height: 80px; }
  .k2-week-day { min-height: 220px; }
}

/* Kalendar2 page — month and week views */
.k2-header,
.calendar-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.k2-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.k2-tabs,
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 3px;
  box-shadow: 0 2px 8px rgba(75, 46, 87, 0.05);
}

.k2-tab,
.view-toggle button {
  padding: 8px 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms ease-out, background 200ms ease-out, box-shadow 200ms ease-out;
}

.k2-tab:hover,
.k2-tab:focus-visible,
.view-toggle button:hover,
.view-toggle button:focus-visible {
  color: var(--plum);
  outline: none;
}

.k2-tab.active,
.view-toggle button.active {
  color: #fff;
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
  box-shadow: 0 4px 12px rgba(109, 66, 255, 0.25);
}

.k2-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.k2-view {
  animation: k2-fade-in 220ms ease-out;
}

@keyframes k2-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.k2-month-grid,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.k2-day-header {
  background: linear-gradient(180deg, rgba(139, 108, 255, 0.08), rgba(139, 108, 255, 0.04));
  padding: var(--space-3) var(--space-1);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--plum);
  text-align: center;
}

.k2-day,
.calendar-cell {
  background: var(--color-surface);
  min-height: 110px;
  padding: var(--space-2);
  cursor: default;
  transition: background 200ms ease-out;
  position: relative;
}

.k2-day:hover,
.calendar-cell:hover {
  background: rgba(139, 108, 255, 0.04);
}

.k2-day.other-month,
.calendar-cell.other-month {
  background: var(--snow);
  color: var(--muted);
}

.k2-day.today,
.calendar-cell.today {
  background: rgba(139, 108, 255, 0.06);
}

.k2-day-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 200ms ease-out;
}

.k2-day.today .k2-day-number,
.calendar-cell.today .k2-day-number {
  background: linear-gradient(135deg, #9a6cff, #6f43ff);
  color: #fff;
  box-shadow: 0 2px 6px rgba(109, 66, 255, 0.3);
}

.k2-day.other-month .k2-day-number,
.calendar-cell.other-month .k2-day-number {
  color: var(--muted);
}

.k2-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k2-month-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.3;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--lav-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms ease-out;
  overflow: hidden;
}

.k2-month-chip:hover {
  background: var(--lav);
}

.k2-month-chip-dots {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.k2-month-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lilac);
  flex-shrink: 0;
}

.k2-month-chip-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k2-month-chip-time {
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10px;
}

.k2-event {
  --event-color: var(--lilac);
  font-size: 11px;
  line-height: 1.35;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--event-color) 14%, transparent);
  color: var(--event-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 3px solid var(--event-color);
  box-shadow: 0 1px 3px rgba(75, 46, 87, 0.04);
  transition: transform 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
}

.k2-event:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--event-color) 24%, transparent);
  box-shadow: 0 3px 8px rgba(75, 46, 87, 0.08);
}

.k2-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k2-event-detail {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k2-event-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: 2px;
}

.k2-event .event-delete-btn,
.k2-event .event-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 150ms ease-out, background 150ms ease-out;
}

.k2-event .event-delete-btn {
  color: var(--berry);
}

.k2-event .event-edit-btn {
  color: var(--lilac);
}

.k2-event:hover .event-delete-btn,
.k2-event:hover .event-edit-btn {
  opacity: 1;
}

.k2-event .event-delete-btn:hover,
.k2-event .event-edit-btn:hover {
  background: rgba(75, 46, 87, 0.08);
}

.k2-event .event-delete-btn:focus-visible,
.k2-event .event-edit-btn:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(75, 46, 87, 0.08);
}

.k2-week-grid,
.week-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

.k2-week-day {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.k2-week-day:hover {
  border-color: color-mix(in srgb, var(--lilac) 40%, var(--border));
  box-shadow: 0 4px 12px rgba(75, 46, 87, 0.06);
}

.k2-week-day.today {
  border-color: var(--lilac);
  background: rgba(139, 108, 255, 0.04);
  box-shadow: 0 4px 16px rgba(139, 108, 255, 0.12);
}

.k2-week-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(139, 108, 255, 0.06), rgba(139, 108, 255, 0.02));
}

.k2-week-day-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--plum);
}

.k2-week-day-number {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--plum);
}

.k2-week-day.today .k2-week-day-number {
  background: linear-gradient(135deg, #9a6cff, #6f43ff);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(109, 66, 255, 0.3);
}

.k2-week-events {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.k2-empty {
  font-size: 12px;
  color: var(--muted);
  padding: var(--space-3) 0;
  text-align: center;
  font-style: italic;
}

/* Shopping list page */
.shop-add-form {
  margin-bottom: var(--space-5);
}

.shop-add-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.shop-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.shop-list {
  display: grid;
  gap: var(--space-3);
}

.shop-empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: var(--space-5) 0;
  margin: 0;
}

.shop-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 150ms ease-out, opacity 150ms ease-out;
}

.shop-row--kopt {
  background: rgba(33, 181, 83, 0.08);
  border-color: var(--green);
}

.shop-row--kopt .shop-row-name {
  text-decoration: line-through;
  color: var(--muted);
}

.shop-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.shop-row-name {
  font-weight: 600;
  color: var(--ink);
}

.shop-row-qty {
  font-size: 13px;
  color: var(--muted);
}

.shop-row-adder {
  font-size: 12px;
  font-weight: 600;
  color: var(--adder-color, var(--lilac));
  background: color-mix(in srgb, var(--adder-color, var(--lilac)) 15%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
  line-height: 1.5;
}

.shop-row-time {
  font-size: 12px;
  color: var(--muted);
}

.shop-row-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.shop-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--plum);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out, border-color 150ms ease-out;
  line-height: 1;
  padding: 0;
}

.shop-qty-btn:hover,
.shop-qty-btn:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  border-color: var(--lilac);
  outline: none;
}

.shop-qty-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-width: 20px;
  text-align: center;
}

.shop-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 0;
  background: none;
  color: var(--berry);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out;
  line-height: 1;
  padding: 0;
}

.shop-delete-btn:hover,
.shop-delete-btn:focus-visible {
  background: rgba(255, 90, 99, 0.12);
  outline: none;
}

.shop-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.shop-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  cursor: pointer;
}

.shop-history-section {
  margin-top: var(--space-5);
}

.shop-history-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 150ms ease-out;
}

.shop-history-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.shop-history-name {
  font-weight: 600;
  color: var(--ink);
}

.shop-history-qty {
  font-size: 13px;
  color: var(--muted);
}

.shop-history-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.shop-history-adder,
.shop-history-buyer {
  font-size: 12px;
  font-weight: 600;
  color: var(--adder-color, var(--lilac));
  background: color-mix(in srgb, var(--adder-color, var(--lilac)) 15%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
  line-height: 1.5;
}

.shop-history-arrow {
  color: var(--muted);
  font-size: 13px;
}

.shop-history-time {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 480px) {
  .shop-actions { flex-wrap: wrap; }
  .shop-actions .app-button-secondary,
  .shop-actions .app-button-danger { width: 100%; }
  .shop-row { flex-wrap: wrap; }
  .shop-row-controls { width: 100%; justify-content: flex-end; }
  .shop-history-row { flex-wrap: wrap; }
  .shop-history-meta { width: 100%; justify-content: flex-start; }
}

/* DateTimePicker component — compact inline layout */
.datetime-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

/* Compact row: date trigger + time selects */
.datetime-picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

/* Trigger button — shows selected date */
.datetime-picker__trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
  border-radius: var(--radius-sm);
}

.datetime-picker__trigger:hover,
.datetime-picker__trigger:focus-visible {
  background: rgba(139, 108, 255, 0.06);
  border-color: var(--lilac);
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.12);
}

.datetime-picker__trigger[aria-expanded="true"] {
  background: rgba(139, 108, 255, 0.08);
  border-color: var(--lilac);
}

.datetime-picker__trigger-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datetime-picker__trigger-icon {
  font-size: 12px;
  color: var(--muted);
  transition: transform 150ms ease-out;
  flex: 0 0 auto;
}

.datetime-picker__trigger[aria-expanded="true"] .datetime-picker__trigger-icon {
  transform: rotate(180deg);
}

/* Time selects wrapper */
.datetime-picker__time {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

/* Collapsible sections */
.datetime-picker__section--collapsed {
  display: none;
}

.datetime-picker__calendar {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--snow);
}

.datetime-picker__cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.datetime-picker__cal-nav {
  height: 32px;
  width: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--plum);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.datetime-picker__cal-nav:hover,
.datetime-picker__cal-nav:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  border-color: var(--lilac);
  outline: none;
}

.datetime-picker__cal-month {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--plum);
}

.datetime-picker__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datetime-picker__day-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
  text-align: center;
  padding: var(--space-1) 0;
}

.datetime-picker__day {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.datetime-picker__day:hover {
  background: rgba(139, 108, 255, 0.08);
}

.datetime-picker__day--other {
  color: var(--muted);
  opacity: 0.5;
}

.datetime-picker__day--selected {
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
  color: #fff;
  font-weight: 700;
}

.datetime-picker__day--selected:hover {
  background: linear-gradient(90deg, #9a6cff, #6f43ff);
  color: #fff;
}

.datetime-picker__time-select {
  height: 36px;
  width: 60px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 0 var(--space-1);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 2px 6px rgba(56, 38, 77, 0.03);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237B6C82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 20px;
}

.datetime-picker__time-select:focus {
  outline: none;
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.datetime-picker__time-sep {
  font-size: 16px;
  font-weight: 700;
  color: var(--plum);
}

/* Meal planner page */
.meal-hero {
  display: grid;
  gap: var(--space-5);
}

.meal-fridge-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--snow);
}

.meal-fridge-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--plum);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.5px;
}

.meal-fridge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.meal-fridge-empty {
  width: 100%;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.meal-fridge-empty a {
  color: var(--lilac);
  font-weight: 600;
  text-decoration: none;
}

.meal-fridge-empty a:hover,
.meal-fridge-empty a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.meal-fridge-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(56, 38, 77, 0.03);
}

.meal-fridge-name {
  font-weight: 600;
}

.meal-fridge-qty {
  color: var(--muted);
  font-size: 13px;
}

.meal-suggest-btn {
  max-width: 320px;
}

.meal-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.meal-btn-loading .loading-spinner {
  width: 18px;
  height: 18px;
}

/* Meal suggestion modal */
.meal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(50, 34, 64, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.meal-modal {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  width: min(560px, 100%);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.meal-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--muted);
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.meal-modal-close:hover,
.meal-modal-close:focus-visible {
  background: rgba(139, 108, 255, 0.08);
  color: var(--plum);
  outline: none;
}

.meal-modal-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--plum);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.5px;
  padding-right: var(--space-7);
}

.meal-modal-description {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}

.meal-modal-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--snow);
}

.meal-modal-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.meal-ingredient-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.meal-ingredient-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 15px;
  color: var(--ink);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.meal-ingredient-list li:last-child {
  border-bottom: 0;
}

.meal-ingredient-name {
  font-weight: 600;
}

.meal-ingredient-qty {
  color: var(--muted);
}

.meal-modal-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.meal-modal-actions .app-button,
.meal-modal-actions .app-button-secondary {
  flex: 1 1 140px;
}

/* Meal planner page (maltidsplanering.html) */
.meal-planner-card {
  max-width: 720px;
}

.meal-servings-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.meal-servings-field {
  flex: 0 0 auto;
  width: min(160px, 100%);
}

.meal-servings-field input {
  text-align: center;
}

.meal-suggest-btn {
  flex: 1 1 auto;
  max-width: 280px;
}

.meal-recipe {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.meal-recipe-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--plum);
  margin: 0;
  letter-spacing: -0.5px;
}

.meal-ingredients {
  background: var(--snow);
}

.meal-ingredient-list {
  display: grid;
  gap: var(--space-2);
}

.meal-ingredient-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.meal-ingredient-check {
  width: 20px;
  height: 20px;
  accent-color: var(--lilac);
  flex: 0 0 auto;
  cursor: pointer;
}

.meal-ingredient-name {
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
}

.meal-ingredient-amount {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.meal-ingredient-empty {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.meal-instructions {
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.meal-instructions-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.meal-instructions p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-line;
}

.meal-recipe-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.meal-recipe-actions .app-button {
  flex: 1 1 220px;
  max-width: 320px;
}

@media (max-width: 900px) {
  .k2-week-day { min-height: 220px; }
}

@media (max-width: 760px) {
  .k2-week-day { min-height: 180px; }
  .k2-header,
  .calendar-header { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .k2-header-left { width: 100%; }
  .k2-tabs,
  .view-toggle { width: 100%; justify-content: center; }
  .cal-month-label { min-width: 160px; font-size: 18px; }
}

@media (max-width: 480px) {
  .cal-day { min-height: 60px; padding: var(--space-1); }
  .cal-day-number { font-size: 12px; }
  .cal-event { font-size: 10px; }
  .event-tile { font-size: 10px; }
  .cal-month-label { font-size: 16px; min-width: 120px; }
  .datetime-picker__day { height: 28px; font-size: 12px; }
  .datetime-picker__row { flex-wrap: wrap; }
  .datetime-picker__trigger { min-width: 100%; }
  .datetime-picker__time { width: 100%; justify-content: center; padding-top: var(--space-2); }
  .datetime-picker__time-select { width: 64px; }
  .cal-modal,
  .add-event-dialog .cal-modal { padding: var(--space-5) var(--space-4); }
  .cal-modal-section { padding: var(--space-3); }
  .modal-form { gap: var(--space-3); }
  .form-control { height: 44px; font-size: 15px; }
  .k2-month-grid,
  .calendar-grid { gap: 1px; }
  .k2-day,
  .calendar-cell { min-height: 70px; padding: var(--space-1); }
  .k2-day-number { width: 22px; height: 22px; font-size: 11px; }
  .k2-event { font-size: 9px; padding: 2px 4px; }
  .k2-event-detail { display: none; }
  .k2-month-chip { font-size: 9px; padding: 1px 3px; gap: 2px; }
  .k2-month-chip-dots { gap: 1px; }
  .k2-month-chip-dot { width: 5px; height: 5px; }
  .k2-month-chip-time { font-size: 9px; }
  .k2-week-day { min-height: 120px; }
  .k2-week-day-name { font-size: 11px; }
  .k2-week-day-number { font-size: 16px; }
  .k2-tab,
  .view-toggle button { padding: 7px 14px; font-size: 13px; }
  .k2-toolbar { gap: var(--space-2); }
  .cal-nav-btn { padding: 0 var(--space-3); font-size: 13px; }
  .event-detail-card { padding: var(--space-5) var(--space-4); }
  .event-detail-title { font-size: 20px; }
  .event-detail-section { padding: var(--space-3); }
  .meal-modal { padding: var(--space-6) var(--space-4); }
  .meal-modal-title { font-size: 22px; }
  .meal-suggest-btn { max-width: 100%; }
  .meal-modal-actions .app-button,
  .meal-modal-actions .app-button-secondary { flex: 1 1 100%; }
}

/* Messages / Beskeder page */
.message-compose {
  display: grid;
  gap: var(--space-4);
  text-align: left;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.message-compose textarea {
  width: 100%;
  min-height: 80px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  resize: vertical;
  box-shadow: 0 3px 9px rgba(56, 38, 77, 0.03);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.message-compose textarea:focus {
  outline: none;
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.message-compose textarea::placeholder {
  color: #a69ba9;
}

.message-list {
  display: grid;
  gap: var(--space-4);
}

.message-card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 2px 6px rgba(56, 38, 77, 0.03);
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.message-sender {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--plum);
}

.message-time {
  font-size: 13px;
  color: var(--muted);
}

.message-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}

.message-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius);
  margin-top: var(--space-3);
  object-fit: cover;
}

.message-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.message-edit-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.message-edit-form textarea {
  width: 100%;
  min-height: 80px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  resize: vertical;
  box-shadow: 0 3px 9px rgba(56, 38, 77, 0.03);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.message-edit-form textarea:focus {
  outline: none;
  border-color: var(--lilac);
  box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.message-edit-form textarea::placeholder {
  color: #a69ba9;
}

.message-edit-actions {
  display: flex;
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .message-compose textarea { min-height: 60px; }
  .message-card { padding: var(--space-3); }
  .message-header { flex-direction: column; gap: var(--space-1); }
}

/* ==========================================================================
   Mobile-first responsive foundation
   Base styles target small screens; min-width queries enhance for larger.
   ========================================================================== */

/* Tables: scroll horizontally only as last resort */
.user-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.user-table {
  min-width: 480px;
}

/* Ensure long words break instead of overflowing */
.app-list-item-text,
.cal-event-title,
.k2-event-title,
.shop-row-name,
.message-body,
.recipe-url-item a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Medium screens (tablets) — two-column layouts kick in */
@media (min-width: 600px) {
  :root {
    --container-max: 600px;
  }

  .app-page {
    padding: var(--space-5) var(--space-5) var(--space-7);
  }

  .app-card {
    padding: var(--space-7) var(--space-6);
  }

  .app-nav-link {
    font-size: 14px;
    padding: var(--space-2) var(--space-3);
  }

  .app-nav-links {
    gap: var(--space-2);
  }

  .two-column {
    grid-template-columns: 1fr 1fr;
  }

  .app-field-row {
    grid-template-columns: 1fr 1fr;
  }

  .shop-add-row {
    grid-template-columns: 1fr 1fr;
  }

  .k2-week-grid,
  .week-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Table: no longer needs scroll on wider screens */
  .user-table {
    min-width: 0;
  }
}

/* Large screens (desktop) */
@media (min-width: 900px) {
  :root {
    --container-max: 1480px;
  }

  .app-nav-links {
    width: auto;
  }

  .k2-week-grid,
  .week-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .k2-week-day {
    min-height: 220px;
  }
}