/* ============================================================
   Coffee Chat — shared stylesheet
   A warm, cozy "coffee shop" visual language for a mentorship app.
   ============================================================ */

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

/* ---------- Design tokens ---------- */
:root{
  /* brand palette (given) */
  --coffee-primary:   #906339;
  --coffee-taupe:      #c6b6a7;
  --coffee-caramel:    #eab17a;
  --coffee-espresso:   #63411c;

  /* derived neutrals, warm-tinted */
  --cream-bg:     #faf3ea;
  --cream-card:   #fffaf3;
  --cream-flat:   #f1e6d8;
  --ink:          #3b2a1a;
  --ink-soft:     #7a6a58;
  --white:        #ffffff;
  --border-soft:  #e6d8c6;

  /* status colors, kept warm so they don't fight the palette */
  --success:  #6f8f5b;
  --success-bg: #eef3e8;
  --warn:     #c9762f;
  --warn-bg:  #fbf0e2;
  --danger:   #b3452f;
  --danger-bg:#fbe8e2;

  /* type */
  --font-display: 'Fredoka', ui-rounded, sans-serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* radius + shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-soft: 0 4px 18px rgba(99,65,28,0.10);
  --shadow-lift: 0 14px 34px rgba(99,65,28,0.18);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--cream-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--coffee-primary); text-decoration:none; }
a:hover{ color: var(--coffee-espresso); }
button{ font-family: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--coffee-espresso);
  margin: 0 0 .4em;
  font-weight:600;
  line-height:1.15;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size: 1.3rem; }
p{ margin:0 0 1em; }
.muted{ color: var(--ink-soft); }
:focus-visible{ outline: 3px solid var(--coffee-caramel); outline-offset:2px; border-radius:4px; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }
.container-narrow{ width:100%; max-width:640px; margin:0 auto; padding:0 24px; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-sm{ gap:8px; } .gap-md{ gap:16px; } .gap-lg{ gap:28px; }
.section{ padding: 56px 0; }
.hidden{ display:none !important; }
.text-center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:700; font-size:0.95rem;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary{ background: var(--coffee-primary); color:#fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover{ background: var(--coffee-espresso); color:#fff; }
.btn-secondary{ background: var(--coffee-caramel); color: var(--coffee-espresso); }
.btn-secondary:hover{ background:#e2a066; }
.btn-outline{ background: transparent; color: var(--coffee-espresso); border-color: var(--coffee-taupe); }
.btn-outline:hover{ background: var(--cream-flat); border-color: var(--coffee-primary); }
.btn-ghost{ background:transparent; color: var(--coffee-primary); border-color:transparent; padding:8px 12px; }
.btn-ghost:hover{ background: var(--cream-flat); }
.btn-danger{ background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover{ background:#f3d3c8; }
.btn-sm{ padding:8px 16px; font-size:0.85rem; }
.btn-lg{ padding:15px 32px; font-size:1.05rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:0.88rem; color:var(--coffee-espresso); margin-bottom:6px; }
.field .hint{ font-size:0.8rem; color:var(--ink-soft); margin-top:4px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search],
textarea, select{
  width:100%;
  font-family: var(--font-body);
  font-size:0.96rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ resize:vertical; min-height:90px; }
input::placeholder, textarea::placeholder{ color: var(--ink-soft); opacity: 1; }
input:focus, textarea:focus, select:focus{
  border-color: var(--coffee-primary);
  box-shadow: 0 0 0 3px rgba(144,99,57,0.15);
  outline:none;
}
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23906339' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:36px; }
.error-text{ color: var(--danger); font-size:0.82rem; margin-top:6px; display:none; }
.field.has-error input, .field.has-error textarea{ border-color: var(--danger); }
.field.has-error .error-text{ display:block; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--ink-soft); }
.checkbox-row input{ width:auto; margin-top:3px; }

/* tag / chip input */
.tag-input-wrap{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:1.5px solid var(--border-soft); border-radius:var(--r-sm); padding:10px 12px; background:#fff;
}
.tag-input-wrap:focus-within{ border-color: var(--coffee-primary); box-shadow:0 0 0 3px rgba(144,99,57,0.15); }
.tag-input-wrap input{ border:none; flex:1; min-width:120px; padding:4px; box-shadow:none !important; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--cream-flat); color: var(--coffee-espresso);
  border-radius: var(--r-pill); padding:5px 10px 5px 12px; font-size:0.82rem; font-weight:700;
}
.chip button{ background:none; border:none; color:var(--coffee-espresso); cursor:pointer; font-size:0.95rem; line-height:1; opacity:.6; padding:0; }
.chip button:hover{ opacity:1; }

/* ---------- Stamp tags (signature element) ----------
   Interest / expertise tags styled like a coffee loyalty-card stamp. */
.tag-stamp{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  border:1.5px dashed var(--coffee-primary);
  border-radius: var(--r-pill);
  background: rgba(234,177,122,0.18);
  color: var(--coffee-espresso);
  font-family: var(--font-body); font-weight:800; font-size:0.76rem;
  letter-spacing:0.02em; text-transform:uppercase;
}
.tag-stamp.lg{ font-size:0.85rem; padding:8px 16px; text-transform:none; }

/* ---------- Nav ---------- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  max-width:1120px; margin:0 auto;
}
.nav-brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:700; font-size:1.2rem;
  color: var(--coffee-espresso);
}
.nav-brand svg{ color: var(--coffee-primary); }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-link{
  font-weight:700; font-size:0.92rem; color: var(--ink-soft);
  padding:8px 14px; border-radius: var(--r-pill);
}
.nav-link:hover{ color: var(--coffee-espresso); background: var(--cream-flat); }
.nav-link.active{ color: var(--coffee-espresso); background: var(--coffee-taupe); }
.nav-user{ display:flex; align-items:center; gap:12px; }
.nav-guest{ margin-left:auto; }
.avatar-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background: var(--coffee-espresso); color:#fff;
  font-weight:700; font-size:0.85rem; font-family: var(--font-display);
}
.avatar-badge .mentor-avatar{
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.nav-shell{ border-bottom:1.5px solid var(--border-soft); background: rgba(255,250,243,0.7); backdrop-filter: blur(6px); position:sticky; top:0; z-index:50; }

@media (max-width: 760px){
  .site-nav{ flex-wrap:wrap; gap:10px; }
  .nav-links{ order:3; width:100%; justify-content:center; flex-wrap:wrap; }
}

/* ---------- Footer ---------- */
.site-footer{ padding:32px 24px 46px; text-align:center; color: var(--ink-soft); font-size:0.85rem; }
.site-footer a.admin-link{ color: var(--border-soft); font-size:0.75rem; }
.site-footer a.admin-link:hover{ color: var(--ink-soft); }

/* ---------- Cards ---------- */
.card{
  background: var(--cream-card);
  border:1.5px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.card-flat{ background: var(--cream-card); border:1.5px solid var(--border-soft); border-radius: var(--r-md); padding:20px; }

/* mentor / result card */
.mentor-card{
  background: var(--cream-card);
  border:1.5px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding:22px;
  display:flex; flex-direction:column; gap:12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mentor-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.mentor-card .mentor-head{ display:flex; gap:14px; align-items:center; }
.mentor-card .mentor-avatar{ width:52px; height:52px; border-radius:50%; background: var(--coffee-caramel); color: var(--coffee-espresso); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; flex-shrink:0; }
.mentor-card .mentor-name{ font-family:var(--font-display); font-weight:600; color:var(--coffee-espresso); font-size:1.05rem; }
.mentor-card .mentor-role{ font-size:0.86rem; color: var(--ink-soft); }
.mentor-card .tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.mentor-card .mentor-bio{ font-size:0.88rem; color:var(--ink-soft); }

.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px; }

/* ---------- Badges / status pills ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius: var(--r-pill); }
.badge-active{ background: var(--success-bg); color: var(--success); }
.badge-warned{ background: var(--warn-bg); color: var(--warn); }
.badge-banned{ background: var(--danger-bg); color: var(--danger); }
.badge-role{ background: var(--cream-flat); color: var(--coffee-espresso); }

/* ---------- Alerts / toasts ---------- */
.alert{ border-radius: var(--r-md); padding:14px 16px; font-size:0.88rem; margin-bottom:16px; border:1.5px solid transparent; }
.alert-success{ background: var(--success-bg); color:#3f5a30; border-color:#cfe0c0; }
.alert-warn{ background: var(--warn-bg); color:#8a4c1a; border-color:#f0d3ae; }
.alert-danger{ background: var(--danger-bg); color:#7c2d18; border-color:#f0c1ae; }
.toast-stack{ position:fixed; top:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:10px; max-width:320px; }
.toast{ background: var(--coffee-espresso); color:#fff; padding:12px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-lift); font-size:0.86rem; animation: toast-in .2s ease; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Auth card ---------- */
.auth-wrap{ min-height:calc(100vh - 90px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card{ width:100%; max-width:440px; }
.role-toggle, .mode-toggle{ display:flex; background: var(--cream-flat); border-radius: var(--r-pill); padding:4px; margin-bottom:22px; }
.role-toggle button, .mode-toggle button{
  flex:1; border:none; background:transparent; padding:10px; border-radius: var(--r-pill);
  font-weight:800; font-size:0.85rem; color: var(--ink-soft); cursor:pointer; transition: all .15s ease;
}
.role-toggle button.active, .mode-toggle button.active{ background: var(--coffee-primary); color:#fff; box-shadow: var(--shadow-soft); }

/* ---------- Hero (index page) ---------- */
.hero{ position:relative; padding: 70px 0 40px; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%;
  border: 40px solid var(--coffee-caramel); opacity:0.18; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-160px; left:-140px; width:340px; height:340px; border-radius:50%;
  border: 30px solid var(--coffee-primary); opacity:0.10; pointer-events:none;
}
.hero-inner{ position:relative; max-width:680px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:0.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--coffee-primary); margin-bottom:14px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

.how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }
.how-step{ text-align:left; }
.how-step .num{ font-family: var(--font-display); font-size:2rem; color: var(--coffee-caramel); -webkit-text-stroke: 1.5px var(--coffee-espresso); }
@media (max-width:760px){ .how-steps{ grid-template-columns:1fr; } .hero::before,.hero::after{ display:none; } }

/* ---------- Dashboard ---------- */
.welcome-banner{ background: linear-gradient(120deg, var(--coffee-primary), var(--coffee-espresso)); color:#fff; border-radius: var(--r-lg); padding:32px; margin-bottom:28px; }
.welcome-banner h2{ color:#fff; }
.welcome-banner p{ color: rgba(255,255,255,0.85); margin-bottom:0; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin: 24px 0; }
.stat-card{ background: var(--cream-card); border:1.5px solid var(--border-soft); border-radius: var(--r-md); padding:18px; text-align:center; }
.stat-card .num{ font-family:var(--font-display); font-size:1.8rem; color:var(--coffee-espresso); }
.stat-card .label{ font-size:0.8rem; color:var(--ink-soft); }
.match-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; background: var(--cream-flat); border:1.5px dashed var(--coffee-caramel); border-radius: var(--r-md); padding:16px 18px; margin-bottom:12px; }

/* ---------- Dashboard quick actions ---------- */
.quick-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin: 26px 0 8px; }
.action-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background: var(--cream-card); border:1.5px solid var(--border-soft); border-radius: var(--r-lg);
  padding:20px; text-align:left; cursor:pointer; width:100%;
  font-family: var(--font-body); appearance:none; -webkit-appearance:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.action-tile:hover{ transform:translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--coffee-primary); }
.action-tile .tile-icon{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--coffee-caramel); font-size:1.15rem; flex-shrink:0;
}
.action-tile .tile-title{ font-family:var(--font-display); font-weight:600; color:var(--coffee-espresso); font-size:1rem; }
.action-tile .tile-sub{ font-size:0.8rem; color:var(--ink-soft); }

/* quick search embedded in the welcome banner */
.dashboard-search{ display:flex; gap:8px; margin-top:18px; max-width:440px; }
.dashboard-search input{ flex:1; border:none; }
.dashboard-search button{ flex-shrink:0; }

/* Conversation-starter / icebreaker card */
.starter-card{
  border:1.5px dashed var(--coffee-caramel); border-radius: var(--r-lg); padding:26px 22px;
  background:
    repeating-linear-gradient(135deg, rgba(234,177,122,0.10) 0 12px, rgba(234,177,122,0.16) 12px 24px);
  text-align:center;
}
.starter-card .starter-question{ font-family:var(--font-display); font-size:1.1rem; color:var(--coffee-espresso); margin:12px 0 18px; line-height:1.4; }

/* recipient picker (new message modal) */
.pick-search{ width:100%; margin-bottom:14px; }
.pick-list{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.pick-list-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius: var(--r-md);
  border:1.5px solid var(--border-soft); cursor:pointer; background:#fff; text-align:left; width:100%;
  font-family: var(--font-body); appearance:none; -webkit-appearance:none;
  transition: border-color .15s ease, background-color .15s ease;
}
.pick-list-item:hover{ border-color:var(--coffee-primary); background:var(--cream-flat); }
.pick-list-item .pick-name{ font-weight:800; color:var(--coffee-espresso); font-size:0.92rem; }
.pick-list-item .pick-sub{ font-size:0.78rem; color:var(--ink-soft); }

/* ---------- Search page ---------- */
.filter-bar{ background: var(--cream-card); border:1.5px solid var(--border-soft); border-radius: var(--r-lg); padding:20px; margin-bottom:26px; }
.filter-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:14px; }
.filter-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.filter-chip{ border:1.5px solid var(--coffee-taupe); background:#fff; color: var(--ink-soft); border-radius: var(--r-pill); padding:6px 14px; font-size:0.8rem; font-weight:700; cursor:pointer; }
.filter-chip.active{ background: var(--coffee-primary); color:#fff; border-color: var(--coffee-primary); }
@media (max-width:760px){ .filter-grid{ grid-template-columns:1fr; } }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background: rgba(59,42,26,0.45); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal{ background:#fff; border-radius: var(--r-lg); padding:30px; max-width:560px; width:100%; max-height:86vh; overflow-y:auto; box-shadow: var(--shadow-lift); position:relative; }
.modal-close{ position:absolute; top:16px; right:16px; background:var(--cream-flat); border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; color: var(--coffee-espresso); }

/* ---------- Messages / chat ---------- */
.chat-layout{ display:grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap:22px; min-height: min(72vh, 720px); height: clamp(480px, 72vh, 760px); }
.chat-list{ background: var(--cream-card); border:1.5px solid var(--border-soft); border-radius: var(--r-lg); overflow-y:auto; padding:10px; min-height:0; }
.chat-list-header{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:4px 4px 10px; color:var(--coffee-espresso); font-size:0.82rem; font-weight:800; }
.chat-list-menu-button{ border:0; background:transparent; color:var(--coffee-primary); font-size:1.15rem; line-height:1; padding:2px 5px; cursor:pointer; }
.chat-list-menu{ position:absolute; top:30px; right:0; z-index:5; background:#fff; border:1.5px solid var(--border-soft); border-radius:var(--r-md); box-shadow:var(--shadow-soft); padding:4px; }
.chat-list-menu button{ border:0; background:transparent; color:var(--coffee-espresso); cursor:pointer; font:inherit; font-size:0.8rem; padding:8px 10px; white-space:nowrap; }
.chat-list-menu button:hover{ background:var(--cream-flat); }
.chat-list-item{ display:flex; gap:10px; align-items:center; padding:12px; border-radius: var(--r-md); cursor:pointer; margin-bottom:4px; }
.chat-list-item:hover{ background: var(--cream-flat); }
.chat-list-item.active{ background: var(--coffee-taupe); }
.chat-list-item.hidden-conversation{ opacity:0.72; }
.chat-list-item .name{ font-weight:800; font-size:0.9rem; color: var(--coffee-espresso); }
.chat-list-item .preview{ font-size:0.78rem; color: var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.chat-thread{ background: var(--cream-card); border:1.5px solid var(--border-soft); border-radius: var(--r-lg); display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.chat-thread-header{ padding:16px 20px; border-bottom:1.5px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; }
.chat-thread-body{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.bubble{ max-width:min(70%, 480px); padding:11px 15px; border-radius: 18px; font-size:0.92rem; position:relative; }
.bubble-theirs{ align-self:flex-start; background: var(--cream-flat); color: var(--ink); border-bottom-left-radius:4px; }
.bubble-mine{ align-self:flex-end; background: var(--coffee-primary); color:#fff; border-bottom-right-radius:4px; }
.bubble .meta{ display:block; font-size:0.68rem; margin-top:4px; opacity:0.65; }
.bubble .report-link{ font-size:0.68rem; opacity:0.6; text-decoration:underline; cursor:pointer; margin-left:8px; }
.bubble-mine .report-link{ color:#fff; }
.chat-compose{ border-top:1.5px solid var(--border-soft); padding:14px 16px; flex-shrink:0; }
.chat-compose textarea{ min-height:clamp(40px, 5vh, 56px); height:auto; max-height:clamp(96px, 12vh, 140px); padding:10px 12px; resize:vertical; }
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color: var(--ink-soft); padding:30px; }
@media (max-width:820px){ .chat-layout{ grid-template-columns:1fr; height:auto; min-height:auto; } .chat-list{ max-height:220px; } .chat-compose textarea{ min-height:44px; } }

/* ---------- Admin ---------- */
.admin-shell{ background: var(--coffee-espresso); min-height:100vh; }
.admin-topbar{ background: var(--coffee-espresso); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.12); }
.admin-topbar .site-nav .nav-brand{ color:#fff; }
.admin-topbar .nav-link{ color: rgba(255,255,255,0.75); }
.admin-topbar .nav-link:hover, .admin-topbar .nav-link.active{ background: rgba(255,255,255,0.12); color:#fff; }
.admin-body{ background: var(--cream-bg); border-radius: 28px 28px 0 0; min-height:80vh; padding: 34px 0 60px; }
.tab-row{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.tab-btn{ background: var(--cream-card); border:1.5px solid var(--border-soft); color: var(--ink-soft); font-weight:800; padding:10px 20px; border-radius: var(--r-pill); cursor:pointer; font-size:0.88rem; }
.tab-btn.active{ background: var(--coffee-primary); color:#fff; border-color:var(--coffee-primary); }
table.admin-table{ width:100%; border-collapse:collapse; background: var(--cream-card); border-radius: var(--r-md); overflow:hidden; }
.admin-table th, .admin-table td{ text-align:left; padding:13px 16px; font-size:0.86rem; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.admin-table th{ background: var(--cream-flat); color: var(--coffee-espresso); font-family:var(--font-display); font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:.04em; }
.admin-table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; border-radius: var(--r-md); border:1.5px solid var(--border-soft); }
.action-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.match-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .match-form-grid{ grid-template-columns:1fr; } }

/* Centers the loader inside the page-loading container */
.page-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Adjust this based on your dashboard's layout */
}

/* Container for all the cup parts */
.coffee-loader {
  position: relative;
  width: 100px;
  height: 100px;
}

/* The Cup */
.cup-body {
  position: absolute;
  bottom: 10px;
  left: 15px;
  width: 60px;
  height: 50px;
  background-color: #c6b6a7;
  border: 4px solid #906339;
  border-radius: 5px 5px 30px 30px;
  z-index: 2;
  overflow: hidden; /* Keeps the coffee strictly inside the cup */
}

/* The Handle */
.cup-handle {
  position: absolute;
  bottom: 25px;
  left: 70px;
  width: 20px;
  height: 25px;
  border: 4px solid #906339;
  border-radius: 0 15px 15px 0;
  z-index: 1;
}

/* The Pouring Liquid */
.pour {
  position: absolute;
  top: 0;
  left: 41px; 
  width: 8px;
  background-color: #63411c;
  animation: pour-liquid 2.5s infinite ease-in;
  z-index: 3;
}

/* The Coffee Rising Inside the Cup */
.coffee-fill {
  position: absolute;
  bottom: -50px; /* Starts empty (below the cup) */
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #63411c;
  animation: fill-cup 2.5s infinite ease-in-out;
}

/* The Steam Bubble */
.steam {
  position: absolute;
  top: 0px;
  left: 40px;
  width: 10px;
  height: 10px;
  background-color: #eab17a;
  border-radius: 50%;
  opacity: 0;
  animation: rise-steam 2.5s infinite ease-out;
}

/* --- KEYFRAME ANIMATIONS --- */

@keyframes pour-liquid {
  0% { height: 0; top: 0; opacity: 1; }
  15% { height: 60px; top: 0; opacity: 1; }
  75% { height: 60px; top: 0; opacity: 1; }
  85% { height: 0; top: 60px; opacity: 0; }
  100% { height: 0; top: 60px; opacity: 0; }
}

@keyframes fill-cup {
  0% { bottom: -50px; opacity: 1;}
  15% { bottom: -50px; opacity: 1;}
  75% { bottom: 0; opacity: 1;}
  85% { bottom: 0; opacity: 0;}
  100% { bottom: -50px; opacity: 0;} /* Resets for the loop */
}

@keyframes rise-steam {
  0%, 75% { transform: translateY(0) scale(1); opacity: 0; }
  80% { opacity: 0.8; }
  95% { transform: translateY(-20px) scale(1.5); opacity: 0; }
  100% { transform: translateY(-20px) scale(1.5); opacity: 0; }
}

/* Add this to your CSS file */
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  /* Default sizes, can be overridden by inline styles or specific container classes */
  width: 40px; 
  height: 40px;
}

/* Make sure it matches the size of your mentor-avatar circles on the dashboard */
.mentor-head .avatar-img {
  width: 50px;
  height: 50px;
}

/* Upload preview styling */
.upload-preview {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}