/*!THE CITADEL CUSTOM CSS
FOR USE WITH BOOSTRAP BASED WEBSITES
DEVLOPED BY NYX ELLINGTON
DEVELOPMENT STARTED 10/06/2025
*/ 
/*ROOT ARRAY*/
:root {
	--bs-kryx-bg: #000000;/* Dark Background */
	--bs-kryx-bg-rgb: 0, 0, 0; /* Dark Background RGB */
	--bs-kryx-nav: #1C1C1C;/* Nav BG Dark Grey */
	--bs-kryx-nav-rgb: 28, 28, 28; /* Nav BG Dark Grey RGB */
	--bs-kryx-red: #D32F2F;/* Primary Red */
	--bs-kryx-red-rgb: 211, 47, 47; /* Primary Red */
	--bs-kryx-hover: #FF6666;/* Hover Red */
	--bs-kryx-hover-rgb: 255, 102, 102; /* Hover Red */
	--bs-rodent: #D65050; /* Fuelrats Red */	
    --bs-rodent-rgb: 214, 80, 80; /* Fuelrats Red RGB*/	
	/*POWERPLAY COLOR BLOCK*/
    --bs-edmund: #00960C;
    --bs-edmund-rgb: 0, 150, 12;
    --bs-aisling: #01B2FD;
    --bs-aisling-rgb: 1, 178, 253;
    --bs-arissa: #9E01FC;
    --bs-arissa-rgb: 158, 1, 252;
    --bs-yuri: #FF6301;
    --bs-yuri-rgb: 255, 99, 1;
    --bs-liyong: #00FE77;
    --bs-liyong-rgb: 0, 254, 119;
    --bs-jerome: #FF01FE;
    --bs-jerome-rgb: 255, 1, 254;
    --bs-pranav: #FFF600;
    --bs-pranav-rgb: 255, 246, 0;
    --bs-nakato: #9CFF01;
    --bs-nakato-rgb: 156, 255, 1;
    --bs-denton: #1DD3D4;
    --bs-denton-rgb: 29, 211, 212;
    --bs-archon: #FF0000;
    --bs-archon-rgb: 255, 0, 0;
    --bs-felicia: #FF9E00;
    --bs-felicia-rgb: 255, 158, 0;
    --bs-zemina: #0062FE;
    --bs-zemina-rgb: 0, 98, 254;
}
/*BODY COLOR BLOCK*/
.bg-kryx-bg {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-kryx-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-kryx-nav {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-kryx-nav-rgb), var(--bs-bg-opacity)) !important;
}

.bg-kryx-red {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-kryx-red-rgb), var(--bs-bg-opacity)) !important;
}

.bg-kryx-hover {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-kryx-hover-rgb), var(--bs-bg-opacity)) !important;
}

bg-rodent {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-rodent-rgb), var(--bs-bg-opacity)) !important;
}
/* Kryx Red Button Styling */
.btn-outline-kryx-red {
  --bs-btn-color: var(--bs-kryx-red);
  --bs-btn-border-color: var(--bs-kryx-red);
  --bs-btn-hover-color: #FF6666;
  --bs-btn-hover-bg: var(--bs-kryx-hover);
  --bs-btn-hover-color: #FFFFFF; /* white text on hover */
  --bs-btn-hover-border-color: var(--bs-kryx-red);
  --bs-btn-focus-shadow-rgb: 255, 215, 0;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-kryx-red);
  --bs-btn-active-border-color: var(--bs-kryx-red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #666;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #666;
  --bs-gradient: none;
}

/*TEXT COLOR BLOCK: UNDER TEXT-WHITE-50 8132*/
.text-kryx-red {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-kryx-red-rgb), var(--bs-text-opacity)) !important;
}


.text-rodent {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-rodent-rgb), var(--bs-text-opacity)) !important;
}

/* OVERLAY COLOR TAGS */
.overlay-arqx-gold::before {
  background-color: #FFD700 !important;
}

.overlay-rodent::before {
  background-color: #D65050 !important;
}

.overlay-edmund::before {
  background-color: #00960C !important;
}

.overlay-aisling::before {
  background-color: #01B2FD !important;
}

.overlay-arissa::before {
  background-color: #9E01FC !important;
}

.overlay-yuri::before {
  background-color: #FF6301 !important;
}

.overlay-liyong::before {
  background-color: #00FE77 !important;
}

.overlay-jerome::before {
  background-color: #FF01FE !important;
}

.overlay-pranav::before {
  background-color: #FFF600 !important;
}

.overlay-nakato::before {
  background-color: #9CFF01 !important;
}

.overlay-denton::before {
  background-color: #1DD3D4 !important;
}

.overlay-archon::before {
  background-color: #FF0000 !important;
}

.overlay-felicia::before {
  background-color: #FF9E00 !important;
}

.overlay-zemina::before {
  background-color: #0062FE !important;
}

/* SIDENAV BORDER */
.border-arqx-gold {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-arqx-gold-rgb), var(--bs-border-opacity)) !important;
}
/* ARQX Gold Button Styling */
.btn-outline-arqx-gold {
  --bs-btn-color: var(--bs-arqx-gold);
  --bs-btn-border-color: var(--bs-arqx-gold);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-arqx-gold);
  --bs-btn-hover-border-color: var(--bs-arqx-gold);
  --bs-btn-focus-shadow-rgb: 255, 215, 0;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-arqx-gold);
  --bs-btn-active-border-color: var(--bs-arqx-gold);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #666;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #666;
  --bs-gradient: none;
}
/*ARQX TABLE STYLE */

.table.arqx {
    background-color: #0A0A0A; /* Dark background */
    color: var(--bs-arqx-gold);
    border-color: #555; /* Softer for WCAG contrast */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.table.arqx thead {
    background-color: #1C1C1C;
    color: var(--bs-arqx-gold);
}

.table.arqx tbody tr:nth-child(even) {
    background-color: #111;
}

.table.arqx tbody tr:hover {
    background-color: #222;
}

.table.arqx td,
.table.arqx th {
    border: 1px solid #444;
    vertical-align: middle;
}

.table.arqx .badge {
    font-weight: 500;
    background-color: #222;
    color: var(--bs-arqx-gold);
}

.table.arqx .btn-secondary {
    background-color: #1C1C1C;
    border-color: var(--bs-arqx-gold);
    color: var(--bs-arqx-gold);
}

.table.arqx .btn-secondary:hover {
    background-color: var(--bs-arqx-gold);
    color: #000;
}

/* Pagination Button Spacing */
#paginationControls button {
    margin-left: 6px;
    margin-right: 6px;
}

/* Refined Search Bar Styling */
.input-arqx-search {
    background-color: #1C1C1C;
    color: #FFFFFF;
    border: 1px solid #444444;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.input-arqx-search::placeholder {
    color: #CCCCCC;
}

.input-arqx-search:focus {
    background-color: #1C1C1C;
    color: #FFFFFF;
    outline: none;
    border-color: var(--bs-arqx-gold);
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
}