/* ── NutriRecord — Design Tokens ─────────────────────────────────────────
   Unified για dietitian + portal. Φορτώνεται σε base.html, portal_base.html
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --nr-primary:        #1a6b45;
  --nr-primary-mid:    #2d8a5e;
  --nr-primary-light:  #e9f5ef;
  --nr-primary-dark:   #134f33;
  --nr-success:        #16a34a;
  --nr-success-bg:     #dcfce7;
  --nr-success-border: #86efac;
  --nr-warning:        #ca8a04;
  --nr-warning-bg:     #fef9c3;
  --nr-warning-border: #fde047;
  --nr-danger:         #dc2626;
  --nr-danger-bg:      #fee2e2;
  --nr-danger-border:  #fca5a5;
  --nr-info:           #1d4ed8;
  --nr-info-bg:        #dbeafe;
  --nr-info-border:    #93c5fd;
  --nr-gray-50:        #f8fafc;
  --nr-gray-100:       #f1f5f9;
  --nr-gray-200:       #e2e8f0;
  --nr-gray-400:       #94a3b8;
  --nr-gray-600:       #475569;
  --nr-gray-700:       #334155;
  --nr-surface:        #ffffff;
  --nr-surface-alt:    #f8fafc;
  --nr-border:         #e2e8f0;
  --nr-text:           #1e293b;
  --nr-text-secondary: #475569;
  --nr-text-muted:     #64748b;
  --nr-radius-sm:      6px;
  --nr-radius-md:      8px;
  --nr-radius-lg:      12px;
  --nr-font:           'Inter', system-ui, sans-serif;
  /* Aliases για backward compat */
  --primary:           #1a6b45;
  --primary-light:     #e9f5ef;
  --primary-dark:      #134f33;
  --primary-mid:       #2d8a5e;
  --border:            #e2e8f0;
  --surface:           #ffffff;
  --surface-alt:       #f8fafc;
  --text-primary:      #1e293b;
  --text-secondary:    #475569;
  --muted:             #64748b;
  --gray-50:           #f8fafc;
  --gray-600:          #475569;
  --gray-700:          #334155;
}

/* ── Spinner ─────────────────────────────────────────────────────────── */
.nr-spinner{display:inline-block;border:2px solid var(--nr-gray-200);
  border-top-color:var(--nr-primary);border-radius:50%;
  animation:nr-spin .7s linear infinite;flex-shrink:0;width:20px;height:20px}
.nr-spinner.sm{width:16px;height:16px;border-width:1.5px}
.nr-spinner.lg{width:28px;height:28px;border-width:3px}
@keyframes nr-spin{to{transform:rotate(360deg)}}
.nr-loading-state{display:flex;align-items:center;justify-content:center;
  gap:.6rem;padding:2rem;color:var(--nr-text-muted);font-size:.88rem}

/* ── Badge ─────────────────────────────────────────────────────────────── */
.nr-badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:999px;
  font-weight:500;white-space:nowrap;border:.5px solid transparent}
.nr-badge.green {background:var(--nr-success-bg);color:#166534;border-color:var(--nr-success-border)}
.nr-badge.amber {background:var(--nr-warning-bg);color:#854d0e;border-color:var(--nr-warning-border)}
.nr-badge.red   {background:var(--nr-danger-bg); color:#991b1b;border-color:var(--nr-danger-border)}
.nr-badge.blue  {background:var(--nr-info-bg);   color:#1e40af;border-color:var(--nr-info-border)}
.nr-badge.gray  {background:var(--nr-gray-100);  color:#374151;border-color:var(--nr-gray-200)}
.nr-badge.purple{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.nr-progress{height:6px;background:var(--nr-gray-100);border-radius:3px;overflow:hidden}
.nr-progress.sm{height:4px}.nr-progress.lg{height:10px}
.nr-progress-fill{height:100%;border-radius:3px;background:var(--nr-success);transition:width .4s ease}
.nr-progress-fill.amber{background:var(--nr-warning)}
.nr-progress-fill.red  {background:var(--nr-danger)}
.nr-progress-fill.blue {background:var(--nr-info)}

/* ── Flash ──────────────────────────────────────────────────────────────── */
.nr-flash{padding:.7rem 1rem;border-radius:var(--nr-radius-md);
  font-size:.84rem;margin-bottom:1rem;border:.5px solid transparent}
.nr-flash.success{background:var(--nr-success-bg);color:#15803d;border-color:var(--nr-success-border)}
.nr-flash.danger {background:var(--nr-danger-bg); color:#be123c;border-color:var(--nr-danger-border)}
.nr-flash.warning{background:var(--nr-warning-bg);color:#92400e;border-color:var(--nr-warning-border)}
.nr-flash.info   {background:var(--nr-info-bg);   color:#1d4ed8;border-color:var(--nr-info-border)}

/* ── Card ───────────────────────────────────────────────────────────────── */
.nr-card{background:var(--nr-surface);border:.5px solid var(--nr-border);
  border-radius:var(--nr-radius-lg);padding:.9rem 1rem}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.nr-empty{text-align:center;padding:2.5rem 1rem;color:var(--nr-text-muted);font-size:.88rem}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print{.no-print{display:none!important}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile First
   Breakpoints: xs<480 | sm<640 | md<768 | lg<1024
═══════════════════════════════════════════════════════════ */

/* Viewport meta — ensured via base.html */

/* ── Topbar responsive ─────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 200; }

.topbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: .5rem;
  background: none;
  border: none;
  margin-left: auto;
}
.topbar-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: all .25s;
}

/* Mobile nav overlay */
.topbar-right {
  transition: transform .25s ease, opacity .25s ease;
}

/* ── Page wrap ─────────────────────────────────────────── */
.page-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* ── Tables responsive ─────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Cards & grids ─────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

/* ══════════════════════════════════════════════════════════
   TABLET  (max-width: 1024px)
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .topbar-appname span { display: none; }
  .topbar-pill { display: none; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  (max-width: 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Topbar */
  .topbar { padding: .5rem 1rem; }
  .topbar-brand { flex: 1; }
  .topbar-appname { display: none; }

  .topbar-hamburger { display: flex; }

  .topbar-right {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 199;
    gap: .25rem;
    border-top: 2px solid var(--primary);
  }
  .topbar-right.open { display: flex; }

  .topbar-link {
    padding: .7rem 1rem;
    border-radius: 8px;
    font-size: .92rem;
    width: 100%;
    box-sizing: border-box;
  }
  .topbar-link:hover { background: var(--gray-50); }
  .topbar-divider { display: none; }

  /* Page */
  .page-wrap { padding: 0 .75rem; }
  .page-hdr { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .page-hdr-actions { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
  .page-hdr-actions .btn { flex: 1; min-width: 120px; justify-content: center; }

  /* Tables */
  .data-table { font-size: .82rem; }
  .data-table th, .data-table td { padding: .5rem .6rem; }

  /* Stat cards */
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 1rem; }
  .stat-val { font-size: 1.6rem; }

  /* Alerts */
  .alert { font-size: .85rem; padding: .6rem .9rem; }

  /* Buttons */
  .btn { font-size: .85rem; }

  /* Forms */
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ══════════════════════════════════════════════════════════
   SMALL MOBILE  (max-width: 480px)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }

  /* Hide less important table columns */
  .data-table .hide-xs { display: none; }

  .page-hdr-actions .btn { font-size: .8rem; padding: .4rem .7rem; }
}