/* Common site styles for LostInTime */
body {
  background: #23272a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin: 0;
}

/* Guild palette (inspired by logo): gold & blue */
:root{
  --guild-gold: #d6a84a;
  --guild-blue: #1e8ed8;
  --card-bg: #2c2f33;
  --muted: rgba(255,255,255,0.65);
}

/* Top menus */
.leftmenu {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
}
.leftmenu a { color: #fff; margin-right: 0.6em; text-decoration: none; font-weight:600; }
.topmenu {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
}
.topmenu a { color: #fff; text-decoration: none; margin-left: 0.6em; }
.top-username { margin-right: 1em; }

/* Main content pushed down so absolute menus don't overlap */

/* Card */
.card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1em;
  margin: 1em 0;
  margin-top: 2em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* Roster grid */
.roster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; }

/* New grid-row layout: each grid-row is four equal columns; roster-grid holds rows */
.roster-grid .grid-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; align-items: start; }
.roster-grid .role-cell { display:flex; flex-direction:column; gap:0.25em; }
.roster-grid .header-row { margin-bottom: 0.25em; }

/* Column container inside the roster grid */
.roster-grid > .role-column { background: transparent; padding: 0.4em; display:flex; flex-direction:column; align-items:stretch; }

/* Make roster-grid cards visually match index cards */
.card .roster-grid { width:100%; box-sizing:border-box; padding:0.2rem; }
.roster-grid .role-column {
  border-radius: 8px;
  padding: 0.45rem;
  min-height: 180px;
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.role-header {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding:0.25rem 0.35rem;
  border-radius:4px;
  font-size:0.95rem;
  font-weight:700;
  background: transparent;
  color: #fff;
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin-bottom:0.45rem;
  /* slim underline accent using background-image so it reads like index headings */
  background-position: left calc(100% - 6px);
  background-repeat: no-repeat;
  background-size: 56px 4px;
}
.role-header.tank { background-image: linear-gradient(90deg,var(--guild-blue), rgba(30,142,216,0.6)); }
.role-header.heal { background-image: linear-gradient(90deg,#43b581, rgba(67,181,129,0.6)); }
.role-header.melee { background-image: linear-gradient(90deg,#f06292, rgba(240,98,146,0.6)); }
.role-header.range { background-image: linear-gradient(90deg,#4fc3f7, rgba(79,195,247,0.6)); }

/* Style C — clean boxed underline matching the test page: no background, no rounded corners */
.role-header-box {
  padding: 0 0 0.18rem 0; /* give a little room below text so underline doesn't touch text */
  margin-bottom: 0.45rem;
  background: none;
  border-radius: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  /* ensure older role-header background-image doesn't show */
  background-image: none !important;
  /* underline spanning both label and counter */
  border-bottom: 3px solid transparent;
}
.role-header-box.tank { border-bottom-color: var(--guild-blue); }
.role-header-box.heal { border-bottom-color: #43b581; }
.role-header-box.melee { border-bottom-color: #f06292; }
.role-header-box.range { border-bottom-color: #4fc3f7; }
.role-header-box.unknown { border-bottom-color: #888; }

/* subtle count text; color matches surrounding text (inherit) and parentheses are plain text */
.role-header-box .count-wrapper { color: inherit; font-size: 0.95rem; font-weight: 700; }
.role-header-box .count-badge { color: inherit; font-weight: 800; }

.role-subheader {
  padding:0.35rem 0.5rem;
  border-radius:4px;
  font-size:0.88rem;
  color: var(--muted);
  background: rgba(0,0,0,0.2);
}

/* Inline list of names directly under each subheader - no background boxes, colored by class/spec */
.role-list { display:flex; flex-direction:column; gap:0.18rem; margin:0; padding-top:0.18rem; }
.role-name-inline { display:inline-block; background:none; padding:0; margin:0; font-weight:700; color:inherit; }
.role-name-inline::after {margin-left:0.25rem; color: rgba(255,255,255,0.2); }
.role-name-inline:last-child::after { content: ""; }

.role-tile {
  color:#fff;
  margin:0.10em 0;
  /* slightly tighter padding to increase density while the left stripe increases */
  padding:0.42em 0.52em;
  border-radius:8px;
  text-align:left;
  font-weight:600;
  width:100%;
  box-sizing:border-box;
  transition: transform .06s ease, box-shadow .06s ease, opacity .06s ease;
  background: rgba(255,255,255,0.02);
  /* wider left stripe for stronger color accent */
  border-left: 8px solid var(--spec-color, rgba(255,255,255,0.08));
}
.role-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.22); }

.role-tile.dark-text { color: #101214; font-weight:700; }

@media (max-width: 900px) {
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
  .roster-grid .role-column { min-height: 160px; }
  .role-tile { border-left-width: 6px; padding-left: 0.5em; padding-right: 0.5em; }
}

/* Desktop downscale for five columns -> three columns for medium screens */
@media (max-width: 1200px) {
  .roster-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Klassenübersicht box - make it expand to full card width */
.klassen-box {color:#fff; border-radius:8px; padding:1em; padding-top:0px; width:100%; box-sizing:border-box; }

/* Klassenübersicht layout */
.klassen-wrapper { display:flex; justify-content:center; align-items:flex-start; width:100%; }
.klassen-table { width:100%; border-collapse:collapse; }
.klassen-header { background:#111; color:#fff; font-weight:bold; padding:0.4em 0.6em; text-align:left; }
.klassen-box {color:#fff; border-radius:8px; padding:1em; padding-top:0px; width:100%; box-sizing:border-box; }
.klassen-box { color:#fff; border-radius:8px; padding:0.2rem; width:100%; box-sizing:border-box; }
.klassen-cell { padding:0.3em 0.5em; color:#fff; }
.klassen-cell--meta { background:#23272a; color:#fff; text-align:right; font-weight:bold; }
.klassen-total { background:#23272a; color:#fff; }
.klassen-raidbuff { text-align:right; font-size:0.9em; }

/* utility */
.inline-form { display: inline; }

/* Role header variants */
.role-header.tank { background: linear-gradient(90deg,#23272a 70%,#7289da 100%); }
.role-header.heal { background: linear-gradient(90deg,#23272a 70%,#43b581 100%); }
.role-header.melee { background: linear-gradient(90deg,#23272a 70%,#f06292 100%); }
.role-header.range { background: linear-gradient(90deg,#23272a 70%,#4fc3f7 100%); }

/* Subheader color variants */
.role-subheader.raid { color: #f0f0f0; font-weight: bold;}
.role-subheader.bench { color: #f0f0f0; font-weight: bold;}
.role-subheader.waiting { color: #f0f0f0; font-weight: bold;}
.role-subheader.unknown { color: #f0f0f0; font-weight: bold;}

/* Tile variants */
.role-tile.dark-text { color: #222; }

/* Card headings */
.card h2 { color: #fff; margin-top: 0.25em; margin-bottom: 1em; }

/* Card heading accent */
.card h2::after{ content: ""; display:block; height:3px; width:64px; background: linear-gradient(90deg,var(--guild-gold),var(--guild-blue)); margin-top:8px; border-radius:3px; }

/* Hero */
.hero{ background: linear-gradient(180deg, rgba(30,142,216,0.08), transparent); padding: 4em 0 1em 0; margin-top: 0; }
.hero-inner{ width:80%; max-width:1200px; margin-left:auto; margin-right:auto; }
.hero-title{ font-size:2.25rem; margin:0; color:var(--guild-gold); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.hero-subtitle{ color:var(--guild-blue); font-weight:600; margin-top:0.25em; }
.hero-intro{ color:var(--muted); margin-top:0.75em; max-width:900px; }

/* Table styles */
.dashboard-table { width: 100%; border-collapse: collapse; margin-bottom: 2em; }
.dashboard-table th, .dashboard-table td { padding: 0.5em 1em; border-bottom: 1px solid #444; }
.dashboard-table th { background: rgba(0,0,0,0.2); color: #fff; text-align: left; }
.dashboard-table td { background: #2c2f33; }

/* Responsive table wrapper for admin Raidkader */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dashboard-table { min-width: 760px; }

@media (max-width: 700px) {
  .dashboard-table th, .dashboard-table td { padding: 0.4em 0.6em; font-size: 0.95rem; }
  .action-btn { padding: 0.25em 0.7em; }
  .avatar { width: 24px; height: 24px; }
}

/* Avatar */
.avatar { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; margin-right: 0.5em; }

/* Actions */
.action-btn { padding: 0.3em 1em; border-radius: 6px; border: none; margin: 0 0.2em; cursor: pointer; font-weight: 500; color:#fff; text-decoration:none; display:inline-block; }
.move-btn { background: #7289da; color: #fff; }
.delete-btn { background: #ff5e5e; color: #fff; }

/* Status colors */
.status-Raid { color: #43b581; font-weight: bold; }
.status-Bench { color: #faa61a; font-weight: bold; }
.status-Waiting { color: #7289da; font-weight: bold; }
.status-Rejected { color: #ff5e5e; font-weight: bold; }

@media (max-width: 900px) {
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .card { width: 95%; }
}

/* Larger box for roster/table displays */
.roster-box {color:#fff; border-radius:8px; padding:1em; padding-top: 0px; width:100%; box-sizing:border-box; }


/* Make each role row display label left and value right */
.roster-box .role-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35em 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.role-label { font-weight: 600; }
.role-value { min-width: 40px; text-align: right; font-weight: 700; }

/* Klassen rows: name left, count right */
.klassen-box .klassen-row {
  display: grid;
  grid-template-columns: 1fr 1fr 72px; /* name | raidbuff | fixed-width count */
  align-items: center;
  gap: 12px;
  padding: 0.35em 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.klassen-name { font-weight: 600; }
.klassen-raidbuff { font-size: 0.9rem; color: var(--muted); text-align: left; }
.klassen-count { width:72px; text-align: right; font-weight: 700; }

/* Public (index) Klassen box variant without raidbuff column: simulate 3-column alignment with pseudo empty middle */
.klassen-box--public .klassen-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr) 72px; /* name | spacer | count */
}
.klassen-box--public .klassen-row .klassen-name { grid-column: 1; }
.klassen-box--public .klassen-row .klassen-count { grid-column: 3; justify-self: end; }

.profile-box{
 padding: 1em;
 padding-top:0px;
 width: 100%;
  box-sizing: border-box;
}

/* Inline profile form styles (class/spec selects and save button) */
.profile-box form { display:flex; gap:0.6rem; align-items:flex-end; flex-wrap:wrap; }
.profile-box label { display:flex; flex-direction:column; font-size:0.9rem; color:var(--muted); }
.profile-box select {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff;
  padding: 0.5rem 0.9rem;
  min-width: 180px;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.6) inset;
  background-image: linear-gradient(45deg,transparent 50%,rgba(255,255,255,0.06) 50%), linear-gradient(135deg,rgba(0,0,0,0.06) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) calc(1.1rem), calc(100% - 0.6rem) calc(1.1rem);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.profile-box select option { color: #fff; background-color: var(--card-bg); }
.profile-box select optgroup { background-color: var(--card-bg); color: #fff; }

/* Some browsers/OS render native dropdowns and ignore option styling; if you see OS colors, we can implement a custom select control. */
.profile-box select:focus { outline: none; border-color: var(--guild-blue); box-shadow: 0 0 0 3px rgba(30,142,216,0.08); }
.profile-box .discord-btn, .profile-box button[type="submit"] {
  background: linear-gradient(90deg,var(--guild-gold),var(--guild-blue));
  color: #101214;
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(18,18,20,0.35);
  margin-left: 0.35rem; /* small gap from selects */
  align-self: flex-end; /* align with the bottom of labels (selects) */
}
.profile-box .discord-btn:hover, .profile-box button[type="submit"]:hover { opacity:0.9; }
.profile-box .inline-note { color: var(--muted); font-size:0.85rem; }

@media (max-width:600px){
  .profile-box form { flex-direction:column; align-items:stretch; }
  .profile-box select { width:100%; min-width:unset; }
  .profile-box button[type="submit"] { width:100%; }
}