/* ============================================
   EVPERS — Personal Web App
   Open Water palette — with light/dark theming
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600&display=swap');

/* ── Dark theme (default) ── */
:root {
   --bg:             #1e2d3d;
   --bg-card:        #253848;
   --bg-nav:         #182636;
   --bg-hover:       #304858;
   --text:           #e8f4f4;
   --text-muted:     #80a8c0;
   --text-light:     #5a7a90;
   --accent:         #30d0c0;
   --accent-light:   #1a5a52;
   --accent-bg:      #1a3e3c;
   --border:         #3a5a70;
   --border-light:   #2a4a5e;
   --success:        #5ec47a;
   --danger:         #e06050;

   /* Semantic backgrounds (used in badges, icons, hover states) */
   --success-bg:     #1a3028;
   --success-border: #2a4838;
   --danger-bg:      #3a2028;
   --danger-border:  #5a3038;
   --info:           #6c8eff;
   --info-bg:        rgba(108,142,255,0.1);

   /* Login page gradient */
   --login-grad-inner: #243848;
   --login-grad-outer: #1e2d3d;

   /* Form control color-scheme */
   --color-scheme:   dark;

   /* Typography */
   --font-serif: 'Libre Baskerville', Georgia, serif;
   --font-sans:  'Source Sans 3', -apple-system, sans-serif;

   /* Spacing */
   --nav-width:    220px;
   --max-content:  740px;
}

/* ── Light theme (manual override) ── */
[data-theme="light"] {
   --bg:             #f0f4f7;
   --bg-card:        #ffffff;
   --bg-nav:         #e4ecf1;
   --bg-hover:       #dae4eb;
   --text:           #1a2e3c;
   --text-muted:     #5a7a8c;
   --text-light:     #94aab8;
   --accent:         #1a9a8e;
   --accent-light:   #a8e0d8;
   --accent-bg:      #e0f3f0;
   --border:         #c8d6e0;
   --border-light:   #dce6ec;
   --success:        #2e8a4a;
   --danger:         #d03828;

   --success-bg:     #e6f4ea;
   --success-border: #b8dcc4;
   --danger-bg:      #fce8e6;
   --danger-border:  #f0c0b8;
   --info:           #4a6ee0;
   --info-bg:        rgba(74,110,224,0.08);

   --login-grad-inner: #e8f0f5;
   --login-grad-outer: #f0f4f7;

   --color-scheme:   light;
}

/* ── Light theme (OS auto-detect) ── */
@media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) {
      --bg:             #f0f4f7;
      --bg-card:        #ffffff;
      --bg-nav:         #e4ecf1;
      --bg-hover:       #dae4eb;
      --text:           #1a2e3c;
      --text-muted:     #5a7a8c;
      --text-light:     #94aab8;
      --accent:         #1a9a8e;
      --accent-light:   #a8e0d8;
      --accent-bg:      #e0f3f0;
      --border:         #c8d6e0;
      --border-light:   #dce6ec;
      --success:        #2e8a4a;
      --danger:         #d03828;

      --success-bg:     #e6f4ea;
      --success-border: #b8dcc4;
      --danger-bg:      #fce8e6;
      --danger-border:  #f0c0b8;
      --info:           #4a6ee0;
      --info-bg:        rgba(74,110,224,0.08);

      --login-grad-inner: #e8f0f5;
      --login-grad-outer: #f0f4f7;

      --color-scheme:   light;
   }
}


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

html { font-size: 16px; overflow-x: hidden; }

body {
   font-family: var(--font-sans);
   color: var(--text);
   background: var(--bg);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

/* Soft ambient glow near the top of the page — like gentle overhead light.
   Plain (non-fixed) background on purpose: Android browsers handle both
   `background-attachment: fixed` and `position: fixed` (under the html
   overflow-x: hidden above) unreliably, so we avoid them entirely. This is
   foundational background CSS, so it renders everywhere. background-size caps
   the glow to a band near the top; below it shows the solid base color. */
body:not(.login-page) {
   background-image: radial-gradient(ellipse 120% 100% at 50% 0%, var(--login-grad-inner) 0%, transparent 70%);
   background-repeat: no-repeat;
   background-size: 100% 70vh;
}

/* ---- LOGIN PAGE ---- */
.login-page {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   padding: 2rem;
   background: var(--bg);
   background-image: radial-gradient(ellipse at 50% 50%, var(--login-grad-inner) 0%, var(--login-grad-outer) 70%);
}

.login-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 3rem 2.5rem;
   width: 100%;
   max-width: 400px;
   box-shadow: 0 4px 40px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.03) inset;
}

.login-card h1 {
   font-family: var(--font-serif);
   font-size: 1.75rem;
   font-weight: 700;
   margin-bottom: 0.25rem;
   color: var(--text);
}

.login-card .subtitle {
   color: var(--text-muted);
   font-size: 0.95rem;
   margin-bottom: 2rem;
}

/* ---- FORMS ---- */
.form-group {
   margin-bottom: 1.25rem;
}

.form-group label {
   display: block;
   font-size: 0.85rem;
   font-weight: 500;
   color: var(--text-muted);
   margin-bottom: 0.35rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 0.65rem 0.85rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   font-family: var(--font-sans);
   font-size: 1rem;
   color: var(--text);
   background: var(--bg);
   transition: border-color 0.15s, box-shadow 0.15s;
   color-scheme: var(--color-scheme);
}

.form-group input:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-bg);
}

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

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.65rem 1.5rem;
   border: none;
   border-radius: 6px;
   font-family: var(--font-sans);
   font-size: 0.95rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s;
   text-decoration: none;
}

.btn-primary {
   background: var(--accent);
   color: #0a1818;
   width: 100%;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary {
   background: transparent;
   color: var(--accent);
   border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--accent-bg); border-color: var(--accent); }

.btn-ghost {
   background: transparent;
   color: var(--text-muted);
   padding: 0.4rem 0.75rem;
   font-size: 0.875rem;
}
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); }

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

.alert {
   padding: 0.75rem 1rem;
   border-radius: 6px;
   font-size: 0.9rem;
   margin-bottom: 1rem;
   display: none;
}
.alert-error {
   background: var(--danger-bg);
   color: var(--danger);
   border: 1px solid var(--danger-border);
}
.alert-success {
   background: var(--success-bg);
   color: var(--success);
   border: 1px solid var(--success-border);
}

/* ---- APP LAYOUT ---- */
.app-layout {
   display: flex;
   min-height: 100vh;
}

.sidebar {
   width: var(--nav-width);
   background: var(--bg-nav);
   border-right: 1px solid var(--border);
   padding: 1.5rem 0;
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   z-index: 100;
}

.sidebar-brand {
   padding: 0 1.25rem 1.25rem;
   border-bottom: 1px solid var(--border);
   margin-bottom: 1rem;
}

.sidebar-brand h2 {
   font-family: var(--font-serif);
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--text);
}

.sidebar-brand .brand-sub {
   font-size: 0.8rem;
   color: var(--text-light);
}

.sidebar-nav {
   flex: 1;
   padding: 0 0.75rem;
   /* Scroll the nav, not the whole sidebar, so the footer stays visible
      on short windows */
   overflow-y: auto;
   min-height: 0;
}

.sidebar-brand,
.sidebar-footer { flex-shrink: 0; }

.nav-section {
   margin-bottom: 1.5rem;
}

.nav-section-title {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--text-light);
   padding: 0 0.5rem;
   margin-bottom: 0.35rem;
   font-weight: 600;
}

.nav-link {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.5rem 0.65rem;
   border-radius: 6px;
   font-size: 0.9rem;
   color: var(--text-muted);
   text-decoration: none;
   transition: all 0.1s;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link.active {
   background: var(--accent-bg);
   color: var(--accent);
   font-weight: 500;
   box-shadow: inset 0 0 0 1px var(--accent-light);
}
.nav-link.disabled { opacity: 0.3; pointer-events: none; }

.nav-icon {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

.sidebar-footer {
   padding: 1rem 1.25rem;
   border-top: 1px solid var(--border);
}

.sidebar-footer .user-name {
   font-size: 0.85rem;
   font-weight: 500;
   color: var(--text);
}

.sidebar-footer .footer-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 0.25rem;
}

.sidebar-footer .sign-out-link {
   font-size: 0.8rem;
   color: var(--text-light);
   text-decoration: none;
   cursor: pointer;
}
.sidebar-footer .sign-out-link:hover { color: var(--danger); }

/* Theme toggle */
.theme-toggle {
   display: flex;
   align-items: center;
   gap: 0.3rem;
   background: none;
   border: 1px solid var(--border);
   border-radius: 5px;
   padding: 0.2rem 0.5rem;
   font-family: var(--font-sans);
   font-size: 0.75rem;
   color: var(--text-light);
   cursor: pointer;
   transition: all 0.15s;
}
.theme-toggle:hover {
   border-color: var(--accent);
   color: var(--accent);
   background: var(--accent-bg);
}
.theme-toggle-icon { font-size: 0.85rem; line-height: 1; }
.theme-toggle-label { letter-spacing: 0.02em; }

/* ---- MOBILE USER BAR ---- */
.mobile-user-bar {
   display: none;
}

/* ---- MAIN CONTENT ---- */
.main-content {
   flex: 1;
   margin-left: var(--nav-width);
   padding: 2.5rem 3rem;
}

.page-header {
   max-width: var(--max-content);
   margin-bottom: 2rem;
}

.page-header h1 {
   font-family: var(--font-serif);
   font-size: 1.65rem;
   font-weight: 700;
   margin-bottom: 0.25rem;
   color: var(--text);
}

.page-header .page-desc {
   color: var(--text-muted);
   font-size: 0.95rem;
}

.content-area {
   max-width: var(--max-content);
}

/* ---- JOURNAL EDITOR ---- */
.journal-date-bar {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.journal-date-bar .date-display {
   font-family: var(--font-serif);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text);
}

.journal-date-bar input[type="date"] {
   padding: 0.4rem 0.6rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   font-family: var(--font-sans);
   font-size: 0.9rem;
   color: var(--text);
   background: var(--bg-card);
   color-scheme: var(--color-scheme);
}

.editor-container {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}

.editor-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.65rem 1.25rem;
   background: var(--bg-nav);
   border-bottom: 1px solid var(--border);
   font-size: 0.85rem;
   color: var(--text-muted);
}

.word-count { font-variant-numeric: tabular-nums; }

.word-count .count-number {
   font-weight: 600;
   color: var(--text);
   font-size: 1rem;
}

.word-count.goal-met .count-number { color: var(--success); }

.save-status {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.825rem;
}

.save-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--text-light);
}
.save-dot.saved { background: var(--success); }
.save-dot.saving { background: var(--accent); animation: pulse 1s infinite; }

@keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
}

.editor-textarea {
   width: 100%;
   min-height: 65vh;
   padding: 2rem 2.5rem;
   border: none;
   resize: vertical;
   font-family: var(--font-serif);
   font-size: 1.05rem;
   line-height: 1.85;
   color: var(--text);
   background: var(--bg-card);
   caret-color: var(--accent);
}
.editor-textarea:focus { outline: none; }
.editor-textarea::placeholder { color: var(--text-light); }

/* ---- CALENDAR ---- */
.history-controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
   gap: 1rem;
}

.month-nav {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.month-nav .month-label {
   font-family: var(--font-serif);
   font-size: 1.1rem;
   font-weight: 700;
   min-width: 160px;
   text-align: center;
   color: var(--text);
}

.search-box {
   position: relative;
}

.search-box input {
   padding: 0.5rem 0.75rem 0.5rem 2.25rem;
   border: 1px solid var(--border);
   border-radius: 6px;
   font-family: var(--font-sans);
   font-size: 0.9rem;
   width: 260px;
   background: var(--bg-card);
   color: var(--text);
}
.search-box input:focus { outline: none; border-color: var(--accent); }
.search-box input::placeholder { color: var(--text-light); }

.search-box .search-icon {
   position: absolute;
   left: 0.65rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-light);
   width: 16px;
   height: 16px;
}

.calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 4px;
   margin-bottom: 2rem;
}

.calendar-header {
   text-align: center;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-light);
   padding: 0.5rem 0;
}

.calendar-day {
   aspect-ratio: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   font-size: 0.85rem;
   color: var(--text-light);
   cursor: default;
   position: relative;
}

.calendar-day.has-entry {
   background: var(--accent-bg);
   color: var(--accent);
   font-weight: 500;
   cursor: pointer;
   border: 1px solid var(--accent-light);
}
.calendar-day.has-entry:hover {
   background: var(--bg-hover);
   border-color: var(--accent);
}

.calendar-day.today {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
}

.calendar-day .day-words {
   font-size: 0.6rem;
   color: var(--text-light);
   margin-top: 1px;
}
.calendar-day.has-entry .day-words { color: var(--accent); opacity: 0.6; }

.calendar-day.empty { visibility: hidden; }

/* ---- SEARCH RESULTS ---- */
.search-results {
   display: none;
}

.search-results.active { display: block; }

.search-result-item {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1.25rem 1.5rem;
   margin-bottom: 0.75rem;
   cursor: pointer;
   transition: border-color 0.15s;
}
.search-result-item:hover { border-color: var(--accent); }

.search-result-date {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--accent);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   margin-bottom: 0.35rem;
}

.search-result-preview {
   font-size: 0.9rem;
   color: var(--text-muted);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.search-result-preview mark {
   background: var(--accent-bg);
   color: var(--accent);
   padding: 0.1em 0.2em;
   border-radius: 2px;
}

/* ---- STATS BAR ---- */
.stats-bar {
   display: flex;
   gap: 1.5rem;
   margin-bottom: 2rem;
   flex-wrap: wrap;
}

.stat-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem 1.5rem;
   flex: 1;
   min-width: 120px;
}

.stat-value {
   font-family: var(--font-serif);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--text);
}

.stat-label {
   font-size: 0.8rem;
   color: var(--text-muted);
   margin-top: 0.15rem;
}

/* ---- ENTRY LIST ---- */
.entry-list-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.85rem 1rem;
   border-bottom: 1px solid var(--border);
   text-decoration: none;
   color: var(--text);
   transition: background 0.1s;
}
.entry-list-item:hover { background: var(--bg-hover); }
.entry-list-item:last-child { border-bottom: none; }

.entry-list-date {
   font-size: 0.825rem;
   font-weight: 600;
   color: var(--accent);
   white-space: nowrap;
   min-width: 90px;
}

.entry-list-preview {
   font-size: 0.875rem;
   color: var(--text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
}

.entry-list-words {
   font-size: 0.8rem;
   color: var(--text-light);
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
}

/* ---- DASHBOARD ---- */
.dashboard-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
}

.dash-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 1.75rem;
}

.dash-card h3 {
   font-family: var(--font-serif);
   font-size: 1.05rem;
   margin-bottom: 1rem;
   color: var(--text);
}

.dash-card-full { grid-column: 1 / -1; }

/* ---- PLACEHOLDER ---- */
.placeholder-card {
   background: var(--bg-card);
   border: 1px dashed var(--border);
   border-radius: 10px;
   padding: 3rem 2rem;
   text-align: center;
   color: var(--text-muted);
}

.placeholder-card .placeholder-icon {
   font-size: 2.5rem;
   margin-bottom: 0.75rem;
   opacity: 0.3;
}

.placeholder-card h3 {
   font-family: var(--font-serif);
   font-size: 1.1rem;
   color: var(--text-muted);
   margin-bottom: 0.35rem;
}

/* ---- LOADING ---- */
.loading-spinner {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem;
   color: var(--text-light);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
   .sidebar {
      width: 100%;
      position: fixed;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      flex-direction: row;
      padding: 0;
      border-right: none;
      border-top: 1px solid var(--border);
      z-index: 100;
      background: var(--bg-nav);
      padding-bottom: env(safe-area-inset-bottom);
   }

   .sidebar-brand, .sidebar-footer, .nav-section-title { display: none; }

   .sidebar-nav {
      display: flex;
      justify-content: safe center;
      gap: 0.15rem;
      padding: 0.5rem;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;            /* Firefox */
   }
   .sidebar-nav::-webkit-scrollbar { display: none; }  /* WebKit */

   .nav-section { margin: 0; display: contents; }

   .nav-link {
      flex: 0 0 auto;
      flex-direction: column;
      font-size: 0.7rem;
      gap: 0.2rem;
      padding: 0.5rem;
      min-width: 4.25rem;
      white-space: nowrap;
   }

   .nav-link.disabled { display: none; }

   .main-content {
      margin-left: 0;
      padding: 1.5rem 1.25rem 5rem;
      max-width: 100vw;
      overflow-x: hidden;
   }

   /* Mobile user bar */
   .mobile-user-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 0.25rem;
      margin-bottom: 0.75rem;
      border-bottom: 1px solid var(--border-light);
   }
   .mobile-user-name {
      font-size: 0.8rem;
      color: var(--text-muted);
      font-weight: 500;
   }
   .mobile-bar-right {
      display: flex;
      align-items: center;
      gap: 0.75rem;
   }
   .mobile-sign-out {
      font-size: 0.8rem;
      color: var(--text-light);
      text-decoration: none;
      cursor: pointer;
   }
   .mobile-sign-out:hover { color: var(--danger); }

   .dashboard-grid { grid-template-columns: 1fr; }

   .editor-textarea { padding: 1.25rem; min-height: 50vh; }

   .history-controls { flex-direction: column; align-items: stretch; }
   .search-box input { width: 100%; }

   /* Journal date bar — stack on mobile */
   .journal-date-bar {
      flex-wrap: wrap;
      gap: 0.5rem;
   }
   .journal-date-bar .date-display {
      width: 100%;
      order: -1;
      font-size: 0.95rem;
   }
   /* Hide the flex spacer on mobile */
   .journal-date-bar > div[style*="flex"] {
      display: none;
   }
   .journal-date-bar .btn-ghost {
      padding: 0.35rem 0.6rem;
      font-size: 0.8rem;
   }

   /* Content area overflow guard */
   .content-area {
      max-width: 100%;
      overflow-x: hidden;
   }
}