:root{
  --bg:#1b1b1b;
  --panel:#333333;
  --panel-alt:#2c2c2c;
  --panel-border:#454545;
  --header-red-top:#565656;
  --header-red-bottom:#3d3d3d;
  --text:#d6d6d6;
  --text-muted:#9a9a9a;
  --link:#8ab4f8;
}

:root[data-theme="light"]{
  --bg:#f0f0f0;
  --panel:#ffffff;
  --panel-alt:#f4f4f4;
  --panel-border:#d8d8d8;
  --header-red-top:#565656;
  --header-red-bottom:#3d3d3d;
  --text:#242424;
  --text-muted:#6b6b6b;
  --link:#2f6fed;
}

html,body{height:100%;}
body{
  background:var(--bg);
  background-image:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--bg) 80%, #fff 6%) 0%, var(--bg) 55%, var(--bg) 100%);
  color:var(--text);
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
  font-size:.875rem;
}

/* State backgrounds: overrides the normal theme background (in either light
   or dark mode) while jailed/hospitalized, so it's an unmistakable cue
   regardless of which theme is active. */
body.state-jail{
  background:#3a2a12;
  background-image:radial-gradient(ellipse at 50% 0%, #5a4020 0%, #3a2a12 55%, #241a0c 100%);
}
body.state-hospital{
  background:#3c3c3a;
  background-image:radial-gradient(ellipse at 50% 0%, #5c5c58 0%, #3c3c3a 55%, #262624 100%);
}

a{color:var(--link);}
a:hover{color:#b3ccff;}

/* ============ TOP HEADER ============ */
.site-header{
  background:linear-gradient(to bottom, var(--header-red-top), var(--header-red-bottom));
  border-bottom:3px solid #3d3d3d;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  z-index:1030;
}
.logo-box{
  display:flex;align-items:center;justify-content:center;
  min-width:150px;height:44px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.5);
  border-radius:4px;
  color:#fff;font-weight:700;letter-spacing:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  font-family:inherit;
  cursor:pointer;
}
button.logo-box:hover{background:rgba(0,0,0,.5);}
.site-header .nav-link{
  color:#f5dcdc;
  font-weight:600;
  padding:.75rem 1rem;
  border-radius:4px;
}
.site-header .nav-link i{margin-right:.4rem;}
.site-header .nav-link:hover{color:#fff;background:rgba(255,255,255,.08);}
.site-header .nav-link.active{color:#fff;background:rgba(0,0,0,.25);}

.dropdown-menu .dropdown-item i{width:16px;text-align:center;color:var(--text-muted);}

.theme-icon-light{display:none;}
.theme-icon-dark{display:inline;}
:root[data-theme="light"] .theme-icon-light{display:inline;}
:root[data-theme="light"] .theme-icon-dark{display:none;}

/* ============ PAGE WRAP (preserves side gutters) ============ */
.site-wrap{
  max-width:1250px;         /* keeps the empty space either side, like the mockup */
  margin:0 auto;
  padding:1.5rem 1rem 3rem;
}
@media (min-width:1400px){
  .site-wrap{max-width:1250px;} /* never grows past this, gutters always preserved */
}

/* ============ PANELS / CARDS ============ */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:6px;
  margin-bottom:1.25rem;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  overflow:hidden;
}
.panel-header{
  background:linear-gradient(to bottom,#565656,#3d3d3d);
  border-bottom:1px solid #2a2a2a;
  padding:.5rem .9rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.7);
}
.panel-header.text-center{text-align:center;}
.panel-body{padding:.9rem;}
.panel-body.p-0{padding:0;}

/* ============ SIDEBAR ============ */
@media (min-width:992px){
  .sidebar.col-lg-3{flex:0 0 240px;width:240px;}
  main.col-lg-9{flex:1 1 0;width:auto;max-width:100%;}
}
.sidebar .panel{margin-bottom:1.25rem;}

/* Player Info + Navigation rendered as one connected block */
.sidebar-connected{margin-bottom:1.25rem;}
.sidebar-connected .panel{margin-bottom:0;border-radius:0;border-bottom:none;}
.sidebar-connected .panel:first-child{border-top-left-radius:6px;border-top-right-radius:6px;}
.sidebar-connected .panel:last-child{
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  border-bottom:1px solid var(--panel-border);
}

.player-info{position:relative;font-size:.85rem;}
.player-info .settings{
  position:absolute;top:.6rem;right:.7rem;color:#bbb;
}
.player-info .settings:hover{color:#fff;}
.player-info dt{color:#fff;}
.player-info .stat-line{margin-bottom:.25rem;}
.player-info .stat-line strong{color:var(--text);}

.bar-row{margin-top:.65rem;}
.bar-row .bar-label{
  display:flex;justify-content:space-between;
  font-weight:700;color:var(--text);font-size:.8rem;margin-bottom:.2rem;
}
.bar-row .bar-label span:last-child{font-weight:400;color:var(--text-muted);}
.progress{height:7px;background:#1e1e1e;border-radius:4px;box-shadow:inset 0 1px 2px rgba(0,0,0,.7);}
.progress-bar.energy{background:linear-gradient(to bottom,#5ce157,#2c9e24);}
.progress-bar.awake{background:linear-gradient(to bottom,#66bb6a,#2e7d32);}
.progress-bar.happiness{background:linear-gradient(to bottom,#ffa726,#ef6c00);}
.progress-bar.health{background:linear-gradient(to bottom,#ef5350,#c62828);}

/* Mobile-only stat bar strip: 4 equal columns, icon+value above the bar */
.mobile-stat-bars{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:var(--panel-alt);
}
.stat-col{
  padding:0 .35rem .3rem;
  border-right:1px solid var(--panel-border);
  min-width:0;
}
.stat-col:last-child{border-right:none;}
.stat-col .progress{height:5px;}
.stat-col-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.25rem;
  font-size:.7rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.3rem;
}
.stat-col-top i{color:var(--text-muted);flex-shrink:0;}

.side-nav{list-style:none;margin:0;padding:0;}
.side-nav li a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .9rem;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid #2a2a2a;
  background:var(--panel);
  transition:background .12s;
}
.side-nav li:last-child a{border-bottom:0;}
.side-nav li a:hover{background:#3d3d3d;color:#fff;}
.side-nav li a.active{background:#46181c;color:#fff;}
.side-nav li a i{width:16px;text-align:center;color:#bdbdbd;}
.side-nav .badge{
  margin-left:auto;
  background:#4a4a4a;color:#ddd;font-weight:600;
}

.logout-link{
  display:block;
  text-align:center;
  padding:.6rem;
  color:#ff6b7d;
  font-weight:600;
  text-decoration:none;
}
.logout-link:hover{color:#ff8f9c;}
.logout-link i{margin-right:.4rem;}

/* ============ MAIN CONTENT ============ */
.page-heading{
  color:var(--text);font-weight:400;font-size:1.35rem;
  padding-bottom:.5rem;margin-bottom:1rem;
  border-bottom:1px solid #3a3a3a;
}

/* Dark alert variants */
.alert{border-width:1px;font-size:.85rem;padding:.65rem .9rem;}
.alert-primary{background:#0e2a52;border-color:#123a72;color:#5b9bff;}
.alert-secondary{background:#3a3a3a;border-color:#4c4c4c;color:#cfcfcf;}
.alert-success{background:#0e3826;border-color:#155636;color:#3ddc84;}
.alert-danger{background:#46121d;border-color:#6b1a2a;color:#ff6b7d;}
.alert-warning{background:#4a3b00;border-color:#6e5800;color:#ffd54f;}
.alert-info{background:#0c3a44;border-color:#11525f;color:#4dd0e1;}
.alert-light{background:#565b61;border-color:#6a7077;color:#f1f1f1;}
.alert-dark{background:#26292d;border-color:#3a3e43;color:#d0d0d0;}

/* Table */
.table-dark-theme{margin:0;color:var(--text);}
.table-dark-theme thead th{
  background:var(--panel);color:var(--text);border-bottom:1px solid #4a4a4a;
  font-size:.8rem;padding:.55rem .9rem;
}
.table-dark-theme td{
  background:var(--panel-alt);
  border-bottom:1px solid #3d3d3d;
  padding:.5rem .9rem;color:var(--text);font-size:.83rem;
}
.table-dark-theme tbody tr:nth-child(even) td{background:#313131;}
.table-dark-theme tbody tr:hover td{background:#3a3a3a;}
.table-dark-theme a{color:#bcd4ff;}

.card-body-text{padding:.9rem;color:var(--text-muted);border-bottom:1px solid #3d3d3d;}

/* List group */
.list-group-item{
  background:var(--panel-alt);
  border-color:#3d3d3d;
  color:var(--text);
  font-size:.85rem;
}
.list-group-item:hover{background:#383838;color:#fff;}

/* Pagination */
.pagination .page-link{
  background:#2c2c2c;border-color:#454545;color:var(--text);
  font-size:.83rem;
}
.pagination .page-link:hover{background:#3d3d3d;color:#fff;}
.pagination .page-item.active .page-link{
  background:#0d6efd;border-color:#0d6efd;color:#fff;
}
.pagination .page-item.disabled .page-link{background:#262626;color:#666;}

/* Forms */
.form-label{color:var(--text-muted);font-size:.83rem;}
.form-control,.form-select{
  background:#2a2a2a;border:1px solid #4a4a4a;color:#e0e0e0;font-size:.85rem;
}
.form-control:focus,.form-select:focus{
  background:#2e2e2e;border-color:#6a6a6a;color:#fff;
  box-shadow:0 0 0 .2rem rgba(255,255,255,.05);
}
.form-control::placeholder{color:#777;}
.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bbb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Auth tabs (login/register) */
.nav-tabs{border-bottom-color:var(--panel-border);}
.nav-tabs .nav-link{color:var(--text-muted);border:1px solid transparent;background:none;}
.nav-tabs .nav-link:hover{color:var(--text);border-color:var(--panel-border) var(--panel-border) var(--panel-border);}
.nav-tabs .nav-link.active{color:var(--text);background:var(--panel);border-color:var(--panel-border) var(--panel-border) var(--panel);}

/* Dropdown menu dark */
.dropdown-menu{background:#2c2c2c;border:1px solid #4a4a4a;}
.dropdown-item{color:var(--text);font-size:.85rem;}
.dropdown-item:hover{background:#3d3d3d;color:#fff;}

/* Modal dark */
.modal-content{background:var(--panel);border:1px solid var(--panel-border);color:var(--text);}
.modal-header,.modal-footer{border-color:var(--panel-border);}
.btn-close{filter:invert(1) grayscale(100%) brightness(1.5);}

/* ============ FOOTER ============ */
.site-footer{
  background:#252525;
  border-top:1px solid #3a3a3a;
  padding:1.25rem 0;
  margin-top:2rem;
}
.site-footer .logo-box{min-width:130px;height:40px;background:#1d1d1d;border-color:#111;}
.site-footer .copy{color:var(--text-muted);font-size:.8rem;}
.site-footer .copy strong,.site-footer .copy a{color:#ddd;}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:4px;
  background:#1d1d1d;color:#ccc;margin-left:.35rem;
  border:1px solid #111;
}
.social-btn:hover{background:#0d6efd;color:#fff;}

/* Responsive: sidebar hidden on small screens for now (mobile layout TBD) */
@media (max-width: 991.98px){
  .site-wrap{padding:1rem .75rem 2rem;}
  .sidebar{display:none;}

  /* Main header row: logo shrinks to just "R", icon nav shares the same row
     (rather than wrapping to its own line), and the stat bars sit in their
     own band directly below, separated by the header's bottom border. */
  .site-header .site-wrap{padding-top:.4rem;padding-bottom:.4rem;}
  .site-header .header-top{border-bottom:2px solid rgba(0,0,0,.35);}
  .logo-box{height:32px;width:40px;min-width:40px;padding:0;font-size:.85rem;letter-spacing:0;}

  .header-nav{
    order:2;
    flex:1 1 auto;
    width:auto;
    display:flex;
    flex-wrap:nowrap;
    gap:0;
  }
  .header-nav .nav-link{
    flex:1 1 0;
    min-width:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1;
    padding:.4rem .3rem;
    font-size:.68rem;
    border-right:1px solid rgba(255,255,255,.15);
    border-radius:4px 4px 0 0;
  }
  .header-nav .nav-link.active{color:#fff;background:#46181c;}
  .header-nav .nav-link span{display:none;}
  .header-nav .nav-link:last-child{border-right:none;}
  .header-nav .nav-link i{margin-right:0;font-size:1.15rem;line-height:1;display:block;}
}