/* ==================================================
   TheMafiaCode — 3-column Mafia Noir Layout
   Old school feel, no brown / no neon
   ================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Dark neutral background */
  --bg-page:#050608;        /* near-black */
  --bg-page-top:#191b22;    /* subtle cool top */

  --bg-panel:#050608;       /* main panel */
  --bg-panel-soft:#1b1d25;  /* inner cards */
  --bg-sidebar:#181920;     /* left column */
  --bg-rightbar:#181a22;    /* right column */

  /* Ink / text */
  --ink-100:#f4f1e6;        /* warm ivory */
  --ink-90:#e2ddce;
  --ink-70:#c1baaa;
  --ink-50:#938c7f;
  --ink-35:#736d63;

  /* Accents (muted, classic) */
  --accent-gold:#d7b46a;
  --accent-gold-soft:#b99955;

  --accent-green:#6ea56f;   /* subtle mafia green */
  --accent-amber:#f1c170;   /* timers, highlights */
  --accent-red:#b54a4a;     /* danger */
  --accent-purple:#9a7fd6;  /* secondary */

  --radius-s:6px;
  --radius-m:10px;
  --radius-l:16px;

  --shadow-soft:0 4px 14px rgba(0,0,0,.6);
  --shadow-deep:0 10px 30px rgba(0,0,0,.9);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg-page);
  color:var(--ink-100);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}

/* Background gradient & vignette */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg-page-top),var(--bg-page)),
    radial-gradient(1100px 800px at 50% 0, rgba(215,180,100,.12), transparent 60%);
}

/* Links */
a{
  color:var(--accent-gold);
  text-decoration:none;
}
a:hover{
  color:var(--accent-amber);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ==================================================
   APP GRID — 3 columns
   ================================================== */

.app-shell{
  width:100%;
  padding:8px;
}

.app-grid{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr) 220px;
  gap:8px;
}

.app-grid__col{}

/* ==================================================
   LEFT COLUMN — Brand card + menu
   ================================================== */

.brand-card{
  background:linear-gradient(180deg,#25262f,#16171e);
  border-radius:var(--radius-l);
  border:1px solid rgba(0,0,0,.9);
  box-shadow:var(--shadow-deep);
  padding:10px 12px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-card__mark{
  width:40px;
  height:40px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%, #ffffff, #f1e0b2 40%, #6b5a3b 80%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.06em;
  color:#1a130c;
  box-shadow:0 4px 10px rgba(0,0,0,.8);
}
.brand-card__text{
  display:flex;
  flex-direction:column;
}
.brand-card__title{
  margin:0;
  font-family:"Cinzel","Times New Roman",serif;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-size:15px;
  color:var(--ink-100);
}
.brand-card__subtitle{
  margin:2px 0 0;
  font-size:11px;
  color:var(--ink-50);
}

/* Sidebar menu */
.sidebar{
  background:var(--bg-sidebar);
  border-radius:var(--radius-l);
  border:1px solid rgba(0,0,0,.9);
  box-shadow:var(--shadow-deep);
  padding:12px 10px;
  color:var(--ink-90);
}

.sidebar__title{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-70);
}

/* menu structure */
.menu{
  list-style:none;
  margin:0;
  padding:0;
}
.menu__section-label{
  margin:12px 4px 4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ink-50);
}
.menu__rule{
  height:1px;
  margin:4px 2px 8px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(215,180,100,.32),transparent);
}
.menu__item{
  margin:5px 2px;
}
.menu__link{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:var(--radius-m);
  background:linear-gradient(180deg,#22232d,#181a22);
  border:1px solid rgba(0,0,0,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-size:14px;
  color:var(--ink-90);
  text-decoration:none;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease, color .18s ease;
}
.menu__icon{
  width:18px;
  text-align:center;
  opacity:.9;
}
.menu__link:hover{
  background:linear-gradient(180deg,#2c2e39,#1a1c25);
  color:var(--ink-100);
  transform:translateX(3px);
  box-shadow:
    0 6px 14px rgba(0,0,0,.8),
    0 0 0 1px rgba(215,180,100,.35);
}
.menu__link--active{
  background:linear-gradient(180deg,#323442,#1d1f29);
  color:var(--ink-100);
  box-shadow:
    0 0 0 2px rgba(215,180,100,.42),
    0 10px 20px rgba(0,0,0,.9);
}
.menu__badge{
  margin-left:auto;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  background:linear-gradient(180deg,var(--accent-gold),var(--accent-gold-soft));
  color:#1a130c;
  border:1px solid rgba(0,0,0,.9);
}
.menu__badge--alert{
  background:linear-gradient(180deg,var(--accent-red),#7f3232);
  color:#fff;
}

/* ==================================================
   CENTER COLUMN — Nav cards + content
   ================================================== */

.nav-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

/* NAV CARDS: icon + label + timer */
.nav-card{
  flex:1 1 135px;
  min-width:135px;
  background:linear-gradient(180deg,#20222c,#161821);
  border-radius:10px;
  border:1px solid rgba(0,0,0,.95);
  box-shadow:0 4px 12px rgba(0,0,0,.85);
  padding:7px 10px;
  font-size:12px;
  color:var(--ink-90);
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  text-decoration:none;
}
.nav-card__row{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-card__icon{
  width:18px;
  text-align:center;
  font-size:14px;
}
.nav-card__title{
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nav-card__timer{
  font-size:11px;
  color:var(--ink-50);
}
.nav-card:hover{
  background:linear-gradient(180deg,#262937,#181924);
  color:var(--ink-100);
}

/* Main center panel */
.main-panel{
  background:var(--bg-panel);
  border-radius:var(--radius-l);
  border:0px solid rgba(0,0,0,.9);
  padding:14px;
  color:var(--ink-100);
}

/* page title strip inside main panel */
.page-strip{
  background:linear-gradient(180deg,#262936,#181922);
  border-radius:var(--radius-m);
  padding:8px 12px;
  font-size:15px;
  font-weight:700;
  color:var(--ink-100);
  box-shadow:0 4px 12px rgba(0,0,0,.85);
  margin-bottom:10px;
}

/* generic content card */
.card{
  background:var(--bg-panel-soft);
  border-radius:var(--radius-m);
  border:1px solid rgba(0,0,0,.9);
  box-shadow:0 3px 10px rgba(0,0,0,.8);
  padding:12px;
  color:var(--ink-100);
}
.card + .card{
  margin-top:10px;
}
.card__title{
  margin:0 0 6px;
  font-size:15px;
  font-weight:700;
  color:var(--accent-gold);
}
.card__sub{
  margin:0 0 10px;
  font-size:13px;
  color:var(--ink-70);
}

/* forms in cards */
.card label{
  display:block;
  margin:6px 0 3px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-70);
}
.card input[type="text"],
.card input[type="email"],
.card input[type="number"],
.card textarea,
.card select{
  width:100%;
  padding:8px 10px;
  border-radius:var(--radius-s);
  border:1px solid rgba(0,0,0,.9);
  background:#15171f;
  color:var(--ink-100);
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  outline:none;
}
.card input::placeholder,
.card textarea::placeholder{
  color:var(--ink-35);
}
.card input:focus,
.card textarea:focus,
.card select:focus{
  box-shadow:0 0 0 2px rgba(215,180,100,.35);
}
.card textarea{
  resize:vertical;
  min-height:70px;
}

/* ==================================================
   RIGHT COLUMN — Location card + player panel
   ================================================== */

.location-card{
  background:linear-gradient(180deg,#242632,#181922);
  border-radius:var(--radius-l);
  border:1px solid rgba(0,0,0,.9);
  box-shadow:var(--shadow-deep);
  padding:10px 12px;
  margin-bottom:8px;
  font-size:13px;
  color:var(--ink-90);
}
.location-card__label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-70);
}
.location-card__city{
  font-size:14px;
  font-weight:700;
}
.location-card__time{
  font-size:11px;
  color:var(--ink-50);
}

/* rightbar (player panel) */
.rightbar{
  background:var(--bg-rightbar);
  border-radius:var(--radius-l);
  border:1px solid rgba(0,0,0,.95);
  box-shadow:var(--shadow-deep);
  padding:12px;
  color:var(--ink-100);
  font-size:13px;
}

/* player top */
.player-card{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.player-avatar{
  width:52px;
  height:52px;
  border-radius:14px;
  background:radial-gradient(circle at 30% 20%, #ffffff, #f1e0b2 40%, #6b5a3b 80%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  color:#1a130c;
  box-shadow:0 4px 10px rgba(0,0,0,.85);
}
.player-info__name{
  font-weight:700;
  font-size:14px;
}
.player-info__rank{
  font-size:12px;
  color:var(--ink-70);
}
.player-info__sub{
  font-size:11px;
  color:var(--ink-50);
}

/* rightbar buttons */
.rb-buttons{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.rb-btn{
  flex:1 1 auto;
  text-align:center;
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.9);
  background:#232531;
  color:var(--ink-90);
  cursor:pointer;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.rb-btn:hover{
  background:#292b38;
}

/* info list */
.rb-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
}
.rb-list li{
  padding:5px 0;
  border-bottom:1px solid rgba(0,0,0,.5);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rb-list li:last-child{
  border-bottom:none;
}

/* bars */
.bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#050608;
  border:1px solid rgba(0,0,0,.95);
  overflow:hidden;
}
.bar__fill{
  height:100%;
  width:50%;
  background:var(--accent-green);
}

/* ==================================================
   Buttons & helpers
   ================================================== */

.btn{
  display:inline-block;
  padding:7px 12px;
  border-radius:var(--radius-s);
  border:1px solid rgba(0,0,0,.95);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:filter .15s ease, transform .1s ease;
}
.btn--primary{
  background:linear-gradient(180deg,var(--accent-gold),var(--accent-gold-soft));
  color:#1a130c;
}
.btn--danger{
  background:linear-gradient(180deg,var(--accent-red),#7f3232);
  color:#fff;
}
.btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.text-right{ text-align:right; }
.text-center{ text-align:center; }
.muted{ color:var(--ink-50); font-size:12px; }
.small{ font-size:12px; }
.rule-soft{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(215,180,100,.32),transparent);
  border-radius:999px;
  margin:8px 0;
}

/* ==================================================
   Responsive
   ================================================== */

@media (max-width:1100px){
  .app-grid{
    grid-template-columns:230px minmax(0,1fr) 260px;
  }
}
@media (max-width:900px){
  .app-grid{
    grid-template-columns:220px minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  .app-grid__col--right{
    grid-column:1 / -1;
  }
}
@media (max-width:720px){
  .app-grid{
    grid-template-columns:1fr;
  }
}

/* ==================================================
   LOGIN / REGISTER
   ================================================== */

body.login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:var(--bg-page);
}

.login-shell{
  width:100%;
  max-width:420px;
}

.login-brand{
  text-align:center;
  margin-bottom:14px;
}
.login-brand__title{
  margin:0;
  font-family:"Cinzel","Times New Roman",serif;
  font-size:26px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-gold);
}
.login-brand__subtitle{
  margin:4px 0 0;
  font-size:12px;
  color:var(--ink-60);
}

.login-card{
  background:var(--bg-panel);
  border-radius:var(--radius-l);
  border:1px solid rgba(0,0,0,.95);
  box-shadow:var(--shadow-deep);
  padding:18px 16px 16px;
  color:var(--ink-100);
}
.login-card__title{
  margin:0 0 4px;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-90);
}
.login-card__text{
  margin:0 0 14px;
  font-size:13px;
  color:var(--ink-70);
}
.login-card label{
  color:var(--ink-70);
  font-weight:600;
  display:block;
  margin:6px 0 3px;
  font-size:13px;
}
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"],
.login-card textarea{
  width:100%;
  padding:9px 11px;
  border-radius:var(--radius-s);
  border:1px solid rgba(0,0,0,.95);
  background:#15171f;
  color:var(--ink-100);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  outline:none;
}
.login-card input::placeholder,
.login-card textarea::placeholder{
  color:var(--ink-50);
}
.login-card input:focus,
.login-card textarea:focus{
  box-shadow:0 0 0 2px rgba(215,180,100,.35);
}

.login-extra-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 12px;
  font-size:12px;
  color:var(--ink-60);
}
.login-remember{
  display:flex;
  align-items:center;
  gap:6px;
}
.login-remember input[type="checkbox"]{
  accent-color:var(--accent-gold-soft);
}

.login-actions{
  margin-top:4px;
}
.login-actions .btn{
  width:100%;
}

.login-links{
  margin-top:10px;
  text-align:center;
  font-size:12px;
  color:var(--ink-60);
}
.login-links a{
  color:var(--accent-gold);
  text-decoration:none;
}
.login-links a:hover{
  color:var(--accent-amber);
  text-decoration:underline;
}

.login-alert{
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:var(--radius-s);
  background:linear-gradient(180deg,var(--accent-red),#7f3232);
  border:1px solid rgba(0,0,0,.95);
  color:#fff;
  font-size:13px;
  text-align:center;
}

.login-meta{
  margin-top:8px;
  font-size:11px;
  color:var(--ink-50);
  text-align:center;
}
.crime-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.crime-row{
  display:grid;
  grid-template-columns: 150px minmax(0,1fr) 140px;
  gap:12px;
  align-items:center;
  background: var(--panel-900);
  border:1px solid #000;
  border-radius: var(--radius-m);
  padding:10px;
  box-shadow: var(--shadow-deep);
}

.crime-row__image{
  width:100%;
  border-radius:8px;
  overflow:hidden;
  background:#15171f;
  position:relative;
  min-height:80px;
}

/* Optioneel: later echte afbeeldingen plaatsen in /assets/img/crimes/1.jpg etc. */
.crime-row__image--1{ background-image:url('/assets/img/crimes/1.jpg'); }
.crime-row__image--2{ background-image:url('/assets/img/crimes/2.jpg'); }
.crime-row__image--3{ background-image:url('/assets/img/crimes/3.jpg'); }
.crime-row__image--4{ background-image:url('/assets/img/crimes/4.jpg'); }
.crime-row__image--5{ background-image:url('/assets/img/crimes/5.jpg'); }
.crime-row__image--6{ background-image:url('/assets/img/crimes/6.jpg'); }

.crime-row__image--1,
.crime-row__image--2,
.crime-row__image--3,
.crime-row__image--4,
.crime-row__image--5,
.crime-row__image--6{
  background-size:cover;
  background-position:center;
  filter: grayscale(.2);
}

.crime-row__body{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.crime-row__title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.crime-row__title{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--ink-100);
}

.crime-row__desc{
  font-size:13px;
  color:var(--ink-70);
}

.crime-row__progress{
  margin-top:2px;
}

.crime-row__progress-label{
  font-size:12px;
  color:var(--ink-70);
  margin-bottom:3px;
}

.crime-row__bar{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#1f212b;
  border:1px solid #000;
}

.crime-row__meta{
  margin-top:4px;
  font-size:12px;
  color:var(--ink-80);
  display:flex;
  gap:14px;
}

.crime-row__action{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.crime-row__note{
  text-align:right;
}

/* Responsive */
@media (max-width: 900px){
  .crime-row{
    grid-template-columns: 120px minmax(0,1fr);
    grid-template-rows: auto auto;m
  }
  .crime-row__action{
    grid-column:1 / -1;
    flex-direction:row;
    justify-content:flex-end;
  }
}

@media (max-width: 640px){
  .crime-row{
    grid-template-columns: 1fr;
  }
  .crime-row__image{
    min-height:120px;
  }
  .crime-row__action{
    justify-content:flex-start;
    align-items:flex-start;
  }
}
/* Center all page content between the side menus */
.content {
    display: flex;
    justify-content: center;
}

/* Limit all inner content width */
.content > * {
    max-width: 900px;   /* kies 900 / 1000 / 1100 naar smaak */
    width: 100%;
}
/* Limit width of main content cards between the side menus */
.content > .card,
.content > section.card {
  max-width: 950px;   /* speel gerust met 900–1000px */
  margin-left: auto;
  margin-right: auto;
}
/* Global table width in main content */
.content table {
  width: 100%;          /* blijft responsive */
  max-width: 900px;     /* algemene breedte (pas aan naar smaak) */
  margin-left: auto;
  margin-right: auto;   /* centreert de tabel in het middenblok */
}
/* Make middle content area smaller & centered */
.content > .card {
    max-width: 550px;     /* Kies 750–950 naar smaak */
    margin-left: auto;
    margin-right: auto;
}
/* Smaller tables inside content */
.content table {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
/* Narrow profile card in the middle column */
.card--narrow {
    max-width: 950px;   /* pas aan: 700 / 800 / 850 naar smaak */
    margin-left: auto;
    margin-right: auto;
}
.card--narrow {
    max-width: 950px;   /* pas gerust aan */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}