@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
/* ------- The comments content ------- */

.shoutbox {
    width: 100%;
    overflow: hidden;
}

/* dashboard tiles (dark cards) */
div[id^="rcorners"],
.donate {
  margin-bottom: 30px;
  border-radius: 8px;
  background: #2b2f33;
  padding: 16px;
  width: auto;
  height: auto;
  color: #e6e9eb;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.02);
}

/* Stat widgets (like the reference dashboard) */
.stat-widget {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 132px;
  padding: 16px 18px;
}

/* subtle hover like the reference */
.stat-widget:hover {
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* consistent spacing between widget rows/cols */
.dashboard-grid {
  margin-bottom: 14px;
}


/* Dashboard grid: user wants EXACTLY 3 tiles per row on desktop.
   home.php uses: <div class="row dashboard-grid">. */
.row.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

/* Bootstrap's `.row` clearfix uses `:before`/`:after`. When the row becomes a grid container,
   those pseudo-elements become grid items and can create an "empty" first tile.
   Disable them only for this dashboard grid. */
.row.dashboard-grid::before,
.row.dashboard-grid::after {
  content: none !important;
  display: none !important;
}

/* Note: tiles are direct children of `.row.dashboard-grid` (no bootstrap col-* wrappers). */

/* Tablet: allow slightly smaller cards so 2 columns fit comfortably */
@media (max-width: 992px) {
  .row.dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 576px) {
  .row.dashboard-grid {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
}

/* Ensure the card itself stretches to the full grid column width */
.row.dashboard-grid .stat-widget,
.row.dashboard-grid div[id^="rcorners"],
.row.dashboard-grid .donate {
  width: 100%;
}

/* (deprecated) 420px rule replaced by the 576px rule above */

/* Avoid extra bottom spacing in the grid. `gap` already handles spacing. */
.row.dashboard-grid > * {
  margin-bottom: 0 !important;
}

/* make cards look like the reference: a bit wider, and keep values from wrapping */
.stat-meta {
  white-space: nowrap;
}

/* Note: we size via flex-basis/max-width above; bootstrap column widths are ignored here */

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4553e; /* reference red */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 10px 26px rgba(0,0,0,0.55);
  font-size: 20px;
}

/* Slightly larger icon, but keep it in one place (avoid duplicate rules) */
.stat-icon {
  width: 52px;
  height: 52px;
}

.stat-meta {
  min-width: 0;
}

.stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230,233,235,0.7);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #e6e9eb;
  line-height: 1.1;
}

.stat-value {
  font-size: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-sub {
  font-size: 12px;
  color: rgba(230,233,235,0.75);
  margin-top: 4px;
}

.stat-widget--action .stat-value {
  font-size: 18px;
}

.stat-actions {
  margin-top: 10px;
}

.stat-actions .form-control {
  height: 34px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* make the global message widget look good when wider */
.stat-widget--action .stat-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.stat-widget--action .stat-actions .form-control {
  flex: 1 1 260px;
  margin-bottom: 0;
}

.donateB{
  text-align: center;
  margin-top: 18px;
}

/* dashboard: fix form controls on dark background */
.box-panel .form-control,
.textInput .form-control,
input.form-control {
  background-color: #1f2326;
  border: 1px solid rgba(255,255,255,0.08);
  color: #e6e9eb;
}

.box-panel .form-control:focus,
.textInput .form-control:focus,
input.form-control:focus {
  border-color: rgba(135,191,239,0.6);
  box-shadow: 0 0 0 2px rgba(135,191,239,0.18);
}

/* cleaner content spacing + match mock */
.page-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: rgba(255,255,255,0.82);
}

/* make hover tooltip work reliably */
body.sidebar-collapsed .nav-sidebar > li > a {
  position: relative;
}

/* unify button look on dark */
.btn.btn-outline,
.btn-primary.btn-outline {
  border-color: rgba(255,255,255,0.15);
}

.shoutbox-form form #shoutbox-comment {
  background-color: #1f2326;
  box-shadow: 0 8px 20px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
    outline: none;
    max-width: 400px;
    width: 100%;
    height: 41px;
    margin-bottom: 15px;
    resize: none;
    font-weight: normal;
    font: inherit;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  color: #e6e9eb;
}

.shoutbox-form form #shoutbox-comment::placeholder {
  color: rgba(230,233,235,0.55);
}

.shoutbox-form form input[type=submit] {
    background-color: #87bfef;
    border: 1px solid #e6e7e8;
    box-shadow: 0px 1px 2px 0.00px rgba(0, 0, 0, 0.1);
    width: 110px;
    height: 41px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 38px;
    outline: none;
    margin-left: auto;
    cursor: pointer;
}

/* ------- Make the page responsive ------- */
/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */

/*login page*/

.kick {
	margin-left: 35%;
	margin-right: 10px;
}

.rKick {
	margin-left: 40%;
}

/* Legacy light-card styles removed. Unified dark card rules are declared at top of this file. */


body {
  font-family: 'Open Sans';
  color: inherit;
}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.searchBar {
	margin-left: 60%;
	margin-top: -30px;
}

/* Vehicles page now uses the shared read-only toolbar + table-dark styles (see players page rules below). */

/* Players page: toolbar like the reference (records-per-page left, search right) */
.players-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 14px;
  flex-wrap: nowrap;
}

/* when used with bootstrap .row, kill the default negative margins so it doesn't look “full width” */
.players-toolbar.row {
  margin-left: 0;
  margin-right: 0;
}

.players-toolbar__col-left,
.players-toolbar__col-right {
  padding-left: 0;
  padding-right: 0;
}

.players-toolbar__col-right {
  display: flex;
  justify-content: flex-end;
}

.players-toolbar__left,
.players-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.players-toolbar__label {
  font-size: 12px;
  color: rgba(214,216,218,0.82);
  margin: 0;
}

.players-toolbar__select {
  width: 90px;
}

/* keep the search compact like the reference */
.players-toolbar__right .input-group {
  width: 360px;
  max-width: 100%;
}

/* allow stacking on small screens */
@media (max-width: 768px) {
  .players-toolbar {
    flex-wrap: wrap;
  }

  .players-toolbar__col-right {
    justify-content: flex-start;
  }

  .players-toolbar__right .input-group {
    width: 100%;
  }
}

/* ensure the action renders like a button (not a link) */
.players-profile-btn {
  display: inline-block;
  white-space: nowrap;
}

/* Tables: center action buttons in the last column (e.g., vehicles "Zum Fahrzeug") */
.main .table.table-dark > thead > tr > th:last-child,
.main .table.table-dark > tbody > tr > td:last-child {
  text-align: center;
  white-space: nowrap;
}

.main .table.table-dark > tbody > tr > td:last-child form {
  display: inline-block;
  margin: 0;
}

/* Dark table look like the screenshot */
.table.table-dark,
.table.table-dark > thead > tr > th,
.table.table-dark > tbody > tr > td {
  background-color: #262a2c;
  color: #d6d8da;
  border-color: rgba(255,255,255,0.06);
}

.table.table-dark > thead > tr > th {
  color: rgba(214,216,218,0.72);
  font-size: 12px;
  text-transform: none;
}

.table.table-dark.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #24282a;
}

.table.table-dark .btn-link {
  color: rgba(135,191,239,0.9);
}

.table.table-dark .btn-link:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Players page: make EVERYTHING consistently dark (fix white select/input/pagination backgrounds) */
.main .players-toolbar .form-control,
.main .players-toolbar select.form-control,
.main .players-toolbar input.form-control,
.main .players-toolbar .input-group-btn .btn,
.main .table.table-dark .form-control,
.main .pagination > li > a,
.main .pagination > li > span {
  background-color: #1f2326 !important;
  color: #e6e9eb !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.main .players-toolbar .input-group-btn .btn {
  background-color: #2b2f33 !important;
}

.main .players-toolbar .form-control::placeholder {
  color: rgba(230,233,235,0.55);
}

.main .pagination > .active > a,
.main .pagination > .active > span,
.main .pagination > .active > a:hover,
.main .pagination > .active > span:hover,
.main .pagination > .active > a:focus,
.main .pagination > .active > span:focus {
  background-color: #d4553e !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #ffffff !important;
}

.main .pagination > li > a:hover,
.main .pagination > li > span:hover,
.main .pagination > li > a:focus,
.main .pagination > li > span:focus {
  background-color: #2b2f33 !important;
  color: #ffffff !important;
}

.main .pagination > .disabled > span,
.main .pagination > .disabled > span:hover,
.main .pagination > .disabled > span:focus,
.main .pagination > .disabled > a,
.main .pagination > .disabled > a:hover,
.main .pagination > .disabled > a:focus {
  background-color: #1b1f22 !important;
  color: rgba(230,233,235,0.35) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Table striping: keep both odd/even rows dark (bootstrap makes one white otherwise) */
.main .table.table-dark > tbody > tr,
.main .table.table-dark > tbody > tr > td {
  background-color: #262a2c !important;
}

.main .table.table-dark.table-striped > tbody > tr:nth-of-type(odd),
.main .table.table-dark.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #24282a !important;
}

/* Players page: center the main title like the reference */
.main .players-title {
  text-align: center;
  width: 100%;
  color: rgba(255,255,255,0.95);
}

/* Players page subtitle under the title */
.main .players-title + .page-header {
  color: rgba(255,255,255,0.70);
}

/* Logs page: center title and keep text bright on dark background */
.main .logs-title {
  text-align: center;
  width: 100%;
  color: rgba(255,255,255,0.95);
}

/* Logs toolbar: widen source select so full labels fit */
.main .logs-toolbar__select {
  width: 220px;
}

@media (max-width: 768px) {
  .main .logs-toolbar__select {
    width: 100%;
  }
}

/* Make sure logs table inherits the dark-table rules reliably */
.main .table.table-dark > tbody > tr > td,
.main .table.table-dark > thead > tr > th {
  color: inherit;
}

/* Keep pagination consistent even after clicking (visited/focus styles can change) */
.main .pagination > li > a:visited {
  color: #e6e9eb !important;
}

.main .pagination > li > a:focus,
.main .pagination > li > a:active {
  outline: none;
  box-shadow: none;
  background-color: #2b2f33 !important;
  color: #ffffff !important;
}

/* Ensure the pagination container itself is always dark */
.main .pagination {
  background: transparent;
}

.main .pagination > li > a,
.main .pagination > li > span {
  min-width: 34px;
  text-align: center;
  border-radius: 0 !important;
}

.searchBar-Bar {
    width: 300px;
}

.searchBarCash {
	margin-left: calc(100% - 375px);
}


/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  background: linear-gradient(180deg, #2c3133 0%, #232729 100%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.navbar-inverse {
  border-color: transparent;
}

.navbar-inverse .navbar-nav > li > a {
  padding-top: 18px;
  padding-bottom: 18px;
  color: rgba(230,233,235,0.92);
}

.navbar-inverse .navbar-nav > li > a:hover {
  color: #ffffff;
  background-color: transparent;
}

.navbar-inverse .navbar-brand {
  padding-top: 10px;
  padding-bottom: 16px;
}

@media (min-width: 768px) {
  .navbar-fixed-top {
    min-height: 60px;
  }

  .sidebar {
    top: 60px;
  }
}

.navbar-brand {
  font-size: 1.5em;
  color: #fff;
}

.navbar-brand span {
  color: #fff;
  font-weight: 300;
}

.navbar-brand a {
  margin-left: 5px;
  color: #fff;
}


/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px 12px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #14161a; /* dark sidebar */
    border-right: 1px solid rgba(255,255,255,0.03);
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin: -5px -21px 20px -20px;
}
.nav-sidebar > li > a {
  padding: 12px 14px;
  font-size: 1.05em;
  color: #cfd6da;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: none;
}

/* Icon-only collapsed sidebar styles */
body.sidebar-collapsed .sidebar {
  width: 72px !important;
  padding: 18px 8px !important;
}

body.sidebar-collapsed .content {
  margin-left: 72px !important;
}

/* Bootstrap pages use `.main` instead of `.content` for the main area */
body.sidebar-collapsed .main {
  margin-left: 72px !important;
}

/* When we collapse the sidebar we also need to neutralize Bootstrap column offsets
   (col-sm-offset-3 / col-md-offset-2), otherwise the grid looks shifted and leaves empty space. */
@media (min-width: 768px) {
  body.sidebar-collapsed .col-sm-offset-3 {
    margin-left: 0 !important;
  }
  body.sidebar-collapsed .col-md-offset-2 {
    margin-left: 0 !important;
  }
}

body.sidebar-collapsed .nav-sidebar > li > a {
  justify-content: center;
  padding: 10px 6px;
}

.nav-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: #fff;
  font-size: 18px;
}

.nav-label {
  margin-left: 8px;
  white-space: nowrap;
  display: inline-block;
  color: #cfd6da;
}

/* hide labels in collapsed state, show as hover tooltip */
body.sidebar-collapsed .nav-label {
  display: none;
}
body.sidebar-collapsed .nav-sidebar > li > a:hover .nav-label {
  display: block;
  position: absolute;
  left: 76px;
  background: #232427;
  padding: 8px 10px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  color: #fff;
}

/* ensure the dashboard area stays dark even if bootstrap defaults are applied */
.container-fluid,
.row {
  background: transparent !important;
}

/* Ensure absolutely no white page gutters */
html,
body {
  /* Global app background (outside cards/main) */
  background: radial-gradient(1200px 600px at 20% 0%, rgba(212,85,62,0.18) 0%, rgba(212,85,62,0.00) 55%),
              radial-gradient(900px 520px at 85% 10%, rgba(135,191,239,0.14) 0%, rgba(135,191,239,0.00) 60%),
              linear-gradient(180deg, #171a1d 0%, #121416 100%) !important;
  overflow-x: hidden;
}

.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

/* Stop bootstrap columns from creating a wider-than-viewport layout */
.container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Bootstrap gives .main a white-looking page because the body background doesn't extend
   under it on some setups; force the main content area dark like the reference. */
.main {
  background: #262a2c !important;
  min-height: 100vh;
  padding-top: 0px;
}

/* Reduce the big left/top whitespace in the dashboard like the reference */
.main p {
  margin-bottom: 18px;
  color: rgba(214,216,218,0.85);
}

/* Dashboard page header (title + subtitle) */
.page-head {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px;
  padding: 1em;
  padding-bottom: 5px;
  text-align: center;
}

.page-title {
  margin: 8px 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(230,233,235,0.95);
}

.page-subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(214,216,218,0.82);
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  background-color: rgba(255,255,255,0.03);
  color: #ffffff;
  border-radius: 6px;
}

.nav-sidebar > li > a:hover {
    background-color: rgba(255,255,255,0.02);
    padding-left: 14px;
    transition: all .2s ease;
}
/*
div#txt{
margin-top:10%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
}
*/
.playerButtons {
	display: inline;
	float: left;
	margin: 0;
	margin-right: 5px;
	margin-top: -5px;

}

/*
 * Main content
 */

.main {
  padding: 0px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 16px;
    padding-left: 0px;   /* 👈 erzeugt Platz links */
  }
}

/* Match the reference layout: slimmer sidebar + content aligned to it */
@media (min-width: 768px) {
  .sidebar {
    width: 220px;
  }

  /* Default (expanded sidebar) */
  body:not(.sidebar-collapsed) .main {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }

  /* Collapsed sidebar */
  body.sidebar-collapsed .main {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
  }

  /* Remove bootstrap offsets regardless of state; we control layout via the rules above */
  .col-sm-offset-3,
  .col-md-offset-2 {
    margin-left: 0 !important;
  }
}

.main > h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (min-width: 1200px) {
  .dashboard-grid {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
  }
}

.btn-outline {
	background-color: transparent;
	color: inherit;
	transition: all .5s;
}

.btn-primary.btn-outline {
	color: #428bca;
}

/* --- Staff page + bootstrap defaults: keep tables/inputs/modals consistently dark --- */

/* Staff menu: center title/subtitle and keep them bright */
.main h1 {
  text-align: center;
  color: rgba(255,255,255,0.95);
}

.main .page-header {
  text-align: center;
  color: rgba(255,255,255,0.72);
}

/* Generic striped tables (staff.php uses .table.table-striped without .table-dark) */
.main .table.table-striped,
.main .table.table-striped > thead > tr > th,
.main .table.table-striped > tbody > tr > td {
  background-color: #262a2c !important;
  color: #d6d8da !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.main .table.table-striped > thead > tr > th {
  color: rgba(255,255,255,0.80) !important;
}

.main .table.table-striped > tbody > tr:nth-of-type(odd),
.main .table.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #24282a !important;
}

/* Ensure form controls inside striped tables stay dark */
.main .table.table-striped .form-control {
  background-color: #1f2326 !important;
  color: #e6e9eb !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.main .table.table-striped .form-control::placeholder {
  color: rgba(230,233,235,0.55) !important;
}

.main .table.table-striped .form-control:focus {
  border-color: rgba(135,191,239,0.6) !important;
  box-shadow: 0 0 0 2px rgba(135,191,239,0.18) !important;
}

/* Modal: bootstrap defaults are light; force dark surfaces */
.modal-content {
  background-color: #262a2c;
  color: #d6d8da;
  border: 1px solid rgba(255,255,255,0.06);
}

.modal-header,
.modal-footer {
  border-color: rgba(255,255,255,0.06);
}

.modal-title {
  color: rgba(230,233,235,0.95);
}

.modal .close,
.modal .close:hover {
  color: #ffffff;
  opacity: 0.9;
}

.modal-backdrop.in {
  opacity: 0.6;
}

/* --- Global dark overrides for legacy Bootstrap components (fix remaining white blocks) --- */
/* Panels (e.g., editPlayer.php sections like "Player Info") */
.panel {
  background-color: #262a2c;
  border: 1px solid rgba(255,255,255,0.06);
}

.panel-heading {
  background-color: #2b2f33 !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: rgba(230,233,235,0.92) !important;
}

.panel-body {
  background-color: #262a2c;
  color: #d6d8da;
}

.panel-footer {
  background-color: #232729;
  border-color: rgba(255,255,255,0.06);
  color: #d6d8da;
}

/* Wells are white by default */
.well {
  background-color: #262a2c;
  border: 1px solid rgba(255,255,255,0.06);
  color: #d6d8da;
}

/* Tables without .table-dark: keep them dark too */
.main .table,
.main table {
  background-color: #262a2c;
  color: #d6d8da;
}

.main .table > thead > tr > th,
.main table > thead > tr > th {
  background-color: #232729;
  color: rgba(214,216,218,0.82);
  border-color: rgba(255,255,255,0.06);
}

.main .table > tbody > tr > td,
.main table > tbody > tr > td {
  background-color: #262a2c;
  border-color: rgba(255,255,255,0.06);
}

/* Horizontal rules (often appear too bright) */
hr {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* --- Tabs: make Bootstrap tabs fit the dark theme (used for player info/actions) --- */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-tabs > li > a {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom-color: transparent;
  color: rgba(230,233,235,0.78);
  margin-right: 6px;
  border-radius: 4px 4px 0 0;
  padding: 10px 12px;
}

.nav-tabs > li > a:hover {
  background: rgba(255,255,255,0.05);
  color: #ffffff;
  border-color: rgba(255,255,255,0.10);
  border-bottom-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: #2b2f33;
  color: #ffffff;
  border-color: rgba(255,255,255,0.10);
  border-bottom-color: #2b2f33;
}

.tab-content {
  background: #262a2c;
  border: 1px solid rgba(255,255,255,0.06);
  border-top: none;
  border-radius: 0 6px 6px 6px;
  padding: 14px;
}

/* Two-column layout inside panels (Player info left / actions right) */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 992px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }
}

/* Action blocks/buttons like the screenshot */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  .action-grid {
    grid-template-columns: 1fr;
  }
}

.action-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  background: #2b2f33;
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(230,233,235,0.92);
  text-align: center;
  font-weight: 600;
}

.action-btn:hover {
  background: #30353a;
  color: #ffffff;
}

.action-btn--danger {
  background: #d4553e;
  border-color: rgba(0,0,0,0.12);
  color: #ffffff;
}

.action-btn--danger:hover {
  background: #db604a;
}

/* --- Gang edit page (editGang.php) --- */
.gang-actions {
  margin: 10px 0 12px;
  padding: 0 10px;
}

.gang-actions__btn {
  display: block;
  width: 100%;
  background: #2b2f33;
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(230,233,235,0.92);
  padding: 10px 14px;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
}

.gang-actions__btn:hover {
  background: #30353a;
  color: #ffffff;
}

.gang-actions--danger .gang-actions__btn {
  background: #d4553e;
  border-color: rgba(0,0,0,0.12);
  color: #ffffff;
}

.gang-actions--danger .gang-actions__btn:hover {
  background: #db604a;
}

.gang-stats {
  margin: 0;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

/* `.gang-stats` is also a Bootstrap `.row`; disable clearfix pseudo elements for grid */
.row.gang-stats {
  margin-left: 0;
  margin-right: 0;
}

.row.gang-stats::before,
.row.gang-stats::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 992px) {
  .gang-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .gang-stats {
    grid-template-columns: 1fr;
  }
}

.gang-stat {
  border-radius: 8px;
  background: #2b2f33;
  padding: 16px;
  color: #e6e9eb;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 110px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.gang-stat__icon {
  flex: 0 0 auto;
}

.gang-stat__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.gang-stat__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8f2a18;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 10px 26px rgba(0,0,0,0.55);
  font-size: 20px;
}

.gang-stat__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230,233,235,0.7);
  margin-bottom: 4px;
}

.gang-stat__value {
  /* keep in sync with the right-side cards */
  font-size: 22px;
  font-weight: 700;
  color: #e6e9eb;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure the right-side cards use the same label styling as the top stats */
.gang-sidecard__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230,233,235,0.7);
  margin-bottom: 4px;
}

.gang-inline-input {
  height: 34px;
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 700;
}

.gang-content {
  /* bring the lower area closer to the stat cards (raise member list) */
  margin: 6px 0 0;
  padding: 0 10px;
  display: grid;
  /* Same 5-column rhythm as the top stats row */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* `.gang-content` is also a Bootstrap `.row`. Neutralize Bootstrap's row/clearfix behavior
   because it can fight with CSS grid and cause weird column widths/"floating" panels. */
.row.gang-content {
  margin-left: 0;
  margin-right: 0;
}

.row.gang-content::before,
.row.gang-content::after {
  content: none !important;
  display: none !important;
}

.gang-content__left,
.gang-content__right {
  min-width: 0;
}

.gang-content__left {
  justify-self: stretch;
}

.gang-content__right {
  justify-self: stretch;
}

/* Remove extra empty height in the left column so the member list sits higher */
.gang-content__left {
  align-self: start;
  grid-column: 1 / span 3;
}

.gang-content__right {
  grid-column: 4 / span 2;
}

/* On very wide screens, we still keep the same 5-column rhythm (like the top cards). */

@media (max-width: 992px) {
  .gang-content {
    grid-template-columns: 1fr;
  }
  .gang-content__left,
  .gang-content__right {
    grid-column: auto;
  }
}

.gang-panel {
  border-radius: 8px;
  background: #2b2f33;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
  overflow: hidden;
  width: 100%;
}

.gang-panel__header {
  padding: 10px 14px;
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gang-panel__body {
  padding: 10px 12px;
}

/* Member list: only scroll vertically if there are many members (no horizontal scroll bar look) */
.gang-panel .table-responsive {
  overflow-x: hidden;
}

.gang-panel .table {
  width: 100%;
  table-layout: fixed;
}

.gang-panel .table > thead > tr > th,
.gang-panel .table > tbody > tr > td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gang-panel .table {
  margin-bottom: 0;
}

.gang-helptext {
  color: rgba(230,233,235,0.72);
  margin: 0 0 12px;
}

.gang-sidecards {
  display: grid;
  /* two cards next to each other, each roughly equal to a top stat card */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* make the two right cards sit slightly closer to the member list (like the reference) */
.gang-content__right {
  padding-top: 2px;
}

/* Right-top stats cards feel cramped; keep them a bit smaller */
.gang-sidecard {
  /* match the top stat-card sizing */
  min-height: 110px;
  padding: 16px;
}

@media (max-width: 992px) {
  .gang-content {
    grid-template-columns: 1fr;
  }
  .gang-sidecards {
    grid-template-columns: 1fr;
  }
}

.gang-sidecard__value {
  /* match .gang-stat__value */
  font-size: 22px;
  font-weight: 700;
}

@media (max-width: 992px) {
  .gang-sidecards {
    grid-template-columns: 1fr;
  }
}

.gang-sidecard {
  border-radius: 8px;
  background: #2b2f33;
  padding: 16px;
  color: #e6e9eb;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 110px;
}

.gang-sidecard__meta {
  min-width: 0;
}

.gang-sidecard__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8f2a18;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 10px 26px rgba(0,0,0,0.55);
  font-size: 20px;
}

.gang-sidecard__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230,233,235,0.7);
  margin-bottom: 4px;
}

.gang-sidecard__value {
  font-weight: 700;
  color: #e6e9eb;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gang-info {
  display: grid;
  gap: 8px;
}

.gang-info__k {
  color: rgba(230,233,235,0.65);
}

.gang-info__v {
  color: rgba(255,255,255,0.90);
  font-weight: 600;
}
/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: left;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
.nav-sidebar {
  margin-top: 50px;
  margin-bottom: -20px;
}

.searchBar {
	margin-top: 10px;
	margin-left: calc(100% - 350px);
}
}