/* ─── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
  --primary: #1a3a5c;
  --primary-light: #2d6a9f;
  --primary-dark: #122840;
  --accent: #e8a020;
  --accent-hover: #d4911a;
  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --border: #e2e8f0;
  --border-dark: #cbd5e1;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --info: #2563eb;
  --info-bg: #dbeafe;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --nav-height: 60px;
  --sidebar-w: 264px;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Typography ─────────────────────────────────────────────────────────────── */
h1 { font-size: 1.875rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

a {
  color: var(--primary-light);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ─── Layout ─────────────────────────────────────────────────────────────────── */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  flex: 1;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--primary-dark);
}

.btn-accent {
  background-color: var(--accent);
  color: #fff;
}
.btn-accent:hover:not(:disabled) {
  background-color: var(--accent-hover);
}

.btn-secondary {
  background-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--border-dark);
}

.btn-danger {
  background-color: var(--danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.btn-success {
  background-color: var(--success);
  color: #fff;
}
.btn-success:hover:not(:disabled) {
  background-color: #15803d;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline:hover:not(:disabled) {
  background-color: var(--primary);
  color: #fff;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 1rem;
}

.btn-icon {
  padding: 6px;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.btn-icon:hover:not(:disabled) {
  background-color: var(--border);
  color: var(--text);
}

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
}

/* ─── Tables ─────────────────────────────────────────────────────────────────── */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
}

thead {
  background: var(--primary);
  color: #fff;
}

thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.1s;
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background-color: var(--bg);
}

/* admin/users: a member's skills render on a 2nd line joined to the main row. */
tbody tr.member-row { border-bottom: none; }
tbody tr.member-row > td { padding-bottom: 4px; }
tbody tr.skills-row > td { padding-top: 0; }

/* admin/vehicles: action buttons render on a 2nd line joined to the main row. */
tbody tr.vehicle-row { border-bottom: none; }
tbody tr.vehicle-row > td { padding-bottom: 4px; }
tbody tr.actions-row > td { padding-top: 0; }

td {
  padding: 12px 16px;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* ─── Forms ──────────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--card-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(45, 106, 159, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-light);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

.form-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 4px;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--info-bg);    color: var(--info);    }
.badge-muted   { background: var(--border);     color: var(--text-muted); }
.badge-primary { background: var(--primary);    color: #fff; }
.badge-accent  { background: var(--accent);     color: #fff; }

/* ─── Modals ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-in 0.2s ease;
}

.modal-lg {
  max-width: 800px;
}

@keyframes modal-in {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.modal-close:hover { color: var(--text); }

.modal-body {
  padding: 20px 24px;
}

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
}

/* ─── Stats Cards ────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  border-left: 4px solid var(--primary);
}

.stat-card.accent { border-left-color: var(--accent); }
.stat-card.success { border-left-color: var(--success); }
.stat-card.danger { border-left-color: var(--danger); }

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ─── Alerts / Messages ──────────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #fca5a5;
}

.alert-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #86efac;
}

.alert-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid #fcd34d;
}

.alert-info {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid #93c5fd;
}

/* ─── Loading Spinner ────────────────────────────────────────────────────────── */
.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  flex-direction: column;
  gap: 12px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

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

/* ─── Navbar ─────────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--primary);
  color: #fff;
  height: var(--nav-height);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}

.navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px 0 6px;
  gap: 8px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-brand-name {
  max-width: 300px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

.navbar-brand:hover { text-decoration: none; color: #fff; }

.navbar-brand-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 24px;
  flex: 1;
}

.nav-link {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.15);
}

/* Admin dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  color: rgba(255,255,255,0.8);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.open {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  overflow: visible;
  z-index: 200;
  animation: dropdown-in 0.15s ease;
}
.nav-dropdown-menu > .nav-dropdown-item:first-child,
.nav-dropdown-menu > .has-submenu:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}
.nav-dropdown-menu > .nav-dropdown-item:last-child,
.nav-dropdown-menu > .has-submenu:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

@keyframes dropdown-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.nav-dropdown-item {
  display: block;
  padding: 10px 16px;
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.1s;
}

.nav-dropdown-item:hover {
  background: var(--bg);
  text-decoration: none;
}

/* Nested submenu (Βάρδιες) */
.nav-dropdown-item.has-submenu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-dropdown-item.has-submenu::after {
  content: '›';
  margin-left: 8px;
  opacity: 0.5;
}
.nav-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 160px;
  overflow: hidden;
  z-index: 201;
}
.nav-dropdown-item.has-submenu:hover .nav-submenu,
.nav-dropdown-item.has-submenu.open .nav-submenu {
  display: block;
}

/* Mobile submenu accordion */
.mobile-nav-submenu {
  display: none;
  padding-left: 16px;
}
.mobile-nav-submenu.open {
  display: block;
}
.mobile-nav-submenu-toggle {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.mobile-nav-submenu-toggle::after {
  content: ' ▸';
  font-size: 0.75em;
}
.mobile-nav-submenu-toggle.open::after {
  content: ' ▾';
}

/* Navbar right */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.navbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  object-fit: cover;
}

.navbar-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  flex-shrink: 0;
}

.navbar-username {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.9);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-logout {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.navbar-logout:hover { background: rgba(255,255,255,0.25); }

/* Navbar team selector (SUPER_ADMIN only) */
.navbar-team-selector {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.navbar-team-select {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  max-width: 160px;
}

.navbar-team-select:hover {
  background: rgba(255,255,255,0.25);
}

.navbar-team-select option {
  background: var(--primary);
  color: #fff;
}

/* Mobile-only title bar text */
.navbar-mobile-title {
  display: none;
  align-items: center;
  flex: 1;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hamburger */
.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  margin-right: 4px;
  flex-shrink: 0;
}

.navbar-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-dark);
  z-index: 99;
  padding: 8px 0;
  padding-bottom: 24px;
  box-shadow: var(--shadow-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar-mobile-menu.open {
  display: block;
}

.mobile-nav-link {
  display: block;
  color: rgba(255,255,255,0.85);
  padding: 12px 20px;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background 0.1s;
}

.mobile-nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
}

.mobile-nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

@media (max-width: 1024px) {
  .navbar-nav { display: none; }
  .navbar-brand { display: none; }
  .navbar-right { display: none; }
  .navbar-mobile-title { display: flex; }
  .navbar-hamburger { display: flex; order: 0; }
  .navbar-mobile-title { order: 1; flex: 1; min-width: 0; }
  .navbar-team-selector { order: 2; }
}

/* ─── Sidebar navigation (left; fixed on desktop, off-canvas drawer on mobile) ─── */
.topbar {
  display: none; /* mobile only (see media query) */
  position: sticky;
  left: 0; right: 0;
  height: var(--nav-height);
  background: var(--primary);
  color: #fff;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  z-index: 120;
  box-shadow: var(--shadow-md);
}
.topbar-burger {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 4px 6px;
}
.topbar-title {
  font-weight: 600; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--primary-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  color: #fff; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.sidebar-brand:hover { color: #fff; text-decoration: none; }
.sidebar-brand-icon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.sidebar-brand-name { font-size: 0.98rem; line-height: 1.2; }

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0; transition: background 0.15s;
}
.sidebar-user:hover,
.sidebar-user.active { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.sidebar-username { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-widget { padding: 8px 12px; }
.sidebar-widget:empty { display: none; }

.sidebar-availability {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-availability-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sidebar-availability-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sidebar-availability-btn {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: 3px 10px; border-radius: var(--radius);
  background: rgba(255,255,255,0.15);
}
.sidebar-availability-btn:hover,
.sidebar-availability-btn.active { background: rgba(255,255,255,0.28); color: #fff; text-decoration: none; }

.sidebar-team { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.sidebar-team-select {
  width: 100%; background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius);
  padding: 6px 8px; font-size: 0.85rem; cursor: pointer; outline: none;
}
.sidebar-team-select option { background: var(--primary); color: #fff; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }

.sidebar-footer { flex-shrink: 0; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-logout {
  width: 100%; min-height: 44px; background: rgba(255,255,255,0.12); color: #fff; border: none;
  padding: 9px 12px; border-radius: var(--radius); font-size: 0.9rem; cursor: pointer;
  text-align: left; transition: background 0.15s;
}
.sidebar-logout:hover { background: rgba(255,255,255,0.22); }
.sidebar-help {
  display: flex; align-items: center; min-height: 44px; margin-bottom: 8px; padding: 9px 12px; border-radius: var(--radius);
  color: rgba(255,255,255,0.85); font-size: 0.9rem; text-decoration: none; transition: background 0.15s;
}
.sidebar-help:hover,
.sidebar-help.active { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }

/* Επικεφαλίδα «Διαχείριση» πριν τις ομάδες διαχείρισης (label, όχι σκέτη γραμμή) */
.sidebar-section-label {
  margin: 10px 0 2px; padding: 12px 20px 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.sidebar-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); z-index: 150;
}
.sidebar-overlay.show { display: block; }

/* Desktop: sidebar pinned, page content shifted right. */
@media (min-width: 1025px) {
  .topbar { display: none; }
  .sidebar-overlay { display: none !important; }
  body.has-sidebar main { margin-left: var(--sidebar-w); }
}

/* Mobile/tablet: off-canvas drawer toggled by the hamburger. */
@media (max-width: 1024px) {
  .topbar { display: flex; }
  .sidebar {
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .sidebar.open { transform: translateX(0); }
  body.has-sidebar main { margin-left: 0; }
}

/* ─── Καρτέλες ενότητας (partials/section-tabs.php: Αποθήκη, Ταμείο, Ομαδικές παραγγελίες κ.λπ.) ─── */
/* Οριζόντια λωρίδα χωρίς wrap: στο κινητό σκρολάρει μόνο η λωρίδα, ποτέ η σελίδα. */
.section-tabs { max-width: 1200px; margin: 0 auto; padding: 12px 16px 0; }
.section-tabs-inner {
  position: relative; /* offsetParent των καρτελών (scroll της ενεργής στο ορατό τμήμα) */
  display: flex; flex-wrap: nowrap; gap: 2px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  box-shadow: inset 0 -1px 0 var(--border);
}
.section-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 14px; white-space: nowrap;
  color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background 0.1s, color 0.1s;
}
.section-tab:hover { color: var(--primary); background: var(--border); text-decoration: none; }
.section-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.section-tab:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }
@media (max-width: 600px) {
  .section-tabs { padding: 8px 0 0; }
  .section-tabs-inner { padding: 0 8px; }
  .section-tab { padding: 8px 12px; font-size: 0.875rem; }
}
@media print {
  .section-tabs { display: none; }
}

/* ─── Calendar ───────────────────────────────────────────────────────────────── */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.calendar-month-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  min-width: 180px;
  text-align: center;
}

.calendar-grid {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--primary);
}

.calendar-header-cell {
  padding: 10px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
}

.calendar-cell {
  min-height: 100px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.calendar-cell:nth-child(7n) {
  border-right: none;
}

.calendar-cell:hover {
  background: var(--bg);
}

.calendar-cell.other-month {
  background: #f8fafc;
}

.calendar-cell.today {
  background: #eff6ff;
}

.calendar-day-number {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.calendar-cell.today .calendar-day-number {
  color: var(--primary-light);
  font-weight: 700;
}

.calendar-cell.other-month .calendar-day-number {
  color: var(--text-light);
}

.calendar-shift-pill {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 9999px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.shift-pill-DRAFT      { background: var(--border); color: var(--text-muted); }
.shift-pill-PUBLISHED  { background: var(--info-bg); color: var(--info); }
.shift-pill-CANCELLED  { background: var(--danger-bg); color: var(--danger); }
.shift-pill-COMPLETED  { background: var(--success-bg); color: var(--success); }

.calendar-availability-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .calendar-cell { min-height: 64px; padding: 4px; }
  .calendar-shift-pill { display: none; }
}

/* ─── Week Time Grid ─────────────────────────────────────────────────────────── */
.wg-wrapper {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Η κεφαλίδα δεν κάνει δικό της scroll: ακολουθεί οριζόντια το .wg-scroll (JS)· το
   scrollbar-gutter κρατά χώρο ίσο με την κάθετη μπάρα του .wg-scroll ώστε οι στήλες να ευθυγραμμίζονται. */
.wg-header {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  scrollbar-gutter: stable;
  border-bottom: 2px solid var(--border);
  background: var(--card-bg);
}

.wg-time-gutter {
  width: 52px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--border);
}

.wg-day-header {
  flex: 1;
  min-width: 90px;
  padding: 4px 6px;
  text-align: center;
  border-left: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  border-right: 2px solid var(--border); /* ξεκάθαρη κάθετη γραμμή διαχωρισμού ημερών */
  margin-right: 6px; /* κενό μετά τη γραμμή, χωρίς οριζόντιες γραμμές, ως την επόμενη ημέρα */
}

.wg-day-header:hover {
  background: var(--bg);
}

.wg-day-header.today {
  background: #eff6ff;
}

.wg-day-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.wg-day-date {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.wg-day-index {
  font-size: 0.6875rem;
  font-weight: 700;
  margin-top: 1px;
}

/* Πιθανός δείκτης (πρόβλεψη EFFIS): αχνός & πλάγιος, χωρίς χρωματισμό κεφαλίδας. */
.wg-day-index--forecast {
  font-weight: 600;
  font-style: italic;
  opacity: 0.7;
}

/* Όταν το header παίρνει το χρώμα του δείκτη κινδύνου, τα κείμενα κληρονομούν
   το χρώμα κειμένου (λευκό/σκούρο) για σωστή αντίθεση πάνω στο χρώμα. */
.wg-day-header.has-risk .wg-day-name,
.wg-day-header.has-risk .wg-day-date,
.wg-day-header.has-risk .wg-day-index {
  color: inherit;
}

.wg-avail-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 5px;
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
}

/* Περιοχή scroll του grid (κάθετο: 00:00–24:00 · οριζόντιο: στενές οθόνες). */
.wg-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* 24 ώρες σε 150% του ορατού ύψους = ίδια πυκνότητα με το παλιό grid 07–23 (16 ώρες)·
   πλάτος = όσο χρειάζονται οι στήλες (ελάχιστα πλάτη) ή όλο το διαθέσιμο. */
.wg-body {
  display: flex;
  position: relative;
  height: 150%;
  width: max-content;
  min-width: 100%;
  overflow: hidden;
}

.wg-time-label {
  position: absolute;
  right: 6px;
  margin-top: 2px; /* ακριβώς κάτω από τη γραμμή της ώρας, ίσα-ίσα να μην είναι κολλημένο */
  font-size: 0.625rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.wg-day-col {
  flex: 1;
  min-width: 90px;
  position: relative;
  border-left: 1px solid var(--border);
  border-right: 2px solid var(--border); /* ξεκάθαρη κάθετη γραμμή διαχωρισμού ημερών */
  margin-right: 6px; /* κενό μετά τη γραμμή, χωρίς οριζόντιες γραμμές, ως την επόμενη ημέρα */
}

.wg-day-col.today {
  background: #bcbcbc;
}

.wg-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

.wg-avail-strip {
  position: absolute;
  left: 0;
  width: 7px;
  min-height: 4px;
  background: rgba(22, 163, 74, 0.45);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  z-index: 1;
}

.wg-shift-block {
  position: absolute;
  border-radius: 4px;
  border-left: 3px solid;
  padding: 2px 4px;
  cursor: pointer;
  overflow: hidden;
  min-height: 18px;
  z-index: 2;
  transition: opacity 0.1s;
}

.wg-shift-block:hover {
  opacity: 0.8;
}

/* Γραμμή ώρας (+ 🔒/✓) — μονή γραμμή με ellipsis. */
.wg-shift-meta {
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Τίτλος — κάνει wrap αν δεν χωρέσει σε μία γραμμή. */
.wg-shift-title {
  font-size: 0.625rem;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  display: block;
}

/* Περιγραφή/παρατηρήσεις — κάτω από τον τίτλο, ελαφρύτερη, κάνει wrap. */
.wg-shift-desc {
  font-size: 0.5625rem;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  display: block;
  margin-top: 1px;
  opacity: 0.85;
}

/* ─── Weather column (στενή στήλη πρόγνωσης, αριστερά κάθε ημέρας) ───────────── */
.wg-weather-header {
  flex: 0 0 40px;
  min-width: 40px;
  padding: 3px 2px;
  text-align: center;
  border-left: 1px solid var(--border);
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--text-muted);
  user-select: none;
}

.wg-weather-col {
  flex: 0 0 40px;
  min-width: 40px;
  position: relative;
  border-left: 1px solid var(--border);
}

/* Στο κινητό λίγο πιο φαρδιές στήλες για ευκρίνεια (μία τιμή ανά κελί). */
.wg-weather-header.mobile,
.wg-weather-col.mobile { flex: 0 0 48px; min-width: 48px; }

.wg-weather-cell {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 1px 2px;
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Θερμοκρασία: γαλάζιο ≤0, άσπρο 1-29, κίτρινο 30-34, πορτοκαλί 35-37, κόκκινο 38+. */
.wg-weather-cell.temp-cold   { background: #07f8f8; color: #1f2937; }
.wg-weather-cell.temp-white  { background: #ffffff; color: #1f2937; }
.wg-weather-cell.temp-yellow { background: #efff00; color: #1f2937; }
.wg-weather-cell.temp-orange { background: #ff7d00; color: #1f2937; }
.wg-weather-cell.temp-red    { background: #fd1606; color: #ffffff; }

/* Άνεμος: άσπρο έως 4 Bf, κίτρινο στα 5, πορτοκαλί στα 6-7, κόκκινο στα 8+. */
.wg-weather-cell.wind             { background: #ffffff;  color: #1f2937; }
.wg-weather-cell.wind.wind-yellow { background: #efff00;  color: #1f2937; }
.wg-weather-cell.wind.wind-orange { background: #ff7d00;  color: #1f2937; }
.wg-weather-cell.wind.wind-red    { background: #fd1606;  color: #ffffff; }

/* ─── Calendar page full-height layout ──────────────────────────────────────── */
.calendar-page {
  height: calc(100dvh - var(--nav-height));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-width: 100%;
}

.calendar-page #calendar-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Inner .page-container generated by JS */
.calendar-page .page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 16px 0;
  max-width: 100%;
  margin: 0;
}

.calendar-page .page-header {
  margin-bottom: 8px;
  flex-shrink: 0;
}

.calendar-page .calendar-nav {
  margin-bottom: 8px;
  flex-shrink: 0;
}

.calendar-page .loading-container {
  flex: 1;
}

/* ─── Availability ───────────────────────────────────────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.week-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  min-width: 200px;
  text-align: center;
}

.availability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.availability-day-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}

.availability-day-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}

.availability-day-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.availability-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slot-btn {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-dark);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.slot-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.slot-btn:hover:not(.active) {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

.save-indicator {
  font-size: 0.75rem;
  margin-top: 6px;
  height: 16px;
}

.save-indicator.saving { color: var(--text-muted); }
.save-indicator.saved  { color: var(--success); }
.save-indicator.error  { color: var(--danger); }

/* ─── Team Availability Grid ─────────────────────────────────────────────────── */
.team-avail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.team-avail-table th {
  background: var(--primary);
  color: #fff;
  padding: 10px 12px;
  font-size: 0.8125rem;
  text-align: center;
}

.team-avail-table th:first-child { text-align: left; }

.team-avail-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 0.875rem;
}

.team-avail-table td:first-child { text-align: left; }

.avail-slots {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.avail-slot-icon {
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.slot-morning   { background: #fef9c3; color: #a16207; }
.slot-afternoon { background: #fed7aa; color: #c2410c; }
.slot-night     { background: #e0e7ff; color: #3730a3; }
.slot-fullday   { background: var(--success-bg); color: var(--success); }

/* ─── Swap Requests ──────────────────────────────────────────────────────────── */
.swap-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.swap-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  border-left: 4px solid var(--border-dark);
}

.swap-card.PENDING_VOLUNTEER { border-left-color: var(--warning); }
.swap-card.PENDING_ADMIN     { border-left-color: var(--info); }
.swap-card.APPROVED          { border-left-color: var(--success); }
.swap-card.REJECTED          { border-left-color: var(--danger); }
.swap-card.CANCELLED         { border-left-color: var(--text-light); }

.swap-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.swap-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.swap-card-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.swap-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Profile ────────────────────────────────────────────────────────────────── */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  object-fit: cover;
}

.profile-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-info h2 {
  margin-bottom: 4px;
}

.profile-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ─── Empty State ────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.empty-state-text {
  font-size: 1rem;
  font-weight: 500;
}

.empty-state-sub {
  font-size: 0.875rem;
  margin-top: 4px;
}

/* ─── Login Page ─────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  padding: 16px;
}

.login-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.login-back {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.92em;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.login-back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.login-card {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.login-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.login-subtitle {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 0.9375rem;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: #fff;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
}

.btn-google:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--primary-light);
  box-shadow: var(--shadow);
}

.btn-google:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.google-icon {
  width: 20px;
  height: 20px;
}

/* ─── Pending Page ───────────────────────────────────────────────────────────── */
.pending-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 16px;
}

.pending-card {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.pending-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

/* ─── Responsive helpers ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-container { padding: 16px 12px; }
  .card { padding: 14px; }
  .modal { margin: 8px; }
  .login-card, .pending-card { padding: 32px 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .modal-header { padding: 14px 16px 12px; }
  .modal-body { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px 14px; flex-wrap: wrap; }
  .navbar-brand-name { display: none; }
  .calendar-nav { flex-wrap: wrap; justify-content: center; }
  .calendar-month-title { min-width: 0; font-size: 1rem; }
  .week-nav { flex-wrap: wrap; justify-content: center; }
  .week-title { min-width: 0; font-size: 0.875rem; }
  .calendar-header-cell { padding: 6px 2px; font-size: 0.6875rem; }
  .calendar-cell { min-height: 44px; padding: 2px 3px; }
  .calendar-day-number { font-size: 0.75rem; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-container { padding: 10px 8px; }
}

/* ─── Responsive Typography ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
  .page-title { font-size: 1.25rem; }
  .login-title { font-size: 1.5rem; }
  td { padding: 10px 12px; }
  thead th { padding: 10px 12px; }
  .card-header { flex-wrap: wrap; }
}

/* ─── Responsive Table (card view on mobile) ─────────────────────────────────── */
@media (max-width: 600px) {
  .responsive-table thead { display: none; }

  .responsive-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  /* Member + its skills line render as one merged card on mobile. */
  .responsive-table tbody tr.member-row {
    margin-bottom: 0;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
  }
  .responsive-table tbody tr.skills-row {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .responsive-table tbody tr.skills-row > td { border-bottom: none; }

  /* admin/vehicles: vehicle-row + actions-row merge into one card on mobile. */
  .responsive-table tbody tr.vehicle-row {
    margin-bottom: 0;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
  }
  .responsive-table tbody tr.actions-row {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .responsive-table tbody tr.actions-row > td { border-bottom: none; }

  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    text-align: right;
    gap: 8px;
    min-height: 38px;
  }

  .responsive-table td:last-child { border-bottom: none; }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    text-align: left;
  }

  .responsive-table td[data-label="Ενέργειες"]::before { display: none; }
  .responsive-table td[data-label="Ενέργειες"] { justify-content: center; }
  .responsive-table td[data-label="Ενέργειες"] .flex { flex-wrap: wrap; justify-content: center; }

  .table-container { box-shadow: none; border-radius: 0; background: transparent; }
}

/* ─── Utility ────────────────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.text-muted { color: var(--text-muted); font-size: 0.875rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }
.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

/* === Public landing page === */
.landing-page {
  --lp-ink:       #0f172a;
  --lp-ink-soft:  #475569;
  --lp-bg:        #f8fafc;
  --lp-card:      #ffffff;
  --lp-border:    #e2e8f0;
  --lp-brand:     #0f2742;
  --lp-brand-2:   #1e40af;
  --lp-accent:    #f59e0b;

  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.landing-page * { box-sizing: border-box; }

/* Hero */
.landing-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 96px 24px;
  overflow: hidden;
}
.landing-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(30, 64, 175, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(15, 39, 66, 0.78) 0%, rgba(15, 39, 66, 0.92) 100%);
}
.landing-hero__content { position: relative; max-width: 880px; }
.landing-hero__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-hero__content h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: #fff;
  font-weight: 800;
}
.landing-hero__content p {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 680px;
  opacity: 0.92;
}
.landing-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.landing-hero__scroll span {
  width: 3px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  animation: lp-scroll 1.6s ease-in-out infinite;
}
@keyframes lp-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Section heads */
.landing-section {
  padding: 110px 24px 90px;
  max-width: 1280px;
  margin: 0 auto;
}
.landing-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.landing-section__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--lp-brand-2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-section__head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  margin: 0;
  font-weight: 800;
}

/* Carousel */
.carousel {
  position: relative;
  outline: none;
}
.carousel__viewport {
  overflow: hidden;
  border-radius: 24px;
  background: var(--lp-card);
  box-shadow: 0 30px 60px -20px rgba(15, 39, 66, 0.18),
              0 10px 30px -10px rgba(15, 39, 66, 0.08);
}
.carousel__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 0;
  min-height: 480px;
}
.slide__media {
  height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #0f2742 100%);
  overflow: hidden;
  position: relative;
}
.slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.slide.is-active .slide__media img {
  transform: scale(1.03);
}
.slide__text {
  padding: 56px 64px;
}
.slide__index {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lp-accent);
  margin-bottom: 18px;
}
.slide__text h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--lp-ink);
  font-weight: 800;
}
.slide__text p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--lp-ink-soft);
  margin: 0 0 14px;
}
.slide__text p:last-child { margin-bottom: 0; }

/* Carousel arrows */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--lp-brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -4px rgba(15, 39, 66, 0.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.carousel__arrow:hover {
  background: var(--lp-brand);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.carousel__arrow--prev { left: -26px; }
.carousel__arrow--next { right: -26px; }

/* Dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.carousel__dot.is-active {
  width: 32px;
  background: var(--lp-brand);
}

/* Final CTA */
.landing-cta {
  position: relative;
  padding: 100px 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--lp-brand) 0%, #1e3a8a 100%);
  color: #fff;
  overflow: hidden;
}
.landing-cta::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 50%, rgba(245, 158, 11, 0.18), transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.3), transparent 50%);
  pointer-events: none;
}
.landing-cta__inner { position: relative; max-width: 680px; margin: 0 auto; }
.landing-cta h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #fff;
  font-weight: 800;
}
.landing-cta p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 36px;
  opacity: 0.9;
}
.landing-cta__btn {
  display: inline-block;
  padding: 16px 44px;
  background: var(--lp-accent);
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 30px -8px rgba(245, 158, 11, 0.6);
}
.landing-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(245, 158, 11, 0.75);
}

/* Tablet */
@media (max-width: 1024px) {
  .carousel__arrow--prev { left: 10px; }
  .carousel__arrow--next { right: 10px; }
  .slide__text { padding: 44px 40px; }
}

/* Mobile */
@media (max-width: 768px) {
  .landing-hero { min-height: 520px; padding: 72px 20px; }

  .landing-section { padding: 72px 16px 60px; }
  .landing-section__head { margin-bottom: 40px; }

  .slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .slide__media { aspect-ratio: 16 / 10; height: auto; }
  .slide__text { padding: 32px 24px 36px; }

  .carousel__arrow {
    width: 42px;
    height: 42px;
    top: auto;
    bottom: -64px;
    transform: none;
  }
  .carousel__arrow:hover { transform: scale(1.06); }
  .carousel__arrow--prev { left: calc(50% - 56px); }
  .carousel__arrow--next { right: calc(50% - 56px); }
  .carousel__dots { margin-top: 80px; }

  .landing-cta { padding: 72px 20px; }
}

/* ─── Landing hero CTA button (→ /features) ──────────────────────────────── */
.landing-hero__actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.landing-hero__btn {
  display: inline-block;
  padding: 15px 38px;
  background: var(--lp-accent);
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 30px -8px rgba(245, 158, 11, 0.6);
}
.landing-hero__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(245, 158, 11, 0.75);
}

/* ─── Store badges (partials/app-badges.php) ─────────────────────────────── */
.app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.app-badges__link { display: inline-flex; transition: transform .15s ease; }
.app-badges__link:hover { transform: translateY(-2px); }
.app-badges img { display: block; width: auto; height: 48px; }

/* Phone-browser "get the app" bar (partials/app-banner.php) */
.app-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  color: #0f172a;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.app-banner[hidden] { display: none; }
.app-banner__icon { flex: 0 0 auto; border-radius: 10px; }
.app-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.app-banner__text strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-banner__text span { font-size: 0.8rem; color: #475569; }
.app-banner__get {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 999px;
  background: #0f2742;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.app-banner__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
body.has-app-banner { padding-bottom: 76px; }
@media (prefers-reduced-motion: no-preference) {
  .app-banner { animation: app-banner-in .35s ease-out; }
  @keyframes app-banner-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ─── Features page (/features) ──────────────────────────────────────────── */
.features-page { overflow-x: clip; }
.features-page .landing-section__head { margin-bottom: 48px; }

/* Hero: gradient band; the bottom of the screenshot overlaps the light page bg */
.fx-hero {
  --fx-hero-tail: 200px;
  position: relative;
  padding: 88px 24px 0;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, transparent 0, transparent calc(100% - var(--fx-hero-tail)), var(--lp-bg) calc(100% - var(--fx-hero-tail))),
    linear-gradient(160deg, var(--lp-brand) 0%, #1e3a8a 100%);
}
.fx-hero__glow {
  position: absolute;
  inset: 0 0 var(--fx-hero-tail) 0;
  background: radial-gradient(circle at 25% 30%, rgba(245, 158, 11, 0.16), transparent 45%),
              radial-gradient(circle at 75% 55%, rgba(59, 130, 246, 0.30), transparent 50%);
  pointer-events: none;
}
.fx-hero__content { position: relative; max-width: 820px; margin: 0 auto; }
.fx-hero__content h1 {
  font-size: clamp(2rem, 4.8vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: #fff;
  font-weight: 800;
}
.fx-hero__content p {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 680px;
  opacity: 0.92;
}
.fx-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.fx-btn-ghost {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  transition: background .15s ease, border-color .15s ease;
}
.fx-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.6); }
.fx-hero__media { position: relative; max-width: 1120px; margin: 56px auto 0; }

/* Browser-window frame (CSS only; the screenshot is plain) */
.fx-browser {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(15, 39, 66, 0.38),
              0 10px 24px -14px rgba(15, 39, 66, 0.18);
}
.fx-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #eef2f7;
  border-bottom: 1px solid #e2e8f0;
}
.fx-browser__bar span { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.fx-browser__bar span:nth-child(1) { background: #f87171; }
.fx-browser__bar span:nth-child(2) { background: #fbbf24; }
.fx-browser__bar span:nth-child(3) { background: #34d399; }
.fx-browser__bar i {
  flex: 0 1 42%;
  height: 14px;
  margin: 0 auto;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.fx-browser img { display: block; width: 100%; height: auto; }
.fx-browser--hero { border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(15, 39, 66, 0.55), 0 12px 30px -14px rgba(15, 39, 66, 0.25); }
.fx-browser--hero .fx-browser__bar { height: 34px; }

/* Icon tile + check list */
.fx-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--lp-brand-2);
}
.fx-icon svg { width: 24px; height: 24px; }
.fx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fx-checks li {
  position: relative;
  padding-left: 32px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lp-ink);
}
.fx-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.18);
}
.fx-checks li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid #b45309;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fx-checks--sm { gap: 9px; }
.fx-checks--sm li { font-size: 0.93rem; line-height: 1.5; padding-left: 30px; }
.fx-checks--sm li::before { top: 1px; width: 20px; height: 20px; }
.fx-checks--sm li::after { left: 7.5px; top: 4.5px; }

/* Cards («Για ποιον», modules) */
.fx-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 18px 40px -26px rgba(15, 39, 66, 0.22);
}
.fx-card h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 18px 0 8px;
  color: var(--lp-ink);
  font-weight: 800;
}
.fx-card__lead { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.55; color: var(--lp-ink-soft); }
.fx-card--compact { padding: 26px 24px; }
.fx-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.fx-card__head h3 { margin: 2px 0 4px; font-size: 1.1rem; }
.fx-card__head .fx-card__lead { margin: 0; font-size: 0.9rem; }

.fx-audience { max-width: 1200px; margin: 0 auto; padding: 80px 24px 88px; }
.fx-audience__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Feature sections (zig-zag) */
.fx-feature { padding: 88px 24px; scroll-margin-top: 64px; }
.fx-feature:nth-child(odd) { background: #fff; border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
.fx-feature__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 64px;
}
.fx-feature--flip .fx-feature__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx-feature--flip .fx-feature__text { order: 2; }
.fx-feature__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fx-feature__head h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
  font-weight: 800;
}
.fx-feature__lead { margin: 0 0 26px; font-size: 1.12rem; line-height: 1.6; color: var(--lp-ink-soft); }
.fx-feature__label {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-brand-2);
}
.fx-feature__note { margin: 22px 0 0; font-size: 0.85rem; line-height: 1.5; color: #64748b; }

/* Two screenshots: a large one + a smaller one overlapping its lower corner */
.fx-feature__media--pair { position: relative; padding-bottom: 15%; }
.fx-feature__media--pair > .fx-browser:first-child { width: 88%; }
.fx-feature__media--pair > .fx-browser--extra { position: absolute; right: 0; bottom: 0; width: 50%; }
.fx-feature--flip .fx-feature__media--pair > .fx-browser:first-child { margin-left: auto; }
.fx-feature--flip .fx-feature__media--pair > .fx-browser--extra { right: auto; left: 0; }
.fx-browser--extra { box-shadow: 0 24px 50px -18px rgba(15, 39, 66, 0.45); border-color: rgba(15, 23, 42, 0.12); }

/* Modules without screenshots */
.fx-modules { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.fx-modules__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* Mobile apps */
.fx-app {
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border-top: 1px solid var(--lp-border);
  padding: 96px 24px;
  scroll-margin-top: 64px;
}
.fx-app__inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.fx-app__text { max-width: 640px; margin: 0 auto; }
.fx-app__text h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--lp-ink);
  font-weight: 800;
}
.fx-app__text p { margin: 0 0 28px; font-size: 1.1rem; line-height: 1.6; color: var(--lp-ink-soft); }
.fx-app .app-badges { justify-content: center; }
.fx-phones {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.fx-phone { width: 210px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fx-phone__frame {
  width: 100%;
  padding: 8px;
  border-radius: 34px;
  background: #0f172a;
  box-shadow: 0 30px 60px -28px rgba(15, 39, 66, 0.55), inset 0 0 0 2px #334155;
}
.fx-phone__frame img { display: block; width: 100%; height: auto; border-radius: 26px; }
.fx-phone__caption { font-weight: 700; font-size: 0.92rem; color: var(--lp-ink); }

@media (max-width: 1024px) {
  .fx-modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-feature__inner, .fx-feature--flip .fx-feature__inner { gap: 44px; }
}
@media (max-width: 900px) {
  .fx-audience__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .fx-feature__inner, .fx-feature--flip .fx-feature__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fx-feature--flip .fx-feature__text { order: 0; }
  .fx-feature__text { max-width: 640px; }
}
@media (max-width: 768px) {
  .fx-hero { --fx-hero-tail: 110px; padding: 64px 20px 0; }
  .fx-hero__media { margin-top: 40px; }
  .fx-audience { padding: 64px 20px 64px; }
  .fx-feature { padding: 64px 20px; }
  .fx-modules { padding: 72px 20px; }
  .fx-app { padding: 72px 20px; }
  .fx-card { padding: 26px 22px; }
  .fx-feature__lead { font-size: 1.05rem; }
}
@media (max-width: 640px) {
  .fx-modules__grid { grid-template-columns: 1fr; }
  .fx-feature__media--pair { padding-bottom: 0; }
  .fx-feature__media--pair > .fx-browser:first-child { width: 100%; }
  .fx-feature__media--pair > .fx-browser--extra { position: static; width: 100%; margin-top: 16px; }
  .fx-browser__bar { height: 22px; gap: 5px; padding: 0 9px; }
  .fx-browser__bar span { width: 8px; height: 8px; }
  .fx-browser__bar i { height: 10px; }
  .fx-browser { border-radius: 10px; }
  .fx-phones { gap: 24px 16px; }
  .fx-phone { width: calc(50% - 8px); max-width: 200px; }
}
@media (max-width: 420px) {
  .fx-hero__actions a { width: 100%; text-align: center; }
  .fx-feature__head h2 { font-size: 1.45rem; }
  .fx-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
  .fx-icon svg { width: 21px; height: 21px; }
}


/* ── Αποθήκη: Τ4 ── Βιβλίο πρωτοκόλλου (/protocol) ─────────────────────────── */
.protocol-page-wrap .pr-h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.protocol-page-wrap .pr-pad { padding: 8px 0; }
.protocol-page-wrap .pr-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 12px;
  margin-bottom: 10px;
}
.protocol-page-wrap .pr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.protocol-page-wrap .pr-field-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.protocol-page-wrap .pr-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.protocol-page-wrap .pr-table td { vertical-align: top; }
.protocol-page-wrap .pr-subject { white-space: normal; word-break: break-word; max-width: 420px; }
.protocol-page-wrap .pr-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; margin-top: 12px;
}
@media (max-width: 600px) {
  .protocol-page-wrap .pr-filters { grid-template-columns: 1fr; }
  .protocol-page-wrap .pr-filter-actions .btn { flex: 1 1 100%; justify-content: center; }
  .protocol-page-wrap .pr-subject { max-width: none; text-align: right; }
  .protocol-page-wrap .card-header { gap: 8px; }
}


/* ── Αποθήκη: Τ6 ── οδηγός ρύθμισης (/inventory/setup), ρυθμίσεις (/inventory/settings), κοινό μήνυμα inv.notice ── */
.inv-setup-wrap .inv-h2, .inv-settings-wrap .inv-h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.inv-setup-wrap .inv-h3, .inv-settings-wrap .inv-h3 { font-size: 0.92rem; font-weight: 700; margin: 12px 0 6px; }
.inv-setup-wrap .inv-lead { margin: 0 0 14px; color: var(--text); }
.inv-setup-wrap .inv-mt { margin-top: 12px; }
.inv-setup-wrap .inv-ml, .inv-settings-wrap .inv-ml { margin-left: 6px; }
.inv-setup-wrap .inv-actions, .inv-settings-wrap .inv-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
.inv-settings-wrap .inv-actions-left { justify-content: flex-start; }
.inv-setup-wrap .inv-plain, .inv-settings-wrap .inv-plain { margin: 0; padding-left: 18px; }
.inv-setup-wrap .inv-plain li { margin: 2px 0; word-break: break-word; }
.inv-notice { margin-top: 8px; }
.inv-notice .btn { margin-top: 12px; }

/* Βήματα οδηγού */
.inv-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.inv-step {
  padding: 6px 12px; border-radius: 999px; background: var(--border); color: var(--text-muted);
  font-size: 0.85rem; font-weight: 600;
}
.inv-step.is-current { background: var(--primary); color: #fff; }
.inv-step.is-done { background: var(--success-bg); color: var(--success); }

/* Κάρτες προτύπων */
.inv-template-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.inv-template-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); color: var(--text); font: inherit; box-shadow: var(--shadow);
}
.inv-template-card:hover { border-color: var(--primary-light); }
.inv-template-card:focus-visible { outline: 3px solid var(--info-bg); outline-offset: 2px; }
.inv-template-card.is-selected { border-color: var(--primary); background: var(--info-bg); }
.inv-template-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; }
.inv-template-desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.4; }

/* Πίνακας σύγκρισης */
.inv-compare { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.inv-compare th, .inv-compare td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.inv-compare thead th { background: var(--bg); color: var(--text); font-weight: 700; }
.inv-compare tbody th { text-align: left; font-weight: 600; }
.inv-compare .is-selected { background: var(--info-bg); font-weight: 700; }

/* Προεπισκόπηση */
.inv-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0; font-size: 0.9rem; }
.inv-kv dt { color: var(--text-muted); }
.inv-kv dd { margin: 0; font-weight: 600; text-align: right; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-chip { padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 0.85rem; }
.inv-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.inv-list-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 0.88rem; }
.inv-list-box .inv-h3 { margin-top: 0; }
.inv-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin: 6px 0; }
.inv-check input { margin-top: 3px; }

/* Ρυθμίσεις */
.inv-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.inv-setting {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.inv-setting .form-label { margin-bottom: 2px; }
.inv-setting .form-hint { margin: 0; }
.inv-setting-text { min-width: 0; flex: 1 1 auto; }
.inv-setting-control { flex: 0 0 auto; min-width: 120px; display: flex; justify-content: flex-end; }
.inv-setting-control .form-select, .inv-setting-control .form-input { min-width: 170px; }
.inv-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.inv-switch input { width: 18px; height: 18px; }
.inv-locked { color: var(--warning); }
.inv-inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.inv-inline-form .form-input { flex: 1 1 220px; min-width: 0; }
.inv-inline-form .form-select { flex: 0 1 220px; }
.inv-details { margin-top: 12px; }
.inv-details summary { cursor: pointer; font-weight: 600; color: var(--primary-light); }
.inv-details .table-container { margin-top: 8px; }

/* Λίστες / σκοποί */
.inv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.inv-tab {
  border: 1px solid var(--border-dark); background: var(--card-bg); color: var(--text);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.inv-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.inv-table td { vertical-align: middle; }
.inv-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.inv-code { font-size: 0.78rem; color: var(--text-muted); background: var(--bg); padding: 1px 5px; border-radius: var(--radius-sm); }
.inv-row-hidden td { opacity: 0.6; }
.inv-row-actions { flex-wrap: wrap; }
.inv-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

@media (max-width: 900px) {
  .inv-template-cards { grid-template-columns: 1fr; }
  .inv-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .inv-setup-wrap .inv-actions .btn, .inv-settings-wrap .inv-actions .btn { flex: 1 1 100%; justify-content: center; }
  .inv-setting { flex-direction: column; }
  .inv-setting-control { width: 100%; justify-content: flex-start; }
  .inv-setting-control .form-select, .inv-setting-control .form-input { width: 100%; min-width: 0; }
  .inv-inline-form > * { flex: 1 1 100%; }
  .inv-checks { grid-template-columns: 1fr; }
  .inv-kv { grid-template-columns: 1fr; }
  .inv-kv dd { text-align: left; margin-bottom: 6px; }
  .inv-compare { font-size: 0.8rem; }
  .inv-compare th, .inv-compare td { padding: 6px 4px; }
}

/* ── Αποθήκη: Τ7 ── Κατάλογος, είδη, τεμάχια/παρτίδες, αποθήκες, φορείς, σετ, «Υλικά αποθήκης» οχημάτων/σκαφών ── */
.inv7-page .inv7-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.inv7-page .inv7-title { margin: 0; word-break: break-word; }
.inv7-page .inv7-sub { margin: 4px 0 0; font-size: 0.85rem; }
.inv7-page .inv7-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv7-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.inv7-subnav-link { padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; text-decoration: none; color: var(--text-muted); border: 1px solid var(--border); background: var(--card-bg); }
.inv7-subnav-link.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.inv7-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; overflow-x: auto; }
.inv7-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.inv7-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.inv7-h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.inv7-h3 { font-size: 0.95rem; font-weight: 700; margin: 14px 0 6px; }
.inv7-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
.inv7-filters .form-group { margin-bottom: 0; }
.inv7-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.inv7-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.inv7-table td { vertical-align: top; }
.inv7-namecell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; word-break: break-word; }
.inv7-owner { white-space: normal; }
.inv7-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.inv7-wrap { flex-wrap: wrap; }
.inv7-inline { display: flex; gap: 8px; align-items: center; }
.inv7-inline > .form-input, .inv7-inline > .form-select { flex: 1 1 auto; min-width: 0; }
.inv7-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.9rem; }
.inv7-checks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.inv7-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.inv7-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.inv7-field-error { margin-top: 4px; }
.inv7-note { margin-bottom: 10px; font-size: 0.85rem; }
.inv7-qty { max-width: 110px; }
.inv7-photo { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.inv7-photo-img { max-width: 240px; max-height: 240px; border-radius: var(--radius); border: 1px solid var(--border); object-fit: contain; background: #fff; }
.inv7-photo-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 220px; }
.inv7-comp-add { margin-top: 12px; }
.inv7-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inv7-inactive { opacity: 0.7; }
.inv7-row-missing td { background: var(--warning-bg); }
.inv7-row-critical td { background: var(--danger-bg); }
.inv7-kit-summary p { margin: 6px 0 0; }
.inv7-result p { margin: 0 0 4px; }
.inv7-holder-card { margin-top: 16px; }
.inv7-holder-group { border-top: 1px solid var(--border); padding: 8px 0; }
.inv7-holder-group > summary { cursor: pointer; padding: 4px 0; }
@media (max-width: 600px) {
  .inv7-filters, .inv7-form-grid { grid-template-columns: 1fr; }
  .inv7-filter-actions .btn, .inv7-form-actions .btn { flex: 1 1 100%; justify-content: center; }
  .inv7-page .inv7-actions { width: 100%; }
  .inv7-page .inv7-actions .btn { flex: 1 1 auto; justify-content: center; }
  .inv7-inline { flex-wrap: wrap; }
  .inv7-namecell { justify-content: flex-end; text-align: right; }
  .inv7-photo-img { max-width: 100%; }
  .inv7-qty { max-width: none; }
}

/* ── Αποθήκη: Τ8 ── Έντυπα (λίστα, νέο έντυπο, οθόνη εντύπου: γραμμές, σετ, απογραφή, συνημμένα, ενέργειες) ── */
.invdoc-page .invdoc-num { font-weight: 600; white-space: nowrap; }
.invdoc-step { font-size: 0.95rem; margin: 14px 0 6px; color: var(--text-muted); }
.invdoc-holder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.invdoc-search { margin-bottom: 12px; }
.invdoc-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 320px; overflow-y: auto; }
.invdoc-result { text-align: left; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: inherit; font: inherit; }
.invdoc-result:hover:not(:disabled) { border-color: var(--primary); }
.invdoc-result:disabled { opacity: 0.5; cursor: default; }
.invdoc-result-suggested { border-color: var(--success); }
.invdoc-result-expired { border-color: var(--danger); background: var(--danger-bg); }
.invdoc-lines { display: flex; flex-direction: column; gap: 10px; }
.invdoc-line { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.invdoc-line-bad, .invdoc-row-bad td { border-color: var(--danger); background: var(--danger-bg, rgba(220, 38, 38, 0.06)); }
.invdoc-line-head { display: flex; align-items: flex-start; gap: 10px; }
.invdoc-line-head .inv7-namecell { flex: 1 1 auto; }
.invdoc-line-no { font-weight: 700; color: var(--text-muted); min-width: 1.5em; }
.invdoc-line-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; margin-top: 8px; }
.invdoc-line-error { color: var(--danger); font-size: 0.85rem; margin-top: 6px; }
.invdoc-static { display: inline-block; padding: 8px 0; }
.invdoc-empty { margin: 8px 0 0; }
.invdoc-kit { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--info); background: var(--info-bg); border-radius: var(--radius); }
.invdoc-kitrow td { font-size: 0.85rem; background: var(--info-bg); }
.invdoc-found { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.invdoc-linksearch { margin-top: 6px; }
.invdoc-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); word-break: break-word; }
.invdoc-upload { margin-top: 10px; }
.invdoc-newunits { margin-top: 12px; padding: 10px; }
.invdoc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 20px; }
.invdoc-meta-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; word-break: break-word; }
.invdoc-meta-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.invdoc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 24px; }
.invdoc-errlist { margin: 0; padding-left: 18px; }
.invdoc-chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.invdoc-choice { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; padding: 16px; }
.invdoc-choice:hover { border-color: var(--primary); }
.invdoc-choice-icon { font-size: 1.8rem; }
@media (max-width: 640px) {
  .invdoc-holder, .invdoc-line-fields, .invdoc-meta { grid-template-columns: 1fr; }
  .invdoc-actions .btn { flex: 1 1 100%; }
  .invdoc-count td .form-input, .invdoc-count td .form-select { max-width: none; width: 100%; }
}

/* ── Αποθήκη: Τ9 ── χρεώσεις (/inventory/charges), παραλαβή επιστροφής, σελίδα χρέωσης μέλους, ελλείψεις ── */
.inv9-page .card + .card { margin-top: 0; }
.inv9-page .mb-3 { margin-bottom: 12px; }
.inv9-back { display: inline-block; margin-bottom: 8px; font-size: 0.9rem; }
.inv9-small { font-size: 0.85rem; margin: 4px 0 8px; }
.inv9-filters-card { margin-bottom: 12px; }
.inv9-due { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.inv9-items { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.inv9-item { word-break: break-word; }
.inv9-row-overdue td { background: var(--danger-bg); }
.inv9-row-done td { opacity: 0.65; }
.inv9-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.inv9-dl dt { color: var(--text-muted); font-size: 0.85rem; }
.inv9-dl dd { margin: 0; word-break: break-word; }
.inv9-decl { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.inv9-decl-row, .inv9-kit-row { border-top: 1px solid var(--border); padding-top: 8px; }
.inv9-decl-item { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.inv9-decl-qtys { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 12px; }
.inv9-decl-qtys .form-group { margin-bottom: 8px; }
.inv9-qty { max-width: 140px; }
.inv9-tr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; }
.inv9-tr-row .inv9-decl-item { flex: 1 1 200px; margin-bottom: 0; }
.inv9-recv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.inv9-kit { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.inv9-kit > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.inv9-recv-footer { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); }
.inv9-related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inv9-related li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; }
.inv9-related li:first-child { border-top: none; padding-top: 0; }
.inv9-note-line { display: block; margin-top: 2px; word-break: break-word; }
.inv9-radio { align-items: flex-start; }
.inv9-radio small { font-weight: normal; }
@media (max-width: 600px) {
  .inv9-dl { grid-template-columns: 1fr; gap: 2px; }
  .inv9-dl dd { margin-bottom: 6px; }
  .inv9-decl-qtys { grid-template-columns: 1fr 1fr; }
  .inv9-qty { max-width: none; }
  .inv9-recv-footer .btn { flex: 1 1 100%; justify-content: center; }
  .inv9-related li .btn { width: 100%; justify-content: center; }
}

/* ── Αποθήκη: Τ10 ── κεντρικός πίνακας (/inventory), καρτέλα είδους (/inventory/items/:id), αναφορές (/inventory/reports) ── */
.inv10-page .card { margin-bottom: 14px; }
.inv10-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.inv10-quick-link { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); text-decoration: none; font-size: 0.875rem; }
.inv10-quick-link:hover { border-color: var(--primary); color: var(--primary); }
.inv10-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.inv10-alert { margin-bottom: 0 !important; padding: 14px 16px; border-left: 4px solid var(--border-dark); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inv10-alert-danger { border-left-color: var(--danger); }
.inv10-alert-warning { border-left-color: var(--warning); }
.inv10-alert-info { border-left-color: var(--info); }
.inv10-alert-ok { border-left-color: var(--success); }
.inv10-alert-title { display: flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--text); text-decoration: none; }
.inv10-alert-count { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--primary); }
.inv10-alert-danger .inv10-alert-count { color: var(--danger); }
.inv10-alert-warning .inv10-alert-count { color: var(--warning); }
.inv10-alert-ok .inv10-alert-count { color: var(--success); }
.inv10-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.inv10-alert-list li { word-break: break-word; }
.inv10-alert-empty { margin: 0; font-size: 0.85rem; }
.inv10-alert-more { font-size: 0.85rem; align-self: flex-start; }
.inv10-late { color: var(--danger); font-weight: 600; }
.inv10-search-row { margin-top: 8px; }
.inv10-search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.inv10-search-sum { margin: 0; font-size: 0.85rem; }
.inv10-result { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.inv10-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.inv10-result-name { font-weight: 600; word-break: break-word; }
.inv10-result-total { font-weight: 700; color: var(--primary); white-space: nowrap; }
.inv10-matched { margin: 4px 0 0; font-size: 0.8rem; }
.inv10-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inv10-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 0.8rem; word-break: break-word; }
.inv10-h2 { margin-bottom: 10px; }
.inv10-col-num { text-align: right; white-space: nowrap; }
.inv10-num { font-variant-numeric: tabular-nums; }
.inv10-zero { color: var(--text-light); }
.inv10-total { font-weight: 700; white-space: nowrap; }
.inv10-code { font-weight: 600; white-space: nowrap; }
.inv10-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inv10-details { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.inv10-details-main { flex: 1 1 280px; min-width: 0; }
.inv10-photo { flex: 0 0 auto; }
.inv10-totals { margin: 10px 0; }
.inv10-total-num { font-size: 1.8rem; font-weight: 700; color: var(--primary); }
.inv10-bd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inv10-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 0; }
.inv10-kv dt { color: var(--text-muted); font-size: 0.85rem; }
.inv10-kv dd { margin: 0; word-break: break-word; white-space: pre-line; }
.inv10-row-expired td { background: var(--danger-bg); }
.inv10-row-expiring td { background: var(--warning-bg); }
.inv10-group-row td { background: var(--bg); padding-top: 10px; }
.inv10-total-row td { border-top: 2px solid var(--border-dark); }
.inv10-desc { margin: 0 0 10px; font-size: 0.875rem; }
.inv10-notes { margin-top: 10px; }
.inv10-check-field { display: flex; align-items: flex-end; }
.inv10-report-tabs { flex-wrap: nowrap; }
@media (max-width: 600px) {
  .inv10-alerts { grid-template-columns: 1fr; }
  .inv10-quick-link { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .inv10-search-row { flex-wrap: wrap; }
  .inv10-search-row .btn { flex: 1 1 100%; justify-content: center; }
  .inv10-col-num { white-space: normal; }
  .inv10-kv { grid-template-columns: 1fr; gap: 2px; }
  .inv10-kv dd { margin-bottom: 6px; }
  .inv10-photo { max-width: 100%; }
  .responsive-table tbody tr.inv10-group-row { box-shadow: none; border: none; background: transparent; margin: 12px 0 6px; }
  .responsive-table tbody tr.inv10-group-row td { display: block; text-align: left; border: none; background: transparent; padding: 0; min-height: 0; }
  .responsive-table tbody tr.inv10-group-row td::before { content: none; }
  .inv10-report-table tfoot tr { display: block; border: 1px solid var(--border-dark); border-radius: var(--radius); background: var(--card-bg); }
  .inv10-report-table tfoot td:empty { display: none; }
}

/* ── Αποθήκη: Τ12 ── «Τα υλικά μου» (/my-items), κάρτα προφίλ, προειδοποίηση Κ13 (χρεωμένα υλικά στην αποχώρηση) */
.inv12-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.inv12-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); font-size: 0.9rem; }
.inv12-chip--danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.inv12-chip--warning { background: var(--warning-bg); border-color: var(--warning); }
.inv12-section { margin: 0 0 20px; }
.inv12-h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inv12-count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; text-align: center; }
.inv12-history > summary { cursor: pointer; list-style: revert; padding: 4px 0; }
.inv12-list { display: flex; flex-direction: column; gap: 10px; }
.inv12-empty { margin: 4px 0 0; font-size: 0.9rem; }
.inv12-charge { border-left: 4px solid var(--border); scroll-margin-top: calc(var(--nav-height, 56px) + 12px); }
.inv12-charge--pending { border-left-color: var(--warning); }
.inv12-charge--overdue { border-left-color: var(--danger); background: var(--danger-bg); }
.inv12-charge--open { box-shadow: var(--shadow-md); }
.inv12-charge-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.inv12-charge-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-word; }
.inv12-charge-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv12-items { list-style: none; padding: 0; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.inv12-items li, .inv12-shortages li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv12-qty { font-weight: 600; white-space: nowrap; }
.inv12-meta { margin: 2px 0 6px; word-break: break-word; }
.inv12-charge-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv12-panel { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.inv12-panel .card { box-shadow: none; }
.inv12-shortages { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inv12-shortages li + li { border-top: 1px solid var(--border); padding-top: 8px; }
.inv12-profile-card { margin-top: 24px; }
.inv12-profile-card h2 { margin-top: 0; font-size: 1rem; }
.inv12-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 12px; }
.inv12-profile-stat { text-align: center; padding: 10px 8px; background: var(--bg); border-radius: 6px; }
.inv12-profile-stat strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.inv12-profile-stat--danger strong { color: var(--danger); }
.inv12-profile-stat--warning strong { color: var(--warning); }
.inv12-holdings { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius-sm, 6px); background: var(--danger-bg); text-align: left; }
.inv12-holdings p { margin: 0 0 6px; }
.inv12-holdings ul { margin: 0 0 8px; padding-left: 18px; font-size: 0.9rem; }
.inv12-holdings li { word-break: break-word; }
.inv12-holdings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .inv12-charge-actions .btn, .inv12-holdings-actions .btn { flex: 1 1 100%; justify-content: center; }
  .inv12-profile-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
}

/* ── Αποθήκη: Τ13 ── ημερήσια αναφορά (σελίδα ρυθμίσεων) */
.inv-settings-wrap .inv-digest-summary { font-weight: 600; margin: 8px 0; }
.inv-settings-wrap .inv-digest-h3 { font-size: .95rem; font-weight: 700; margin: 12px 0 4px; }
.inv-settings-wrap .inv-digest-list { list-style: none; margin: 0 0 8px; padding: 0; }
.inv-settings-wrap .inv-digest-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  padding: 4px 0; border-bottom: 1px solid var(--border); }

/* ── Αποθήκη: Τ11 ── Εισαγωγή αρχικής απογραφής από CSV (/inventory/import) ── */
.inv11-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0 0 14px; }
.inv11-step { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); }
.inv11-step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-dark); font-weight: 700; font-size: 0.8rem; background: var(--card-bg); }
.inv11-step.active { color: var(--primary); font-weight: 700; }
.inv11-step.active .inv11-step-no { background: var(--primary); border-color: var(--primary); color: #fff; }
.inv11-step.done .inv11-step-no { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.inv11-card { margin-bottom: 16px; }
.inv11-card .inv7-h2 { margin-bottom: 8px; }
.inv11-help { font-size: 0.85rem; margin: 4px 0 10px; }
.inv11-fileinfo, .inv11-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.inv11-fileinfo .badge { white-space: normal; word-break: break-word; }
.inv11-details { margin-top: 8px; font-size: 0.85rem; }
.inv11-details summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.inv11-details ul { margin: 6px 0 0; padding-left: 20px; }
.inv11-details li { margin-bottom: 4px; }
.inv11-map .form-group { margin-bottom: 10px; }
.inv11-raw-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.inv11-raw { border-collapse: collapse; font-size: 0.8rem; min-width: 100%; }
.inv11-raw th, .inv11-raw td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.inv11-raw th { background: var(--bg); font-weight: 600; }
.inv11-raw .inv11-used { background: var(--info-bg); }
.inv11-summary { background: var(--bg); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; font-size: 0.9rem; }
.inv11-summary ul { margin: 4px 0 0; padding-left: 20px; }
.inv11-errlist { margin: 0; padding-left: 18px; }
.inv11-msgs { margin: 0; padding-left: 16px; font-size: 0.82rem; }
.inv11-msg-error { color: var(--danger); }
.inv11-msg-warn { color: var(--warning); }
.inv11-row-error td { background: var(--danger-bg); }
.inv11-row-warning td { background: var(--warning-bg); }
@media (max-width: 600px) {
  .inv11-msgs { padding-left: 0; list-style: none; text-align: right; }
  .inv11-card .inv7-form-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Eshop (Φάση 5, Π2) ── πίνακας, κατάλογος, προϊόν, γύροι (κοινά .esh-* για τις σελίδες των Π3–Π8) ── */
.esh-page .esh-actions-left { justify-content: flex-start; }
.esh-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.esh-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); color: var(--text); text-decoration: none; font-size: 0.85rem; }
.esh-stat strong { font-size: 1.4rem; line-height: 1.1; }
a.esh-stat:hover { border-color: var(--primary-light); }
.esh-stat--danger strong { color: var(--danger); }
.esh-stat--warning strong { color: var(--warning); }
.esh-stat--info strong { color: var(--info); }
.esh-list { display: flex; flex-direction: column; }
.esh-list-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none; }
.esh-list-row:last-child { border-bottom: none; }
.esh-list-row:hover { background: var(--bg); }
.esh-list-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; word-break: break-word; }
.esh-list-sub { font-size: 0.82rem; color: var(--text-muted); }
.esh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.esh-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.esh-card--off { opacity: 0.7; }
.esh-card-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.esh-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.esh-card-nophoto { font-size: 2.5rem; opacity: 0.4; }
.esh-card-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; flex: 1 1 auto; }
.esh-card-title { font-weight: 700; color: var(--text); text-decoration: none; word-break: break-word; }
.esh-card-price, .esh-card-options { font-size: 0.88rem; }
.esh-card-options { color: var(--text-muted); }
.esh-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.esh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.esh-form .form-error { margin-top: 4px; }
.esh-item-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.esh-variants { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.esh-variant { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(110px, 0.8fr) minmax(120px, 1fr) auto; gap: 8px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.esh-variant--off .esh-variant-label { opacity: 0.6; }
.esh-variant-label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; word-break: break-word; }
.esh-variant-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.esh-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.esh-photo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 6px; border: 2px solid var(--border); border-radius: var(--radius); }
.esh-photo.is-primary { border-color: var(--primary); }
.esh-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg); }
.esh-photo-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.esh-sizechart { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.esh-sizechart img { max-width: 100%; max-height: 360px; border-radius: var(--radius-sm); }
.esh-setting-off { opacity: 0.55; }
@media (max-width: 900px) {
  .esh-form-grid { grid-template-columns: 1fr; }
  .esh-variant { grid-template-columns: 1fr 1fr; }
  .esh-variant-label, .esh-variant-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .esh-variant { grid-template-columns: 1fr; }
  .esh-card-actions .btn, .esh-variant-actions .btn, .esh-page .inv-actions .btn { flex: 1 1 100%; justify-content: center; }
  .esh-page .card-header { flex-wrap: wrap; }
  .esh-page .card-header > .btn { flex: 1 1 100%; justify-content: center; }
  .esh-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Eshop (Φάση 5, Π3) ── κατάλογος μέλους, καλάθι, «Οι παραγγελίες μου» (ένα πεδίο/κουμπί ανά σειρά ≤ 600px) ── */
.esh-pre { white-space: pre-wrap; word-break: break-word; }
.esh-text-danger { color: var(--danger); font-weight: 600; }
.esh-h3 { font-size: 0.95rem; font-weight: 700; margin: 14px 0 6px; }
.esh-info-list { margin: 0 0 6px; padding-left: 18px; font-size: 0.9rem; }
.esh-catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.esh-catalog-main { min-width: 0; }
.esh-cartbar { display: none; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--primary-light); border-radius: var(--radius); background: var(--card-bg); color: var(--text); text-decoration: none; }
.esh-thumbs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 0; }
.esh-thumb { width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  cursor: pointer; overflow: hidden; }
.esh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.esh-card-desc { margin: 2px 0; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.esh-card-limit { font-size: 0.82rem; color: var(--info); }
.esh-card-limit.is-full { color: var(--danger); font-weight: 600; }
.esh-sizes { font-size: 0.85rem; }
.esh-sizes summary { cursor: pointer; color: var(--primary); }
.esh-card-form { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.esh-card-form .form-group { margin: 0; }
.esh-card-form .btn { width: 100%; justify-content: center; }
.esh-card-form .form-control, .esh-cart textarea.form-control, .esh-sizes-form .form-control { width: 100%; box-sizing: border-box; }
.esh-cart-line-qty .form-control { width: 100%; max-width: 90px; box-sizing: border-box; }
.esh-cart { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
.esh-cart-lines { display: flex; flex-direction: column; }
.esh-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 6px 8px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--border); }
.esh-cart-line.has-error { background: var(--danger-bg); }
.esh-cart-line-main { grid-column: 1 / -1; word-break: break-word; }
.esh-cart-line-amount { text-align: right; font-weight: 600; }
.esh-cart-line .btn { grid-column: 1 / -1; justify-self: start; }
.esh-cart-totals { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.esh-cart-total { display: flex; justify-content: space-between; gap: 8px; }
.esh-orders { display: flex; flex-direction: column; gap: 12px; }
.esh-order { display: flex; flex-direction: column; gap: 8px; }
.esh-order--cancelled { opacity: 0.8; }
.esh-order-head { display: flex; flex-direction: column; gap: 2px; }
.esh-order-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin: 0; }
.esh-order-amounts dt { font-size: 0.78rem; color: var(--text-muted); }
.esh-order-amounts dd { margin: 0; font-weight: 600; }
.esh-order-detail { border-top: 1px solid var(--border); padding-top: 10px; }
.esh-timeline { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.esh-timeline-step { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); }
.esh-timeline-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); background: var(--card-bg); flex: 0 0 auto; }
.esh-timeline-step.is-done { color: var(--text); }
.esh-timeline-step.is-done .esh-timeline-dot { background: var(--success); border-color: var(--success); }
.esh-timeline-step.is-current .esh-timeline-label { font-weight: 700; }
.esh-timeline-step.is-cancelled .esh-timeline-dot { background: var(--danger); border-color: var(--danger); }
.esh-timeline-at { font-size: 0.78rem; color: var(--text-muted); }
.esh-order-lines { display: flex; flex-direction: column; }
.esh-order-line { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.esh-order-line:last-child { border-bottom: none; }
.esh-row--off { opacity: 0.6; }
.esh-line-note { font-size: 0.85rem; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg); }
.esh-line-note.is-pending { background: var(--warning-bg); }
.esh-line-actions, .esh-order-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.esh-line-actions:empty, .esh-order-actions:empty { display: none; }
.esh-sizes-form .form-group { max-width: 320px; }
.esh-size-extra { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.esh-size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
@media (max-width: 900px) {
  .esh-catalog-layout { grid-template-columns: 1fr; }
  .esh-cart { position: static; max-height: none; overflow: visible; }
  .esh-cartbar { display: flex; }
}
@media (max-width: 600px) {
  .esh-timeline { flex-direction: column; align-items: flex-start; }
  .esh-order-amounts { grid-template-columns: 1fr; }
  .esh-cart-line { grid-template-columns: 1fr; }
  .esh-cart-line-amount { text-align: left; }
  .esh-cart-line .btn, .esh-line-actions .btn, .esh-order-actions .btn { width: 100%; justify-self: stretch; justify-content: center; }
  .esh-sizes-form .form-group { max-width: none; }
  .esh-size-row .btn { width: 100%; justify-content: center; }
}

/* ── Eshop (Φάση 5, Π5) ── παραγγελίες προμηθευτή, πληρωμή προμηθευτή, παραλαβή (ένα πεδίο/κουμπί ανά σειρά ≤ 600px) ── */
.esh-so-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: 0.9rem; }
.esh-so-meta dt { color: var(--text-muted); }
.esh-so-meta dd { margin: 0; word-break: break-word; }
.esh-so-group { padding: 8px 0; border-bottom: 1px solid var(--border); }
.esh-so-gtitle { display: block; cursor: pointer; word-break: break-word; }
.esh-so-glines { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0 22px; font-size: 0.85rem; }
.esh-so-gline { cursor: pointer; word-break: break-word; }
.esh-so-tline { display: grid; grid-template-columns: 1.4fr 1fr 0.6fr 1.2fr auto; gap: 0 10px; align-items: end;
  border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.esh-so-members td { background: var(--bg); }
.esh-so-mlist { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.82rem; color: var(--text-muted); }
.esh-so-m { word-break: break-word; }
.esh-so-receipt { padding: 8px 0; border-bottom: 1px solid var(--border); }
.esh-so-receipt .esh-list-main .btn { margin-left: auto; }
.esh-so-rlines { margin: 4px 0 0; padding-left: 18px; font-size: 0.86rem; }
.esh-so-rform { margin-top: 10px; }
.esh-so-rline { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 10px; min-width: 0; }
.esh-so-rline legend { font-weight: 600; font-size: 0.9rem; padding: 0 4px; word-break: break-word; }
.esh-so-itemreq { border-color: var(--warning); margin: 10px 0; }
.esh-so-ir { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; }
@media (max-width: 900px) {
  .esh-so-tline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .esh-so-meta { grid-template-columns: 1fr; gap: 0; }
  .esh-so-meta dd { margin-bottom: 6px; }
  .esh-so-tline { grid-template-columns: 1fr; }
  .esh-so-tline .btn, .esh-so-receipt .btn, .esh-item-results .btn { width: 100%; justify-content: center; }
  .esh-so-receipt .esh-list-main .btn { margin-left: 0; }
  .esh-so-glines { margin-left: 8px; }
}

/* ── Eshop (Φάση 5, Π7) ── διανομή, ανταλλαγές, κουμπιά «Οι παραγγελίες μου» (ένα πεδίο/κουμπί ανά σειρά ≤ 600px) ── */
.esh-dist-member { font-weight: 600; font-size: 0.9rem; color: var(--text-muted); padding: 12px 4px 4px; border-bottom: 1px solid var(--border); word-break: break-word; }
.esh-list-row.esh-dist-row { flex-direction: row; align-items: center; gap: 10px; }
.esh-dist-check { display: flex; align-items: center; padding: 4px; margin: 0; cursor: pointer; flex: 0 0 auto; }
.esh-dist-check input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.esh-dist-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.esh-dist-qty { width: 84px; flex: 0 0 auto; }
.esh-dist-form { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.esh-dist-acts { margin-top: 6px; }
.esh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.esh-mo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; width: 100%; }
.esh-mo-label { font-size: 0.85rem; color: var(--text-muted); word-break: break-word; }
.esh-mo-form { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-top: 6px; background: var(--bg); }
.esh-mo-title { display: block; margin-bottom: 6px; }
.esh-mo-form .form-control, .esh-mo-form .form-select { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
  .esh-list-row.esh-dist-row { flex-wrap: wrap; }
  .esh-dist-body { flex-basis: calc(100% - 48px); }
  .esh-dist-qty { width: 100%; }
  .esh-dist-acts .btn, .esh-dist-form .btn, .esh-mo-actions .btn { width: 100%; justify-content: center; }
  .esh-mo-actions { flex-direction: column; align-items: stretch; }
}

/* ── Βοήθεια ── κουμπί «?» (layout + topbar κινητού) και κέντρο βοήθειας /help, /help/:slug (docs/HELP.md) ── */
/* Desktop: σταθερό πάνω δεξιά στην περιοχή περιεχομένου· το main κρατά ένα δεξί «κανάλι» 48px ώστε το κουμπί να μην
   καλύπτει ποτέ κουμπιά/πίνακες/χάρτες της σελίδας (και όταν η σελίδα κυλά). Το top το ορίζει το layout (banner επιπροσώπησης). */
.help-fab {
  position: fixed; right: 8px; z-index: 110;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); color: var(--primary); border: 1.5px solid var(--border-dark);
  font-weight: 700; font-size: 1.05rem; line-height: 1; text-decoration: none;
  box-shadow: var(--shadow-md);
}
.help-fab:hover, .help-fab:focus-visible { background: var(--primary); color: #fff; border-color: var(--primary); text-decoration: none; }
@media (min-width: 1025px) {
  body.has-help-fab main { padding-right: 48px; }
}
@media (max-width: 1024px) {
  .help-fab { display: none; }
}
.topbar-help {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15); color: #fff; border: 1.5px solid rgba(255,255,255,0.5);
  font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none;
}
.topbar-help:hover, .topbar-help:focus-visible { background: rgba(255,255,255,0.3); color: #fff; text-decoration: none; }
@media print {
  .help-fab, .topbar-help { display: none !important; }
  body.has-help-fab main { padding-right: 0; }
}

.help-wrap { max-width: 980px; padding-bottom: 64px; }
.help-hero { background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)); color: #fff; border-radius: 14px; padding: 24px 26px; margin-bottom: 20px; }
.help-hero h1 { margin: 0 0 8px; font-size: 1.6rem; }
.help-hero p { margin: 0; opacity: .92; line-height: 1.55; }
.help-search { margin-bottom: 20px; }
.help-group { margin: 0 0 24px; }
.help-group[hidden], .help-card-link[hidden] { display: none; }
.help-group-title { font-size: 1.1rem; color: var(--primary); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.help-card-link {
  display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-weight: 600; text-decoration: none; box-shadow: var(--shadow);
  word-break: break-word;
}
.help-card-link:hover { border-color: var(--primary-light); color: var(--primary); text-decoration: none; }

.help-crumbs { margin-bottom: 12px; }
.help-article { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 22px 26px; box-shadow: var(--shadow); }
.help-article-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.help-article-head h1 { margin: 2px 0 0; font-size: 1.5rem; color: var(--primary); }
.help-article-group { font-size: .85rem; color: var(--text-muted); }
.help-body { line-height: 1.65; color: var(--text); }
.help-body h2 { margin: 22px 0 8px; font-size: 1.2rem; color: var(--primary); }
.help-body h3 { margin: 18px 0 6px; font-size: 1.02rem; color: var(--text); }
.help-body p { margin: 8px 0; }
.help-body ul, .help-body ol { margin: 8px 0; padding-left: 24px; }
.help-body li { margin: 4px 0; }
.help-body li > ul, .help-body li > ol { margin: 4px 0; }
.help-body code { background: #eef2ff; color: #3730a3; border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.help-body a { color: var(--primary-light); text-decoration: underline; }
.help-callout { border-left: 4px solid var(--info); background: var(--info-bg); padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.help-callout--tip { border-left-color: var(--success); background: #ecfdf5; }
.help-callout--warning { border-left-color: var(--warning); background: #fffbeb; }
.help-callout > :first-child { margin-top: 0; }
.help-callout > :last-child { margin-bottom: 0; }
.help-table-wrap { overflow-x: auto; margin: 12px 0; }
.help-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.help-table th, .help-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.help-table th { background: var(--bg); font-weight: 600; }
.help-related { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); }
.help-related h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--primary); }
.help-related ul { margin: 0; padding-left: 20px; }
.help-related li { margin: 4px 0; }
@media (max-width: 600px) {
  .help-hero { padding: 18px 16px; }
  .help-hero h1 { font-size: 1.3rem; }
  .help-article { padding: 16px 14px; }
  .help-article-head .btn { width: 100%; justify-content: center; }
  .help-cards { grid-template-columns: 1fr; }
}

/* ═══ Calendar: αργίες + month view (calendar.js) ═══════════════════════════════
   Κυριακή (πάντα, client-side) · επίσημη αργία · τοπική γιορτή της ομάδας.
   Ημιδιαφανείς αποχρώσεις (tint) ώστε να δουλεύουν πάνω σε ανοιχτό ή σκούρο φόντο·
   ένα μελλοντικό dark theme χρειάζεται μόνο να ξαναορίσει τα --cal-* tokens.
   Τα χρώματα καιρού του week grid ΔΕΝ αγγίζονται εδώ. */
:root {
  --cal-sunday: #dc2626;
  --cal-official: #dc2626;
  --cal-official-tint: rgba(220, 38, 38, 0.12);
  --cal-local: #7c3aed;
  --cal-local-tint: rgba(124, 58, 237, 0.13);
}

/* Εναλλαγή «Εβδομάδα | Μήνας» — η πλοήγηση αναδιπλώνεται αν δεν χωρά. */
.calendar-page .calendar-nav { flex-wrap: wrap; row-gap: 8px; }
.cal-view-toggle { display: inline-flex; flex-shrink: 0; margin-left: auto; }
.cal-view-toggle .btn { border-radius: 0; }
.cal-view-toggle .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal-view-toggle .btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Week view — κεφαλίδες ημέρας. Χωρίς επίσημο δείκτη: tint φόντου + χρωματιστό όνομα ημέρας. */
.wg-day-header.cal-local:not(.has-risk)    { background: var(--cal-local-tint); }
.wg-day-header.cal-official:not(.has-risk) { background: var(--cal-official-tint); }
.wg-day-header.cal-local:not(.has-risk) .wg-day-name    { color: var(--cal-local); }
.wg-day-header.cal-sunday:not(.has-risk) .wg-day-name,
.wg-day-header.cal-official:not(.has-risk) .wg-day-name { color: var(--cal-sunday); }

/* Με επίσημο δείκτη (.has-risk) το φόντο μένει το χρώμα κινδύνου· η σήμανση γίνεται badge στο όνομα
   ημέρας: λευκό κείμενο σε κόκκινο/μωβ + λευκό περίγραμμα ώστε να ξεχωρίζει και πάνω στο κόκκινο
   (#fe0003) ή πορτοκαλί (#ffad00) του δείκτη. Η επίσημη/Κυριακή υπερισχύει της τοπικής (σειρά κανόνων). */
.wg-day-header.has-risk.cal-local .wg-day-name,
.wg-day-header.has-risk.cal-sunday .wg-day-name,
.wg-day-header.has-risk.cal-official .wg-day-name {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  color: #ffffff;
  background: var(--cal-local);
  box-shadow: 0 0 0 1px #ffffff;
}
.wg-day-header.has-risk.cal-sunday .wg-day-name,
.wg-day-header.has-risk.cal-official .wg-day-name { background: var(--cal-sunday); }

.wg-day-holiday {
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.wg-day-holiday.official { color: var(--cal-official); }
.wg-day-holiday.local    { color: var(--cal-local); }
.wg-day-header.has-risk .wg-day-holiday { color: inherit; }

/* Month view */
.mg-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 8px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.mg-head,
.mg-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mg-head { border-bottom: 2px solid var(--border); flex-shrink: 0; }

.mg-head-cell {
  padding: 6px 2px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.mg-head-cell.cal-sunday { color: var(--cal-sunday); }

.mg-body { flex: 1; grid-auto-rows: minmax(96px, 1fr); }

.mg-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.mg-cell:nth-child(7n) { border-right: none; }
.mg-cell:hover,
.mg-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-light); outline: none; }
.mg-cell.cal-local    { background: var(--cal-local-tint); }
.mg-cell.cal-official { background: var(--cal-official-tint); }
.mg-cell.other-month > * { opacity: 0.5; }

.mg-daynum {
  align-self: flex-start;
  min-width: 22px;
  padding: 0 4px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  color: var(--text);
}
.mg-cell.cal-local .mg-daynum    { color: var(--cal-local); }
.mg-cell.cal-sunday .mg-daynum,
.mg-cell.cal-official .mg-daynum { color: var(--cal-sunday); }
.mg-cell.today .mg-daynum        { background: var(--primary); color: #fff; }

.mg-holiday {
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-holiday.official { color: var(--cal-official); }
.mg-holiday.local    { color: var(--cal-local); }

.mg-ev {
  min-width: 0;
  padding: 1px 4px;
  border-radius: 4px;
  border-left: 3px solid var(--ev-border);
  background: var(--ev-bg);
  color: var(--ev-text);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mg-more {
  align-self: flex-start;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--border);
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
}

/* Events πολλών ημερών / μετά τα μεσάνυχτα: η συνέχεια από/προς άλλη μέρα έχει ίσια άκρη
   (week grid: πάνω/κάτω · month: αριστερά/δεξιά). Ίδια χρώματα. */
.wg-shift-block.cont-before { border-top-left-radius: 0; border-top-right-radius: 0; }
.wg-shift-block.cont-after  { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mg-ev.cont-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mg-ev.cont-after  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Πλάτος κινητού: χωρίς οριζόντιο scroll — οι τίτλοι γίνονται χρωματιστές μπάρες. */
@media (max-width: 600px) {
  .mg-body { grid-auto-rows: minmax(64px, 1fr); }
  .mg-cell { padding: 2px; gap: 2px; }
  .mg-daynum { font-size: 0.75rem; min-width: 18px; line-height: 18px; padding: 0 2px; }
  .mg-holiday { font-size: 0.5625rem; }
  .mg-ev { height: 6px; padding: 0; border-left: 0; border-radius: 3px; background: var(--ev-border); }
  .mg-ev-text { display: none; }
  .mg-more { padding: 0 3px; font-size: 0.625rem; line-height: 14px; }
  .cal-view-toggle { margin-left: 0; }
}
/* ═══ /Calendar: αργίες + month view ═══════════════════════════════════════════ */

/* ═══ Public shell (δημόσιες σελίδες: layouts/public.php, partials/public-*.php, /js/public-shell.js) ═══════
   Tokens για ΟΛΕΣ τις δημόσιες σελίδες — το CSS κάθε σελίδας (public/css/public/<key>.css) χρησιμοποιεί αυτά,
   όχι δικά του χρώματα. Ίδια παλέτα με τη landing (--lp-*).
     --pub-ink / --pub-ink-soft      κείμενο / δευτερεύον κείμενο
     --pub-bg / --pub-card           φόντο σελίδας / κάρτας
     --pub-border                    περιγράμματα
     --pub-brand / --pub-brand-2     σκούρο μπλε (κουμπιά, τίτλοι) / μπλε (eyebrow, σύνδεσμοι)
     --pub-accent                    πορτοκαλί (κύριο CTA, ενεργό στοιχείο μενού)
     --pub-danger / --pub-success / --pub-warning  καταστάσεις
     --pub-radius / --pub-radius-sm  γωνίες κάρτας / μικρών στοιχείων
     --pub-shadow / --pub-shadow-lg  σκιές
     --pub-content-max               μέγιστο πλάτος περιεχομένου (.pub-page)
     --pub-gutter                    οριζόντιο padding περιεχομένου (16px στο κινητό)
     --pub-sidebar-w / --pub-topbar-h  διαστάσεις του shell
   Κοινές κλάσεις για σελίδες: .pub-page (container), .pub-page__head + .pub-eyebrow + .pub-lead (κεφαλίδα),
   .pub-card, .pub-btn (--accent / --ghost), .pub-muted, .pub-sr-only. Breakpoint κινητού: 900px. */
:root {
  --pub-ink:        #0f172a;
  --pub-ink-soft:   #475569;
  --pub-bg:         #f8fafc;
  --pub-card:       #ffffff;
  --pub-border:     #e2e8f0;
  --pub-brand:      #0f2742;
  --pub-brand-2:    #1e40af;
  --pub-accent:     #f59e0b;
  --pub-danger:     #dc2626;
  --pub-success:    #16a34a;
  --pub-warning:    #d97706;
  --pub-radius:     16px;
  --pub-radius-sm:  10px;
  --pub-shadow:     0 1px 2px rgba(15, 39, 66, 0.06), 0 4px 14px -6px rgba(15, 39, 66, 0.12);
  --pub-shadow-lg:  0 30px 60px -20px rgba(15, 39, 66, 0.18), 0 10px 30px -10px rgba(15, 39, 66, 0.08);
  --pub-content-max: 1120px;
  --pub-gutter:     28px;
  --pub-sidebar-w:  272px;
  --pub-topbar-h:   60px;
  --pub-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pub-body {
  background: var(--pub-bg);
  color: var(--pub-ink);
  font-family: var(--pub-font);
  -webkit-font-smoothing: antialiased;
}
.pub-skip {
  position: absolute; left: 12px; top: -60px; z-index: 400;
  padding: 10px 16px; border-radius: var(--pub-radius-sm);
  background: var(--pub-brand); color: #fff; font-weight: 600;
}
.pub-skip:focus { top: 12px; text-decoration: none; }
.pub-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Αριστερό μενού */
.pub-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
  width: var(--pub-sidebar-w);
  display: flex; flex-direction: column;
  background: var(--pub-brand);
  color: #fff;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.pub-sidebar__head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pub-brand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: #fff; font-weight: 700; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em;
}
.pub-brand:hover { color: #fff; text-decoration: none; }
.pub-brand img { flex: 0 0 auto; object-fit: contain; }
.pub-sidebar__close {
  display: none; flex: 0 0 auto;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer;
}
.pub-nav { padding: 8px 10px 4px; }
.pub-nav__label {
  margin: 14px 0 4px; padding: 0 12px;
  color: rgba(255, 255, 255, 0.5); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pub-nav__list { list-style: none; display: grid; gap: 2px; }
.pub-nav__link {
  display: flex; align-items: center; gap: 12px; min-height: 42px;
  padding: 9px 12px; border-radius: var(--pub-radius-sm);
  color: rgba(255, 255, 255, 0.82); font-size: 0.93rem; font-weight: 500; line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.pub-nav__link svg { flex: 0 0 auto; opacity: 0.8; }
.pub-nav__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }
.pub-nav__link.is-active {
  background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--pub-accent);
}
.pub-nav__link.is-active svg { color: var(--pub-accent); opacity: 1; }
.pub-sidebar a:focus-visible,
.pub-sidebar button:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 2px; }

.pub-banners { display: grid; gap: 10px; padding: 12px 16px 4px; }
.pub-banner { display: block; border-radius: var(--pub-radius-sm); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); }
.pub-banner img { width: 100%; height: auto; }
.pub-banner:hover img { opacity: 0.92; }

.pub-sidebar__foot {
  margin-top: auto; padding: 16px 18px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pub-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; }
.pub-legal a { color: rgba(255, 255, 255, 0.65); }
.pub-legal a:hover, .pub-legal a.is-active { color: #fff; }
.app-badges--pub { gap: 8px; margin-top: 14px; }
.app-badges--pub img { height: 36px; }

/* Στήλη περιεχομένου: topbar + main + footer */
.pub-frame { margin-left: var(--pub-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.pub-topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--pub-topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--pub-gutter);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.pub-burger {
  display: none; flex: 0 0 auto;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  margin-left: -8px; border: 0; border-radius: var(--pub-radius-sm);
  background: transparent; color: var(--pub-brand); cursor: pointer;
}
.pub-burger:hover { background: rgba(15, 39, 66, 0.06); }
.pub-topbar__brand {
  display: none; align-items: center; gap: 8px; min-width: 0;
  color: var(--pub-brand); font-weight: 700; font-size: 0.9rem;
}
.pub-topbar__brand:hover { text-decoration: none; }
.pub-topbar__brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-topbar__brand img { flex: 0 0 auto; object-fit: contain; }
.pub-topbar__label { color: var(--pub-ink-soft); font-weight: 600; font-size: 0.95rem; }
.pub-login {
  margin-left: auto; flex: 0 0 auto;
  display: inline-block; padding: 9px 20px; border-radius: 999px;
  background: var(--pub-brand); color: #fff; font-weight: 600; font-size: 0.93rem; white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(15, 39, 66, 0.25);
  transition: transform .15s ease, background .15s ease;
}
.pub-login:hover { background: #16335a; color: #fff; text-decoration: none; transform: translateY(-1px); }
.pub-topbar a:focus-visible, .pub-topbar button:focus-visible { outline: 2px solid var(--pub-brand-2); outline-offset: 2px; }

.pub-main { flex: 1; display: block; min-width: 0; }
.pub-main:focus { outline: none; }
.pub-footer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px var(--pub-gutter);
  background: #0f172a; color: #94a3b8; font-size: 0.85rem; text-align: center;
}
.pub-footer__links { list-style: none; display: none; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.pub-footer__links a { color: #cbd5e1; }

.pub-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(15, 23, 42, 0.5); }
.pub-overlay[hidden] { display: none; }
html.pub-lock, html.pub-lock body { overflow: hidden; }

/* Κοινά δομικά στοιχεία σελίδων */
.pub-page { max-width: var(--pub-content-max); margin: 0 auto; padding: 40px var(--pub-gutter) 64px; }
.pub-page__head { margin-bottom: 28px; }
.pub-page__head h1 {
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; letter-spacing: -0.02em;
  font-weight: 800; color: var(--pub-ink); margin: 0 0 10px;
}
.pub-eyebrow {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(30, 64, 175, 0.08); color: var(--pub-brand-2);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pub-lead { font-size: 1.05rem; line-height: 1.6; color: var(--pub-ink-soft); max-width: 70ch; }
.pub-muted { color: var(--pub-ink-soft); }
.pub-card {
  background: var(--pub-card); border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius); box-shadow: var(--pub-shadow); padding: 20px;
}
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pub-brand); color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pub-btn:hover { background: #16335a; color: #fff; text-decoration: none; transform: translateY(-1px); }
.pub-btn--accent { background: var(--pub-accent); color: #1a1a1a; box-shadow: 0 10px 30px -8px rgba(245, 158, 11, 0.6); }
.pub-btn--accent:hover { background: var(--pub-accent); color: #1a1a1a; }
.pub-btn--ghost { background: transparent; color: var(--pub-brand); box-shadow: inset 0 0 0 1.5px var(--pub-brand); }
.pub-btn--ghost:hover { background: rgba(15, 39, 66, 0.06); color: var(--pub-brand); }
.pub-btn:focus-visible { outline: 2px solid var(--pub-brand-2); outline-offset: 2px; }

/* Αρχική μέσα στο shell: δευτερεύον CTA του hero + σύντομο teaser εφαρμογής (λεπτομέρειες στο /mobile-app) */
.landing-hero__actions { flex-wrap: wrap; gap: 12px; }
.landing-hero__btn--ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.landing-hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.landing-teaser {
  padding: 72px var(--pub-gutter);
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border-top: 1px solid var(--pub-border);
  text-align: center;
  scroll-margin-top: var(--pub-topbar-h);
}
.landing-teaser__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.landing-teaser h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em;
  font-weight: 800; color: var(--pub-ink);
}
.landing-teaser p { font-size: 1.05rem; line-height: 1.6; color: var(--pub-ink-soft); }
.landing-teaser .landing-section__eyebrow { margin-bottom: 0; }
.landing-teaser .app-badges { justify-content: center; }

/* Desktop με στενή στήλη περιεχομένου (το μενού πιάνει 272px) */
@media (min-width: 900px) and (max-width: 1180px) {
  .pub-body .slide__text { padding: 40px 36px; }
}

/* Κινητό / στενό tablet: το μενού γίνεται drawer (public-shell.js) */
@media (max-width: 899.98px) {
  :root { --pub-gutter: 16px; }
  .pub-frame { margin-left: 0; }
  .pub-sidebar {
    width: min(86vw, 320px);
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .pub-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform .22s ease; }
  .pub-sidebar__close { display: inline-flex; }
  .pub-burger { display: inline-flex; }
  .pub-topbar__brand { display: flex; }
  .pub-topbar__label { display: none; }
  .pub-login { padding: 8px 16px; font-size: 0.88rem; }
  .pub-footer__links { display: flex; }
  .pub-page { padding-top: 28px; padding-bottom: 48px; }
}
@media (max-width: 420px) {
  .pub-topbar__brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-sidebar, .pub-sidebar.is-open { transition: none; }
}
/* ═══ /Public shell ═══════════════════════════════════════════════════════════════════════════════════════ */