/* ===== Base Reset / Layout ===== */
:root{
  --bg: #1b120b;
  --panel: rgba(40,30,20,.65);
  --panel-2: rgba(15,10,6,.65);
  --text: #f7f2e9;
  --muted: rgba(255,255,255,.7);
  --gold: #d6bd79;
  --accent: #2f6b32;
  --accent-2: #1d5f22; /* forest green for knob */
  --danger: #9f2f2f;
  --border: rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 50% -100px, #332317 0, #1b120b 55%);
  color: var(--text);
}

/* ===== Container/Header ===== */
/* The main container constrains content on larger screens while leaving
   room for the bottom navigation bar.  Additional responsive rules
   will override these values on smaller devices. */
.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px; /* bottom nav height (60px) + extra space */
}
.app-header h1 {
  margin: 8px 0 16px;
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(214,189,121,.25);
  text-align: center;
}

/* ===== Cards / Panels ===== */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.row-between { display:flex; justify-content:space-between; align-items:center; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.error { color: #ffb4b4; min-height: 1rem; }

h2, h3 { margin: 0 0 10px; }

/* ===== Buttons ===== */
.btn {
  background: linear-gradient(180deg, #644229, #52361f);
  color: #fff;
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.secondary-btn { background: linear-gradient(180deg, #3b2c1f, #2b2118); }
.danger-btn { background: linear-gradient(180deg, #7d2a2a, #5b1e1e); }
.small-btn { padding: 8px 10px; font-size: .9rem; }

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

/* Icon-sized buttons for habit actions */
.icon-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  padding: .35rem .45rem;
  margin-left: .25rem;
  border-radius: 50%;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.08); }
.danger-btn.icon-btn { color: #ffcccc; }

/* ===== Tabs / Auth forms ===== */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.auth-tabs button {
  padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(0,0,0,.25); color: #fff; cursor: pointer;
}
.auth-tabs .active { background: rgba(255,255,255,.08); }
.auth-form { display:grid; gap: 10px; }
.auth-form input {
  padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.18); color: #fff; outline: none;
}

/* ===== Progress Bar ===== */
.progress-bar {
  width: 100%; height: 12px; border-radius: 999px; overflow:hidden;
  background: #4b2e1f; margin: 10px 0 12px;
}
.progress {
  height: 100%;
  background: linear-gradient(90deg, #2f6b32, #3a7a3e);
  width: 0%; transition: width .25s ease;
}

/* ===== Hero ===== */
.hero-container { display:flex; justify-content:center; }
.hero-image {
  width: 65vw; max-width: 420px; min-width: 200px; height:auto;
  image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;
}

/* ===== Habits List ===== */
.habits { list-style: none; margin: 0; padding: 0; }

.habit-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Make checkbox a compact slider-style toggle */
.habit-item input[type="checkbox"]{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 44px; height: 24px; border-radius: 14px;
  background: rgba(255,255,255,.15);
  position: relative; outline: none; cursor: pointer;
  border: 1px solid rgba(0,0,0,.35);
  transition: background .2s ease;
}
.habit-item input[type="checkbox"]::after{
  content:""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #cfcfcf; transition: left .2s ease, background .2s ease;
}
.habit-item input[type="checkbox"]:checked{
  background: var(--accent);
}
.habit-item input[type="checkbox"]:checked::after{
  left: 22px;
  background: var(--accent-2); /* forest green knob when TRUE */
}

.habit-item span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Compact habit action buttons (use icon-btn class) */
.habit-item .btn { padding: 6px 10px; }

/* Add habit form */
.add-habit-form {
  display: grid; grid-template-columns: 1fr 110px auto; gap: 8px;
  margin-top: 10px;
}
.add-habit-form input{
  padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.18); color: #fff; outline: none;
}

/* ===== User Info ===== */
.user-info .user-top {
  display:flex; justify-content:space-between; align-items:flex-start; gap: 10px;
}
.user-greet p { margin: 2px 0; }
.perfect-days { margin: 8px 0 0; }

/* ===== Profile ===== */
.checkbox-row { display:flex; align-items:center; gap: 10px; }
select, input[type="time"]{
  padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.18); color: #fff; outline:none;
}
.tooltip {
  display:inline-flex; justify-content:center; align-items:center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  cursor: default;
}

/* ===== Tables (Admin) ===== */
.table-scroll { overflow:auto; max-height: 50vh; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.table thead th { position: sticky; top: 0; background: rgba(0,0,0,.2); backdrop-filter: blur(2px); }

/* ===== Debug FABs ===== */
.debug-fab {
  position: fixed; bottom: 16px; right: 16px; display:flex; flex-direction: column; gap: 8px;
}
.fab {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(180deg, #644229, #52361f);
  color: #fff; border: 1px solid var(--border);
  font-size: 22px; line-height: 1; font-weight: 700;
  cursor: pointer;
}

/* ===== Responsive ===== */
@media (max-width: 520px){
  .habit-item { grid-template-columns: auto 1fr auto auto; }
  .add-habit-form { grid-template-columns: 1fr 100px auto; }
  .user-info .user-top { flex-direction: column; align-items: stretch; }
}

/* ===== Friends Page ===== */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.friend-item {
  display: block;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== Metrics / Character Development ===== */
.metrics-list {
  margin-top: 8px;
}
.metric-item {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metric-title {
  font-weight: 600;
}
.metric-chart {
  width: 100%;
  height: 80px;
  margin-top: 4px;
}
.metric-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.metric-photo-grid img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.metric-update-form {
  margin-top: 6px;
  display: none; /* hidden until user opts to update */
}
.metric-update-form input[type="number"] {
  width: 80px;
  margin-right: 6px;
}
.metric-update-form input[type="file"] {
  margin-right: 6px;
}

/* Metric actions container holds the edit and delete icons on the right
   side of each metric header.  The icons are horizontally spaced and
   vertically centered. */
.metric-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Individual icon for update/delete actions.  Use consistent sizing and
   cursor pointer for interactivity.  The .due modifier applies a
   reddish tint to indicate that an update is overdue. */
.metric-action-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.metric-action-icon:hover {
  opacity: 1.0;
}
.metric-action-icon.due {
  filter: hue-rotate(-20deg) saturate(1.2) brightness(1.1);
}

/* ===== Bottom Navigation ===== */
/* Mobile-first bottom nav bar fixed to the bottom of the viewport. Uses
   flexbox to distribute nav items evenly. Each button displays an icon
   (from Font Awesome) and a label. The active state is styled via the
   .active class. */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #2a1a0d;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}

#bottom-nav .nav-item {
  flex: 1;
  background: none;
  border: none;
  color: #f5f5f5;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px 0;
}

#bottom-nav .nav-item i {
  /* Font Awesome icons are no longer used; reserve this selector for
     backward compatibility but do not apply any styling. */
  display: none;
}

/* New nav icon styles for image-based icons */
#bottom-nav .nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  object-fit: contain;
}

/* Hide the nav bar when the 'hidden' class is applied (e.g. on auth pages) */
#bottom-nav.hidden {
  display: none;
}

#bottom-nav .nav-item.active {
  color: #f5a623;
}

/* The bottom padding on the container is defined above.  Redundant
   definitions are removed to avoid conflicts. */

.friend-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.friend-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* allow name to ellipsize */
}

.friend-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  border: 1px solid rgba(255,255,255,.12);
}

.friend-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-meta {
  color: var(--muted);
  white-space: nowrap;
}

/* Search bar */
.search-container {
  display: flex;
  gap: 8px;
}
.search-container input[type="text"] {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.18);
  color: #fff;
  outline: none;
}

/* ========================================================================
   MOBILE FIRST
   These responsive rules optimise the layout for smaller devices.  When the
   screen width is 600px or less, content spans the full width and UI
   elements scale up for easier tapping. */
@media (max-width: 600px) {
  /* Allow the container to fill the width on small screens */
  .container {
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 80px; /* maintain nav space */
  }

  /* Adjust the headline size for the app title */
  .app-header h1 {
    font-size: 1.6rem;
  }

  /* Expand touch targets on buttons */
  .btn {
    padding: 12px 16px;
    font-size: 1rem;
  }
  .small-btn {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  .icon-btn {
    padding: 0.5rem 0.6rem;
    font-size: 1.35rem;
  }

  /* Make form fields a bit taller on mobile */
  .auth-form input,
  select,
  input[type="time"] {
    padding: 12px;
    font-size: 1rem;
  }

  /* Tighten habit list spacing and adjust add habit form layout */
  .habit-item {
    padding: 8px;
    grid-template-columns: auto 1fr auto auto;
  }
  .add-habit-form {
    grid-template-columns: 1fr 80px auto;
  }

  /* Hero image scales with viewport */
  .hero-image {
    width: 80vw;
    max-width: none;
  }

  /* Bottom nav label and icon sizes */
  #bottom-nav .nav-item {
    font-size: 0.8rem;
  }
  #bottom-nav .nav-icon {
    width: 26px;
    height: 26px;
  }
}