/* user.css - visual override inspired by uploaded design */
/* Place this file into templates/cassiopeia/css/user.css */

:root {
  --primary-accent: #0f7f6a;
  --page-bg: #f2f4f3;
  --card-bg: #ffffff;
  --text-color: #222;
  --muted: #6b6b6b;
  --card-radius: 12px;
  --card-shadow: 0 6px 18px rgba(17,17,17,0.06);
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, "Helvetica Neue";
  background: var(--page-bg);
  color: var(--text-color);
}

/* page wrapper */
.ct-wrap {
  max-width: 1200px;
  margin: 24px auto;
  padding: 24px;
  box-sizing: border-box;
}

/* header */
.ct-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.ct-site-title a { text-decoration:none; color:var(--text-color); font-weight:700; font-size:20px; }

/* grid */
.ct-main {
  display: grid;
  grid-template-columns: 1fr 2fr 320px;
  gap: 20px;
  align-items: start;
}

/* card common */
.module, .card, .no-card, .ct-content > * {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 18px;
  margin-bottom: 18px;
}

/* left column specifics */
.ct-left .module h3 { margin: 0 0 8px; font-size:16px; }

/* chips, badges */
.chip {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: #eaf7f2;
  font-weight:600;
  color:var(--text-color);
  font-size:13px;
}

/* right column */
.ct-right .contact { display:flex; gap:12px; align-items:center; }
.ct-right img.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }

/* buttons */
.btn { display:inline-block; padding:12px 18px; border-radius:8px; background:var(--primary-accent); color:#fff; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
.btn.secondary { background:#fff; color:var(--text-color); border:1px solid rgba(0,0,0,0.06); }

/* related items list */
.related-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }

/* small UI */
.mode-toggle { position: fixed; right: 18px; bottom: 18px; z-index:1500; }
.mode-toggle button { padding:10px; border-radius:50%; border:none; background:var(--card-bg); box-shadow:var(--card-shadow); cursor:pointer; }

/* dark mode */
body.mode-dark {
  --card-bg: #141414;
  --page-bg: #0f1212;
  --text-color: #eee;
  background: var(--page-bg);
}
body.mode-dark .chip { background: rgba(15,127,106,0.12); color: #dff7ee; }

/* responsive */
@media (max-width: 900px) {
  .ct-main { grid-template-columns: 1fr; }
  .ct-right { order: 3; }
  .ct-left { order: 1; }
  .ct-content { order: 2; }
}