/* ===== Lifetime RP – Updated styles with Branding (dark + light) ===== */

/* Theme tokens (light default, overridden in dark) */
:root, [data-bs-theme="light"] {
  /* Hero */
  --lrp-hero-curve: var(--clr-bg);
  --lrp-hero-overlay: rgba(2, 8, 23, .72);

  /* Brand palette - Light */
  --clr-bg: #F7F3EE;              /* warm parchment background */
  --clr-surface: #FFFFFF;         /* cards, panels */
  --clr-border: rgba(0,0,0,.1);

  --clr-text: #1A1A1D;            /* strong wood-dark text */
  --clr-text-muted: #94A3B8;      /* muted brown */

  --clr-primary: #E6392E;         /* fiery red */
  --clr-primary-hover: #FF6B1A;   /* bright orange */
  --clr-accent: #C45D1A;          /* warm ember orange */

  --clr-secondary: #C49A6C;       /* parchment brown */
  --clr-secondary-light: #E6D0B8;
  --clr-secondary-accent: #4B2A18;

  --lrp-pill-bg: rgba(0,0,0,.05);
  --lrp-pill-border: rgba(0,0,0,.15);
  --lrp-shadow: 0 6px 12px rgba(0,0,0,.15);
  --lrp-shadow-hover: 0 8px 16px rgba(0,0,0,.25);
  --lrp-progress-bg: #e2d6c5;
}

[data-bs-theme="dark"] {
  /* Hero */
  --lrp-hero-curve: var(--clr-bg);
  --lrp-hero-overlay: rgba(2, 8, 23, .72);

  /* Brand palette - Dark */
  --clr-bg: #0B1220;              /* page background */
  --clr-surface: #0f172a;         /* cards, panels */
  --clr-border: rgba(255,255,255,.12);

  --clr-text: #E2E8F0;            /* body text */
  --clr-text-muted: #94A3B8;      /* secondary text */

  --clr-primary: #E6392E;         /* fiery red */
  --clr-primary-hover: #FF6B1A;   /* bright orange */
  --clr-accent: #FFB321;          /* warm yellow */

  --clr-secondary: #4B2A18;       /* wood tone */
  --clr-secondary-light: #6B3A23; 
  --clr-secondary-accent: #C49A6C;

  --lrp-pill-bg: rgba(255,255,255,.10);
  --lrp-pill-border: rgba(255,255,255,.20);
  --lrp-shadow: 0 10px 20px rgba(0,0,0,.35);
  --lrp-shadow-hover: 0 12px 28px rgba(0,0,0,.45);
  --lrp-progress-bg: #1f2a44;
}

/* Hero sizing knobs */
:root {
  --hero-curve-height: 84px;
  --hero-bottom-pad: 1.5rem;
}

body { background: var(--clr-bg); color: var(--clr-text); }

/* Hero layering */
.hero{ position:relative; overflow:hidden; color:#fff; }
.hero .hero-bg { position:absolute; inset:0; z-index:-1;
  background-image: linear-gradient(var(--lrp-hero-overlay), var(--lrp-hero-overlay)),
    url('https://dgzyt.xyz/dev/assets/img/bg.png');
  background-size:cover; background-position:center; }
.hero .curve{ position:absolute; left:0; right:0; bottom:-1px;
              height: var(--hero-curve-height);
              color: var(--lrp-hero-curve);
              z-index:0; pointer-events:none; }
.hero > .container{ position:relative; z-index:1; }
main.container{ position:relative; z-index:2; }

/* Top bar grid */
.topbar-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding-top:.25rem;
}
.main-nav{ justify-self:center; display:flex; align-items:center; }
.main-nav .nav-link{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 .5rem;
  border-radius:.375rem;
  color: var(--clr-text-muted);
  text-decoration:none;
}
.main-nav .nav-link:hover{ color: var(--clr-text); }
.main-nav .activeLink{ color: var(--clr-text); text-decoration: underline; }

/* Center “Store” button */
.nav-cta-pill{
  padding:0 1rem;
  border-radius:999px;
  background: var(--clr-primary);
  color:#fff !important;
  font-weight:600;
}
.nav-cta-pill:hover{ background: var(--clr-primary-hover); }

/* Register button */
.btn-register{
  background: var(--clr-primary);
  border:0;
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.25);
}
.btn-register:hover{ background: var(--clr-primary-hover); }

/* Stats bar */
.statsbar { display:grid !important; grid-template-columns: 1fr auto 1fr; align-items:center; gap:.75rem; }
.statsbar > .pill.order-1 { justify-self:end; }
.statsbar > .logo-stack.order-2 { justify-self:center; }
.statsbar > .pill.order-3 { justify-self:start; }

.logo-badge { background: var(--clr-secondary-accent); border:1px solid var(--clr-border); color:#fff; }
.brand-sub { letter-spacing:.2em; opacity:.9; }
.pill { background:var(--lrp-pill-bg); border:1px solid var(--lrp-pill-border); border-radius:999px; padding:.4rem .8rem; }
.shadow-pill { box-shadow: 0 8px 20px rgba(0,0,0,.15); }

.main-offset { margin-top: .25rem; }

/* Cards / sidebar */
.shadow-soft { box-shadow: var(--lrp-shadow); }
.card { background: var(--clr-surface); border:1px solid var(--clr-border); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--lrp-shadow-hover); }
.card .card-title { color: var(--clr-text); }
.card .card-text { color: var(--clr-text-muted); }
.card-footer { background: var(--clr-surface) !important; border-color: var(--clr-border); }
.sticky-aside { position: sticky; top: 1rem; }
.server-card { background: var(--clr-surface); border-color: var(--clr-border) !important; }
.progress-thin { height: .5rem; }
.progress { background: var(--lrp-progress-bg); }

/* Footer */
.footer-line { border-top:1px solid var(--clr-border); background:var(--clr-surface); color: var(--clr-text-muted); }

/* Pagination */
.pagination .page-link { background: var(--clr-surface); color: var(--clr-text); border-color: var(--clr-border); }
.pagination .page-item.active .page-link { background: var(--clr-primary); color:#fff; border-color: var(--clr-primary); }
.pagination .page-item.disabled .page-link { color: var(--clr-text-muted); }

/* Logo image */
.header-logo {
  max-height: 225px;
  width:auto;
  display:inline-block;
}

.btnNewBoard{
  width:220px;
}

.btnAddList{
  width:170px;
}

.dashboardUserAvatar{
  margin-bottom: 5px;
}

.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.35rem; box-shadow:0 0 0 2px rgba(0,0,0,.15) inset; }
.status-online{ background:#22c55e; }  /* green */
.status-empty{ background:#f59e0b; }   /* amber */
.status-offline{ background:#ef4444; } /* red */

/*                            */
/* Workspace Specific Styling */
/*      
                      */
/* Board viewport: horizontal scroll only, fixed height */
#kanban {
  height: 750px;     /* adjust the 260px to fit your header/top bar */
  overflow-x: auto !important;     /* keep horizontal scrolling for many columns */
  overflow-y: hidden !important;   /* prevent the whole page from growing tall */
  align-items: stretch !important; /* make lists fill the board height */
  margin-bottom: 20px;
}

/* Lists are columns that fill the board height */
.kanban-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;                 /* your column width */
}

/* Header should not grow */
.kanban-list > .card-header {
  flex: 0 0 auto;
}

/* Body fills leftover height and scrolls vertically */
.kanban-list > .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;                    /* IMPORTANT: enables the inner overflow */
  padding-bottom: .25rem;
}

/* The card stack is the actual scroll area */
.kanban-cards {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 60px;                 /* so empty columns still accept drops */
  padding-right: 6px;               /* room for the scrollbar */
  overscroll-behavior: contain;     /* don't bubble scroll to the page */
}

/* Nice slim scrollbar (WebKit) */
.kanban-cards::-webkit-scrollbar { width: 6px; }
.kanban-cards::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 3px;
}
.kanban-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.4);
}
.kanban-cards::-webkit-scrollbar-track { background: transparent; }

/* Firefox scrollbar */
.kanban-cards { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }

/* Drag helpers you already use */
.drag-ghost { opacity: .5; }
.list-placeholder, .card-placeholder {
  border: 2px dashed var(--bs-secondary);
  border-radius: .5rem;
  background: rgba(0,0,0,.03);
}
.list-placeholder { width: 280px; height: 120px; margin-right: .75rem; }
.card-placeholder { height: 46px; margin: .25rem 0; }
.list-hover { outline: 2px dashed var(--bs-primary); outline-offset: -4px; }

/*                  */
/* Global Scrollbar */
/*                  */

/* Nice slim scrollbar (WebKit) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.4);
}
::-webkit-scrollbar-track { background: transparent; }

/* Firefox scrollbar */
body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }

.vote-card { 
    background: var(--clr-surface); 
    border-color: var(--clr-border) !important; 
    box-shadow: var(--lrp-shadow);
}

.vote-card-price {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

.vote-card-name {
    font-size: 1rem;
    color: var(--clr-text);
}

.vote-card-button {
    float: right;
}

.vote-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 10px;
}

.status-link{
  justify-self:center; 
  display:flex; 
  align-items:center;
  text-decoration: none;
  color: var(--clr-text-muted);
}

.status-link:hover{
  color: var(--clr-text);
}

.footer-link{
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity));
  text-decoration: none;
}

.footer-link:hover{
  color: var(--clr-text-muted);
}

.funny-hidden-text{
  color: var(--clr-surface);
}

#roadmap-skinny { font-size: 0.95rem; line-height: 1.55; }
#roadmap-skinny details { margin: .5rem 0; padding: .4rem .6rem; border: 1px solid rgba(255,255,255,.08); border-radius: .5rem; }
#roadmap-skinny summary { cursor: pointer; }
#roadmap-skinny ul { margin: .4rem 0 .2rem 1rem; }
#roadmap-skinny li { margin: .2rem 0; }