/* ===================== GLOBAL ===================== */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f8f9fb;
  color: #2e2e2e;
}

.sidebar {
  background: #2c3e50;
  color: white;
  width: 220px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
.sidebar * { position: relative; z-index: 1; }
.sidebar h1 {
  color: #ffffff;
  font-size: 1.5rem;
  font-family: 'Cinzel', serif;
  margin-bottom: 1.5rem;
}
.sidebar h2 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  border-bottom: 1px solid #555;
  padding-bottom: 0.5rem;
}
.sidebar a {
  color: white;
  text-decoration: none;
  margin: 0.3rem 0;
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}
.sidebar a:hover { background-color: #34495e; }

.content {
  background: #f8f9fb;
  margin-left: 250px;          /* left sidebar */
  margin-right: 200px;         /* right sidebar space */
  padding: 2rem;
}

/* ===================== LISTS / TABLES / BUTTONS ===================== */
ul.character-list { list-style: none; padding: 0; }
ul.character-list li {
  background: white;
  border: 1px solid #ddd;
  margin: 0.5rem 0;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}
ul.character-list li:hover { background: #f0f6ff; }
ul.character-list li a { font-weight: bold; color: #2c3e50; text-decoration: none; }
ul.character-list li span { font-size: 0.9rem; color: #777; }

.styled-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  background-color: #fff;
  border: 1px solid #ddd;
}
.styled-table th, .styled-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.styled-table th { background-color: #f2f4f7; color: #333; font-weight: 600; }
.styled-table tbody tr:hover { background-color: #f9fafc; }

.button, .btn {
  display: inline-block;
  background: #357edd;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border: none;
}
.button:hover, .btn:hover { background: #245cbf; }
.btn-edit { background-color: #3498db; }
.btn-delete { background-color: #c0392b; }
.btn-back { background-color: #7f8c8d; }
.btn-save { background-color: #3495ac; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.rich-text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}

.sidebar-divider { margin: 1rem 0; border-top: 1px solid #555; }

/* ===================== DASHBOARD ===================== */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
}
.dash-card{
  background:#eaf6fb;
  border-radius:8px;
  padding:1rem 1.25rem;
}
.dash-card h2{ margin-top:0; margin-bottom:0.75rem; }
.dash-list{ list-style:none; padding:0; margin:0 0 0.75rem 0; }
.dash-list li{ margin-bottom:0.4rem; display:flex; align-items:center; }
.dash-avatar{
  width:32px;height:32px; object-fit:cover; border-radius:4px;
  margin-right:0.5rem; vertical-align: middle;
}
.dash-more{ font-size:0.9rem; text-decoration:none; color:#357edd; }
.dash-more:hover{ text-decoration:underline; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.gallery-grid.list-view { display: block; }
.gallery-grid.list-view .gallery-item { display: flex; align-items: center; margin-bottom: 1rem; }
.gallery-grid.list-view .gallery-thumb { width: 80px; height: 80px; object-fit: cover; margin-right: 1rem; }
.gallery-item { text-align: center; }
.gallery-thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 4px; }
.filename { margin-top: 0.5rem; font-size: 0.9rem; word-break: break-all; }

.dashboard-header {
  position: relative;
  background: url("/static/images/aeriador-banner.jpg") no-repeat center center;
  background-size: cover;
  padding: 3rem 2rem 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  color: white;
  text-shadow: 2px 3px 5px rgba(0,0,0,2);
  overflow: hidden;
}
.dashboard-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 0;
}
.dashboard-header h1,
.dashboard-header h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: #e8ecf1 !important;
}
.dashboard-title { font-size: 3rem; font-weight: 700; margin-bottom: 0.3rem; }
.dashboard-subtitle { font-size: 1.8rem; font-weight: 400; }

/* ===================== TYPOGRAPHY ===================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  color: #2c3e50;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 500; }

/* ===================== FAMILY TREE (unchanged) ===================== */
.family-tree { display:flex; flex-direction:column; align-items:center; margin-top:1em; text-align:center; }
/* ... (kept identical to your previous file) ... */
.sibling-connector-row { position: relative; display:flex; justify-content:center; align-items:flex-start; margin-bottom:1rem; height:20px; width:100%; }
.sibling-horizontal-line{ position:absolute; top:10px; height:2px; background:black; width:calc(100% - 40px); left:20px; right:20px; z-index:0; }
.sibling-connector-T{ position:relative; width:2px; height:10px; background:black; z-index:1; }
.spouse-line{ width:2px; height:30px; border-left:2px dotted black; margin:0 0.5rem; position:relative; top:-15px; z-index:1; }
.children-row{ display:flex; justify-content:center; gap:4rem; margin-top:1rem; }
.child-spouse-group{ display:flex; gap:1rem; align-items:center; }
.character-node{ display:inline-block; text-align:center; }
.tree-avatar{ width:80px; height:80px; object-fit:cover; border-radius:10px; border:2px solid #888; }
.char-name{ margin-top:0.5rem; font-weight:bold; }
.tree-connector.vertical-line{ width:2px; height:20px; background-color:#666; margin:0 auto; }
.org-description img{ max-width:100%; height:auto; display:block; margin:0.5rem auto; }

/* ===================== JOURNAL / FONT TOGGLE ===================== */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
:root{ --journal-font: 'Special Elite', serif; }
body.medieval{ --journal-font: 'Uncial Antiqua', serif; }

.journal-heading,
.journal-form legend,
.journal-form label,
.font-toggle label{
  font-family: var(--journal-font);
}
.journal-form fieldset{
  border:1px solid #ddd; border-radius:6px; padding:1.5rem; margin-bottom:1.5rem; background:#fff;
}
.journal-form legend{ font-size:1.15rem; padding:0 0.4rem; color:#2c3e50; }
.journal-form label{ display:block; margin-bottom:1rem; font-weight:500; }
.journal-form input,
.journal-form select,
.journal-form textarea{
  width:100%; padding:0.55rem 0.6rem; margin-top:0.35rem; border:1px solid #bbb; border-radius:5px; background:#f9f9f9; font-family:inherit;
}
.journal-form input:focus,
.journal-form textarea:focus,
.journal-form select:focus{
  outline:none; border-color:#357edd; background:#fff;
}
.journal-form .two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem;
}
.font-toggle{ margin-bottom:1rem; }
.font-toggle input{ margin-right:0.4rem; }

/* TIMELINE VIEW STYLES */

.timeline-description {
  background: #eef;
  padding: 1rem;
  border: 1px solid #ccd;
  margin-bottom: 1.5rem;
}

.timeline-banner img {
  max-width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 1.5rem;
}

.timeline-controls {
  margin-bottom: 1.5rem;
}

/* container for bar */
.timeline-bar-container {
  position: relative;
  height: 140px;
  margin-bottom: 2rem;
  border-top: 3px solid #444;
  background: linear-gradient(to right, #eee 0%, #fff 100%);
  overflow: visible;
}

.timeline-bar {
  position: relative;
  height: 100%;
}

/* --------- POINT EVENTS (pins) --------- */
.timeline-event-link{
  position:absolute;
  bottom:0;
  width:2px;
  height:100%;
  text-decoration:none;
  z-index:5;
}
.timeline-event-link:hover{ z-index:15; }

.timeline-event{
  position:absolute;
  bottom:0;
  width:1px;
  height:100%;
  cursor:pointer;
  transition:transform .1s;
}
.timeline-event:hover{
  transform:scale(1.5);
  z-index:10;
}
.timeline-event .event-dot{
  position:absolute;
  bottom:0;
  left:-5px;
  width:10px;
  height:10px;
  background:currentColor;
  border-radius:50%;
  border:1px solid #222;
}

/* --------- RANGE EVENTS (durations) --------- */
.timeline-range-link{
  position:absolute;
  bottom: 1;                   /* move the bar UP by increasing, DOWN, by decreasing, relative to the main timeline bar */
  text-decoration:none;
  height:130px;                 /* base bar height - thickness of the bar */
  z-index:6;
}
.timeline-range{
  position:relative;
  height:100%;
  background:#336699;
  opacity:0.9;
  border-radius:3px;
  cursor:pointer;
  transition:opacity .15s;
  transition:transform .1s;

}
.timeline-range:hover{
  transform:scale(1.5);
  opacity:1;
  z-index:12;
}

/* shared title label */
.timeline-event .event-title,
.timeline-range .event-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:0.75rem;
  color:#222;
  text-align:center;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  background:rgba(255,255,255,0.85);
  padding:2px 4px;
  border-radius:4px;
}
.timeline-event .event-title.stagger-0,
.timeline-range .event-title.stagger-0{ bottom:14px; }
.timeline-event .event-title.stagger-1,
.timeline-range .event-title.stagger-1{ bottom:34px; }
.timeline-event .event-title.stagger-2,
.timeline-range .event-title.stagger-2{ bottom:54px; }

/* tooltips */
.event-tooltip{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  background:#fff;
  border:1px solid #999;
  padding:0.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  max-width:660px !important;
  display:none;
  pointer-events:none;
  opacity:0.75;
  transition:opacity .15s;
  font-size:0.85rem;
}
.event-tooltip.above{
  bottom:calc(50%);
  top:auto;
}
.event-tooltip.below{
  top:calc(100% + 8px);
  bottom:auto;
}

.timeline-event-link,
.timeline-range-link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.timeline-event-link:visited,
.timeline-range-link:visited {
  color: inherit;
}

.timeline-event-link:hover,
.timeline-range-link:hover {
  /* You can add special hover styles if you want */
  color: inherit;
  text-decoration: none;
}


/* Year Markers */
.timeline-year-markers{
  position:relative;
  height:30px;
  margin-bottom:10px;
  border-top:1px solid #ccc;
}
.year-marker{
  position:absolute;
  top:0;
  text-align:center;
  transform:translateX(-50%);
}
.year-label{
  font-size:0.7rem;
  color:#444;
  margin-bottom:2px;
  display:block;
}
.year-tick{
  width:2px;
  height:80px;
  background:#444;
  display:block;
  margin:0 auto;
}

/* scale at bottom */
.timeline-scale{
  font-weight:bold;
  color:#333;
  margin-top:-1rem;
  padding:0 0.25rem;
}
.timeline-scale .timeline-end{ float:right; }

/* hero */
.timeline-hero{
  position:relative;
  width:100%;
  height:240px;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  margin-bottom:2rem;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 0 8px rgba(0,0,0,0.3);
}
.timeline-hero-overlay{
  background:rgba(0,0,0,0.5);
  color:#fff;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:8px;
  text-align:center;
  padding:1rem;
}
.timeline-title{
  font-size:2.2rem;
  font-family:'Cinzel', serif;
  margin:0;
  color:white;
  text-shadow:2px 2px 4px #000;
}
.timeline-range{
  font-size:1.2rem;
  color:white;
  margin-top:0.3rem;
  text-shadow:1px 1px 3px #000;
}

/* tooltip image size bump */
.image-preview img{
  max-width:100%;
  max-height:400px;
  border:1px solid #aaa;
  margin-top:0.5rem;
}
.image-preview.large img{
  max-height:460px;
}

/* ===================== RIGHT SIDEBAR ===================== */
.timeline-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;               /* slightly less than left */
  height: 100vh;
  background: #ecf2f6;
  border-left: 1px solid #cdd;
  padding: 1rem 1rem 2rem;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 2;
}

.timeline-sidebar h3,
.timeline-sidebar h4 {
  margin-top: 0;
  font-family: 'Cinzel', serif;
}

.meta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
}
.meta-list li { margin-bottom: 0.4rem; }
.meta-list span { font-weight: 600; }
.meta-list.small li { font-size: 0.8rem; }

.timeline-main {
  /* just a hook if you need extra layout control */
}

/* ===================== MEDIA QUERIES ===================== */
@media (max-width: 1100px) {
  .timeline-sidebar { display: none; }
  .content { margin-right: 0; }
}



/* === FIX: CKEditor Embedded Images === */
.ck-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Restore CKEditor 5 .ck-content styling (from style.bak-24jul.css) */
.ck-content {
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
}
.ck-content p {
  margin: 1em 0;
}
.ck-content figure {
  margin: 1.5em 0;
}
.ck-content figcaption {
  font-size: 0.875em;
  color: #666;
  text-align: center;
}
.ck-content .image-style-side {
  float: right;
  margin-left: 1.5em;
  max-width: 50%;
}
.ck-content .image-style-align-left {
  float: left;
  margin-right: 1.5em;
  max-width: 50%;
}
.ck-content .image-style-align-center {
  display: block;
  margin: 1em auto;
  max-width: 100%;
}
.ck-content .image-style-block-align-left {
  float: left;
  margin-right: 1.5em;
}
.ck-content .image-style-block-align-right {
  float: right;
  margin-left: 1.5em;
}
.ck-content figure.image > img {
  width: inherit !important;
  max-width: 100% !important;
}
.ck-content figure {
  display: inline-block;
  max-width: 100%;
}
.ck-content figure.image-style-side {
  width: auto !important;
}

/* Card grid for timeline index */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Each timeline card */
.card {
  background: #f8fbfe;
  border: 1px solid #dde4ee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(120,150,180,0.06);
  padding: 1.5rem 1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s;
  min-width: 0; /* fixes overflow bug in grid */
}

.card:hover {
  box-shadow: 0 4px 20px rgba(100,140,200,0.13);
}

/* Timeline cover image */
.timeline-thumb {
  display: block;
  margin: 0 auto 1rem auto;
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ccd;
  background: #eaf1f7;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* Make sure card text is centered */
.card h2, .card p, .card-buttons {
  text-align: center;
  width: 100%;
}

.timeline-thumb {
  width: 150%;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin: 0 auto 1rem auto;
  border: 1px solid #ccc;
  background: #f5f5f5;
}

/* ========== CHARACTER PROFILE HEADER ========== */
.char-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  background: #f6f7fb;
  padding: 1.2rem 2rem 1.2rem 1.2rem;
  border-radius: 12px;
  margin-bottom: 2.2rem;
  box-shadow: 0 2px 10px rgba(80,110,170,0.04);
}

/* ========== TABS ========== */
.tabs {
  margin-bottom: 1.5rem;
}
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.tab-buttons li {
  padding: 0.7rem 1.5rem 0.55rem 1.5rem;
  margin-bottom: -2px;
  cursor: pointer;
  color: #888;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  background: #f4f8fb;
  font-size: 1.1rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  transition: background 0.13s, color 0.13s;
}
.tab-buttons li.active {
  background: #fff;
  color: #205088;
  border-color: #d1d9ea #d1d9ea #fff #d1d9ea;
  border-bottom: 2px solid #fff;
  z-index: 2;
  position: relative;
}
.tab-content {
  display: none;
  padding: 1.3rem 1.5rem 1.2rem 1.2rem;
  background: #fff;
  border-radius: 0 0 12px 12px;
  border: 1px solid #e3eaf4;
  border-top: none;
  min-height: 120px;
  margin-bottom: 2.5rem;
}
.tab-content.active {
  display: block;
}


/* ITEMS */

.item-thumb {
  display: block;
  margin: 0 auto 1rem auto;
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ccd;
  background: #eaf1f7;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.btn-toggle.active {
  background: #357edd;
  color: #fff;
  border: 2px solid #245cbf;
}
.btn-toggle {
  background: #eaf1f7;
  color: #245cbf;
  border: 2px solid #dde4ee;
  margin-right: 0.5rem;
}

/* ===================== CHARACTER FORM LAYOUT ===================== */
/* Mirrors .journal-form look & feel, scoped to character create/edit pages */

.character-form fieldset{
  border:1px solid #ddd;
  border-radius:6px;
  padding:1.2rem 1.3rem;
  margin-bottom:1.5rem;
  background:#fff;
}
.character-form legend{
  font-size:1.1rem;
  font-weight:600;
  color:#2c3e50;
  padding:0 0.4rem;
  font-family:'Cinzel', serif;
}
.character-form label{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-weight:500;
}

.character-form input[type="text"],
.character-form input[type="number"],
.character-form select,
.character-form textarea{
  width:100%;
  padding:0.55rem 0.6rem;
  border:1px solid #bbb;
  border-radius:5px;
  background:#f9f9f9;
  font-family:inherit;
  font-size:1rem;
}
.character-form input:focus,
.character-form select:focus,
.character-form textarea:focus{
  outline:none;
  border-color:#357edd;
  background:#fff;
}

/* Utility grids for clean, readable rows */
.form-grid {
  display: grid;
  gap: 1rem 1.5rem;   /* add column gap so fields dont touch */
}

.form-grid.two-col {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* Vertical stacks (e.g., Ability Scores) */
.form-stack.one-col{
  display:grid;
  gap:0.65rem;
  max-width: 420px;             /* keeps a comfortable reading width */
}

/* Textareas */
.character-form textarea{
  min-height:160px;
  resize:vertical;
}

/* Buttons row tweaks */
.character-form .button,
.character-form .btn{
  margin-top:0.5rem;
}

/* Narrow screens: nothing to do, auto-fit collapses gracefully */
/* But you can force single column under very small widths if desired */
@media (max-width: 560px){
  .form-grid.two-col{
    grid-template-columns: 1fr;
  }
}