@charset "UTF-8";

/* ==========================================================================
   1. ΧΡΩΜΑΤΙΚΕΣ ΠΑΛΕΤΕΣ & CSS VARIABLES
   ========================================================================== */
:root {
  --app-bg: #f8fafc;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --accent-rose: #f43f5e;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
}

/* Σκοτεινή Λειτουργία (Dark Mode) */
.dark {
  --app-bg: #0b0f17;
  --card-bg: #151d2a;
  --card-border: #243042;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-light: #1e293b;
}

/* Νυχτερινό Κόκκινο Φως (Nursery Night Red Mode - Μηδενικό Μπλε Φως) */
.night-red {
  --app-bg: #090000 !important;
  --card-bg: #150202 !important;
  --card-border: #360707 !important;
  --text-main: #f87171 !important;
  --text-muted: #991b1b !important;
  --primary: #dc2626 !important;
  --primary-hover: #ef4444 !important;
  --primary-light: #200404 !important;
}

/* ==========================================================================
   2. ΒΑΣΙΚΟΙ ΚΑΝΟΝΕΣ & TYPOGRAPHY
   ========================================================================== */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--app-bg);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. ΔΟΜΙΚΑ ΣΤΟΙΧΕΙΑ & ΚΑΡΤΕΣ (CARDS & TILES)
   ========================================================================== */
.os-card {
  background-color: var(--card-bg) !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Πλακίδια Ήχων Ύπνου (Sound Machine Tiles) */
.sound-tile {
  background-color: var(--card-bg) !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: 18px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  user-select: none;
}

.sound-tile:hover {
  transform: translateY(-2px);
  border-color: #93c5fd !important;
}

.sound-tile:active {
  transform: scale(0.97);
}

.sound-tile.playing {
  border-color: var(--primary) !important;
  background-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Κουμπιά Οριζόντιας Πλοήγησης (Tabs) */
.nav-tab-btn {
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1.5px solid var(--card-border);
  background-color: var(--card-bg);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  user-select: none;
}

.nav-tab-btn:hover {
  border-color: var(--primary);
  color: var(--text-main);
}

.nav-tab-btn.active {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Ετικέτες Φίλτρων & Hashtag Pills */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  background-color: #f1f5f9;
  color: #334155;
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  transition: all 0.15s ease;
  user-select: none;
}

.dark .tag-pill {
  background-color: #1e293b;
  color: #cbd5e1;
  border-color: #334155;
}

.tag-pill:hover,
.tag-pill.selected {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* ==========================================================================
   4. ΚΥΚΛΙΚΑ ΓΡΑΦΗΜΑΤΑ ΠΡΟΟΔΟΥ (CIRCULAR PROGRESS RINGS)
   ========================================================================== */
.progress-ring__circle {
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* ==========================================================================
   5. MODALS & SCROLLBAR UTILITIES
   ========================================================================== */
.modal-overlay {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dark .modal-overlay {
  background: rgba(0, 0, 0, 0.85);
}

/* Απόκρυψη Scrollbar αλλά διατήρηση της κύλισης */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   6. ΚΑΝΟΝΕΣ NIGHT RED MODE OVERRIDES
   ========================================================================== */
body.night-red .bg-white,
body.night-red .bg-slate-50,
body.night-red .bg-slate-100,
body.night-red .bg-blue-50,
body.night-red .bg-rose-50,
body.night-red .bg-amber-50,
body.night-red .bg-emerald-50 {
  background-color: #150202 !important;
  border-color: #360707 !important;
  color: #f87171 !important;
}

body.night-red header {
  background-color: rgba(15, 2, 2, 0.95) !important;
  border-color: #360707 !important;
}

body.night-red input,
body.night-red select,
body.night-red textarea {
  background-color: #200404 !important;
  border-color: #4a0a0a !important;
  color: #fca5a5 !important;
}

body.night-red svg {
  stroke: #f87171 !important;
}

/* ==========================================================================
   7. ΕΚΤΥΠΩΣΗ & ΕΞΑΓΩΓΗ PDF (@MEDIA PRINT)
   ========================================================================== */
@media print {
  header,
  nav,
  #nav-tabs-container,
  button,
  .no-print,
  #toast-wrapper,
  #floating-sos {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
  }

  .tab-pane {
    display: block !important;
  }

  .os-card {
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    margin-bottom: 1.2rem !important;
    break-inside: avoid;
  }
}

/* ==========================================================================
   ΕΚΤΥΠΩΣΗ ΙΑΤΡΙΚΗΣ ΑΝΑΦΟΡΑΣ (ONE-PAGE A4 MEDICAL SUMMARY)
   ========================================================================== */
@media print {
  /* Απόκρυψη όλων των στοιχείων της εφαρμογής */
  body * {
    visibility: hidden;
  }
  
  /* Εμφάνιση ΜΟΝΟ του ιατρικού δελτίου */
  #pediatric-report-body,
  #pediatric-report-body * {
    visibility: visible;
  }

  #pediatric-report-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    display: block !important;
  }

  .no-print {
    display: none !important;
  }

  #pediatric-report-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10mm;
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }

  @page {
    size: A4 portrait;
    margin: 8mm;
  }
}