/* Guild Placeholder design tokens and base styles (from style guide) */
:root{
  --bg-page: #1F1106;
  --bg-container: #231A15;
  --gradient-start: #241A1F;
  --gradient-end: #33252C;
  --text-primary: #F7F7F7;
  --text-muted: #9D969A;
  --accent-red: #AA2409;
  --accent-gold: #F4BF2A;
  --accent-highlight: #493D43;
  --accent-dark: #180F01;
  --container-radius: 8px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Coolvetica, Bahnschrift, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  /* Use the hero image as the full-page background starting at the very top */
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page layout */
/* Remove the header background so the body background shows through from the very top */
.header-container{background:transparent;padding:0;border-bottom:none;position:absolute;left:0;right:0;top:18px;z-index:60}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 1rem}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:48px}

/* Nav — matches app.css visually (guild.css has no 125% font-size, so values are divided by 1.25) */
.nav{display:flex;flex-direction:column;width:100%;gap:0;padding:8px 12px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('../images/Navigation_Bar2.png') center/cover no-repeat;
}
.nav-top-row{display:flex;align-items:center;width:100%;gap:8px}
.nav-left{display:flex;align-items:center;gap:12px}
.nav-logo{height:38px;width:auto;display:block;border-radius:6px;object-fit:contain}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-links-inline{display:flex;align-items:center;gap:4px;flex:1}
.nav a{color:var(--text-primary);text-decoration:none;padding:6px 10px;border-radius:6px;font-family:Coolvetica, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
.nav a:hover{background:rgba(255,255,255,0.03)}

/* Hamburger button – hidden on desktop */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:4px;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.nav-hamburger-bar{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform 0.25s ease,opacity 0.2s ease}
.nav-hamburger--open .nav-hamburger-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-hamburger--open .nav-hamburger-bar:nth-child(2){opacity:0}
.nav-hamburger--open .nav-hamburger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Sidebar drawer – hidden by default, visible only on mobile */
.nav-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:998;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity 0.3s ease}
.nav-sidebar-backdrop--visible{display:block;opacity:1}
.nav-sidebar{display:none;position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;z-index:999;background:linear-gradient(180deg,#1a1008 0%,#1F1106 100%);border-right:1px solid rgba(255,255,255,0.06);box-shadow:6px 0 30px rgba(0,0,0,0.7);transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-sidebar--open{transform:translateX(0)}
.nav-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 0.75rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-sidebar-logo{height:36px;width:auto;border-radius:6px}
.nav-sidebar-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.nav-sidebar-close:hover{color:var(--text-primary);background:rgba(255,255,255,0.05)}
.nav-sidebar-links{display:flex;flex-direction:column;padding:0.75rem 0;flex:1}
.nav-sidebar-link{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1.25rem;color:var(--text-primary);text-decoration:none;font-size:0.95rem;border-radius:0;transition:background 0.15s ease;font-family:Coolvetica, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
.nav-sidebar-link:hover{background:rgba(255,255,255,0.05)}
.nav-sidebar-link svg{flex-shrink:0;opacity:0.5}
.nav-sidebar-footer{padding:0.75rem 0 1rem;border-top:1px solid rgba(255,255,255,0.06);margin-top:auto}

/* ── Mobile nav (≤ 640px): show hamburger + sidebar ── */
@media(max-width:640px){
  .nav{padding:6px 10px}
  .nav-hamburger{display:flex}
  .nav-links-inline{display:none}
  .nav-sidebar{display:flex}
  .nav-logo{height:30px}
  .nav-right .btn{font-size:0.75rem;padding:5px 10px}
}

/* User area top-left */
.user-area{position:fixed;left:12px;top:12px;background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:8px;display:flex;align-items:center;gap:8px;z-index:40}
.user-area img.avatar{width:32px;height:32px;border-radius:6px;object-fit:cover}
.user-area .name{font-size:0.95rem;color:var(--text-primary)}
.user-area a, .user-area form{color:var(--text-primary)}

/* Nav user dropdown */
.nav-user-dropdown{position:relative;display:flex;align-items:center}
.nav-user-toggle{background:none;border:none;cursor:pointer;color:#fff;font-family:Coolvetica, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:inherit;display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;transition:background 0.15s ease}
.nav-user-toggle:hover{background:rgba(255,255,255,0.03)}
.nav-user-toggle svg{opacity:0.4;transition:transform 0.2s ease}
.nav-user-dropdown.open .nav-user-toggle svg{transform:rotate(180deg)}
.nav-notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#dc2626;color:#fff;font-size:0.65rem;font-weight:700;line-height:1;text-decoration:none;box-shadow:0 2px 6px rgba(220,38,38,0.4)}
.nav-user-menu-item .nav-notif-badge{margin-left:auto}
.nav-sidebar-link .nav-notif-badge{margin-left:auto}
.nav-user-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:linear-gradient(180deg,#1a1008 0%,#1F1106 100%);border:1px solid rgba(255,255,255,0.06);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.6);padding:4px 0;z-index:100;flex-direction:column}
.nav-user-menu--open{display:flex}
.nav-user-menu-item{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 1rem;color:var(--text-primary);text-decoration:none;font-size:0.9rem;background:none;border:none;cursor:pointer;width:100%;text-align:left;font-family:Coolvetica, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;transition:background 0.15s ease;border-radius:0}
.nav-user-menu-item:hover{background:rgba(255,255,255,0.05)}
.nav-user-menu-item svg{opacity:0.4;flex-shrink:0}
.nav-user-menu-logout{color:var(--accent-red)}
.nav-user-menu-divider{height:1px;background:rgba(255,255,255,0.06);margin:4px 0}

/* Container */
.container{max-width:1400px;margin:2rem auto;padding:1rem}

/* TRP3 upload card - semi-transparent box to match the nav bar */
.trp3-upload-card{
  max-width:900px;
  margin:1rem auto;
  padding:1.25rem;
  color:var(--text-primary);
  /* match the nav's semi-transparent background */
  background: rgba(0,0,0,0.28);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  /* subtle blur for nicer overlay effect where supported */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Profile form card */
.profile-card{max-width:1100px;margin:1rem auto;padding:1.75rem;background:rgba(0,0,0,0.85);border-radius:8px;color:var(--text-primary);box-shadow:0 10px 30px rgba(0,0,0,0.6);border:1px solid rgba(0,0,0,0.12)}

.form-label{display:block;margin-top:.5rem;font-weight:600}
.form-input{width:100%;padding:.5rem;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,#071229,#061021);color:var(--text-primary);min-width:0}

/* Table tweaks for profile search results inside profile-card */
.profile-card table{width:100%;border-collapse:separate;border-spacing:0}
.profile-card table thead th{color:var(--text-muted);font-weight:600;text-transform:none;text-align:left}
.profile-card table th, .profile-card table td{padding:.9rem 1rem;vertical-align:middle}
.profile-card table tbody tr{border-top:1px solid rgba(255,255,255,0.04)}

/* Column width hints (adjusts spacing of result columns) */
.profile-card table th:nth-child(1), .profile-card table td:nth-child(1){width:45%}
.profile-card table th:nth-child(2), .profile-card table td:nth-child(2){width:20%}
.profile-card table th:nth-child(3), .profile-card table td:nth-child(3){width:20%}
.profile-card table th:nth-child(4), .profile-card table td:nth-child(4){width:15%}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1rem;background:var(--accent-dark);color:var(--text-primary);text-decoration:none;border-radius:6px;font-family:Coolvetica, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;white-space:nowrap;vertical-align:middle}

/* Action buttons inside profile-card table (View/Edit) should be uniform */
.profile-card .btn.action{width:88px;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 12px;vertical-align:middle;margin:0}
.action-group{display:inline-flex;align-items:center;gap:0.5rem}
/* Ensure buttons inside action-group have no unintended margins and are box-sized consistently */
.action-group .btn{margin:0;box-sizing:border-box}
/* remove previous adjacent selector reliance (kept for safety) */
.profile-card .btn.action + .btn.action{margin-left:0}
.btn.register{background:var(--accent-red)}
.btn.accent{background:var(--accent-gold);color:#111;border:1px solid rgba(0,0,0,0.12)}
.btn:hover{filter:brightness(.95)}
.btn.danger{background:var(--accent-red);color:#fff}

/* New aliases to match blade classes used by profiles views */
.card{background:rgba(0,0,0,0.28);border-radius:var(--container-radius);padding:1rem;color:var(--text-primary);box-shadow:0 10px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04)}
.btn-primary{background:var(--accent-gold);color:#111;border:1px solid rgba(0,0,0,0.12);display:inline-block;padding:.6rem 1rem;border-radius:6px;text-decoration:none}

/* Textarea styling - softer background than plain white */
.trp3-textarea{width:100%;height:360px;padding:.75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,#08122a,#06102a);color:#e6eef8;resize:vertical}

.form-row{margin-bottom:1rem}
.status-text{color:#86efac;margin-bottom:1rem}
.error-text{color:#fca5a5;margin-top:.5rem}

/* Search group: merge button and input to same height */
.search-group{display:flex;align-items:stretch;width:100%;gap:0}
.search-group .btn{padding:.6rem 1rem;flex-shrink:0;border-top-right-radius:0;border-bottom-right-radius:0;display:inline-flex;align-items:center;justify-content:center}
.search-group .form-input{padding:.6rem .75rem;border-top-left-radius:0;border-bottom-left-radius:0;flex:1;min-width:0}

/* Force a consistent height for visual parity across browsers */
.search-group .btn, .search-group .form-input{height:44px}
@media(max-width:640px){
  .search-group .btn, .search-group .form-input{height:40px}
  .profile-card .btn.action{width:72px;height:36px}
}

/* Wiki-style profile show layout */
.wiki-content{position:relative}
.profile-portrait{float:right;width:220px;margin-left:1rem;margin-bottom:0.5rem}
.profile-portrait > img{width:220px;height:220px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,0.04)}

.wiki-section{margin-bottom:1.25rem}

/* Gallery thumbnails fixed size */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem}
.gallery-thumb{width:100%;height:140px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,0.04)}
/* Small preview used in the edit form */
.gallery-preview{width:128px;height:128px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,0.04)}

/* Ensure float clears at the end */
.wiki-content:after{content:"";display:block;clear:both}

/* Responsive adjustments */
@media(max-width:768px){
  .profile-portrait{float:none;width:120px;margin:0 auto 1rem auto}
  .profile-portrait > img{width:120px;height:120px}
  .award-badges a,.award-badges a img{width:32px!important;height:32px!important}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

/* Toggle switch for optional sections */
.toggle-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.toggle-switch .switch{width:44px;height:24px;background:rgba(255,255,255,0.12);border-radius:999px;position:relative;display:inline-block;vertical-align:middle;transition:background .15s}
.toggle-switch .switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s}
.toggle-switch input:checked + .switch{background:var(--accent-gold)}
.toggle-switch input:checked + .switch::after{transform:translateX(20px)}
.toggle-switch .switch.on{background:var(--accent-gold)}
.toggle-switch .switch.on::after{transform:translateX(20px)}
.toggle-switch .label-text{color:var(--text-primary);font-size:.95rem}

/* small helper spacing for the optional section area */
.optional-section-area{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.04)}

/* small circular icon button for + / - */
.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0;margin:0;font-size:1.1rem}
.icon-btn.plus{background:rgba(255,255,255,0.06);color:var(--text-primary);border:1px solid rgba(255,255,255,0.04)}
.icon-btn.minus{background:var(--accent-red);color:#fff;border:1px solid rgba(0,0,0,0.08)}

/* Remove unwanted white highlight / focus ring on toggle and icon buttons */
.small.toggle-switch, .toggle-switch, .icon-btn {
  background: transparent;
  border: none;
  padding: 6px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* mobile */
}

/* Remove default outline/white flash on focus/active, keep subtle focus indicator via box-shadow if needed */
.small.toggle-switch:focus, .small.toggle-switch:active, .icon-btn:focus, .icon-btn:active {
  outline: none;
  box-shadow: none;
}

/* Ensure the inner visual switch still shows state; keep pointer cursor */
.small.toggle-switch{cursor:pointer}
.small.toggle-switch .switch{pointer-events:none}

/* Prevent text selection when tapping toggles */
.small.toggle-switch, .icon-btn{user-select:none}

/* Utility: explicit link accent to override inline or other rules when needed */
.link-accent {
  color: var(--accent-gold) !important;
}
.link-accent:hover { text-decoration: underline !important; opacity: 0.95 !important; }

/* Ensure only the dashboard card TITLE (h3) uses accent-gold; keep .small/descriptions unaffected */
a.card h3,
a.card h3 * {
  color: var(--accent-gold) !important;
}
a.card:hover h3, a.card:hover h3 * {
  text-decoration: underline !important;
  opacity: 0.95 !important;
}

/* Ensure card descriptions (.small) keep the primary text color (white) rather than the muted color */
/* This targets the resource/dashboard card descriptions specifically so they remain readable while titles are gold. */
a.card .small {
  color: var(--text-primary) !important;
}

/* Improved select styling for dark theme (fix white-on-white dropdowns) */
select, select.form-input {
  background: linear-gradient(180deg,#071229,#061021) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: .45rem .6rem !important;
  border-radius:6px;
}
select option, select optgroup {
  background: #061021 !important;
  color: var(--text-primary) !important;
}
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(246,201,75,0.08);
}
/* remove default IE expand arrow inside custom selects */
select::-ms-expand { display:none; }

/* D20 dashboard table styles */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.d20-table{width:100%;border-collapse:collapse;font-size:0.95rem}
.d20-table thead th.d20-th{padding:10px 12px;text-align:left;color:var(--text-muted);font-weight:600;border-bottom:1px solid rgba(255,255,255,0.06)}
.d20-table tbody td.d20-td{padding:10px 12px;vertical-align:middle;border-top:1px solid rgba(255,255,255,0.03)}
.d20-title{display:inline-block;font-weight:700;color:var(--accent-gold);text-decoration:none}
.d20-title:hover{text-decoration:underline}
.d20-meta{color:var(--text-muted);font-size:0.85rem;margin-top:6px}
.d20-actions .action-group{display:inline-flex;gap:8px;align-items:center}

/* Button variants used on the d20 table */
.btn-sm{padding:6px 10px;font-size:0.9rem;border-radius:6px}
.btn-accent{background:var(--accent-gold);color:#111;border:1px solid rgba(0,0,0,0.12)}
.btn-primary{background:#0ea5a9;color:#061018;border:none}
.btn-disabled{background:rgba(255,255,255,0.04);color:#aaa;border-radius:6px;border:none}

/* Row hover and zebra subtle row background for readability */
.d20-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.d20-table tbody tr:nth-child(odd){background:transparent}
.d20-table tbody tr:nth-child(even){background:rgba(255,255,255,0.01)}

/* Small-screen adjustments: allow horizontal scroll; reduce padding */
@media(max-width:720px){
  .d20-table thead th.d20-th{padding:8px}
  .d20-table tbody td.d20-td{padding:8px}
  .d20-title{display:block}
}

/* Accessibility utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Resources / Characters / D20 page hero — full-viewport-width banner image */
.resources-page-hero,
.characters-page-hero,
.d20-page-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 740px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 0;
}
.resources-page-hero::after,
.characters-page-hero::after,
.d20-page-hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15,7,3,0.10) 0%,
    rgba(15,7,3,0.15) 50%,
    rgba(15,7,3,0.70) 85%,
    var(--bg-page) 100%
  );
  pointer-events: none;
}
.resources-page-main{
  margin-top: -60px;
  position: relative;
  z-index: 10;
}
.characters-index-main{
  margin-top: -296px;
  position: relative;
  z-index: 10;
}
@media(max-width:640px){
  .resources-page-hero,.characters-page-hero,.d20-page-hero{height:480px}
  .resources-page-main{margin-top:-40px}
  .characters-index-main{margin-top:-192px}
}