/* ============================================================
   AMCOMM COMMAND-CENTER THEME v1.0
   Medium Glow • Sharp Falloff • Gold + Blue-White Energy
   ============================================================ */

/* ---------- BRAND COLORS ---------- */
:root {
    --amcomm-gold: #f5c542;
    --amcomm-gold-soft: rgba(245, 197, 66, 0.35);
    --amcomm-gold-faint: rgba(245, 197, 66, 0.15);
    --amcomm-black: #0a0a0a;
    --amcomm-gray: #161616;
    --amcomm-text: #dcdcdc;
    --amcomm-energy: #b8e2ff; /* blue-white energy peak */
}

/* ---------- GLOBAL ---------- */
body.dark-mode {
    background-color: var(--amcomm-black) !important;
    color: var(--amcomm-text);
    font-family: "Source Sans Pro", sans-serif;
}

/* ---------- BACKGROUND GRID ---------- */
.content-wrapper {
    background-color: var(--amcomm-black);
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
}

/* ---------- NAVBAR ---------- */
.navbar {
    background-color: var(--amcomm-black) !important;
    border-bottom: 1px solid var(--amcomm-gold-soft);
}

.navbar .navbar-brand img {
    filter: drop-shadow(0 0 6px var(--amcomm-gold-soft));
}

.navbar .nav-link {
    color: var(--amcomm-gold) !important;
    font-weight: 600;
    transition: color .2s ease, text-shadow .2s ease;
}

.navbar .nav-link:hover {
    color: white !important;
    text-shadow: 0 0 6px var(--amcomm-gold);
}

.navbar .nav-link.active {
    color: white !important;
    text-shadow: 0 0 8px var(--amcomm-energy);
    border-bottom: 2px solid var(--amcomm-gold);
}
.navbar-button.active {
    background: #f5c542;
    color: #000 !important;
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.55);
}
/* Dropdowns */
.dropdown-menu {
    background-color: var(--amcomm-gray);
    border: 1px solid var(--amcomm-gold-faint);
}

.dropdown-item {
    color: var(--amcomm-gold) !important;
    transition: background .2s ease, color .2s ease;
}

.dropdown-item:hover {
    background-color: rgba(245, 197, 66, 0.1);
    color: white !important;
}

.navbar-button {
    background: #000;
    border: 2px solid #f5c542;
    border-radius: 4px;
    padding: 4px 12px;
    margin-right: 8px;
    color: #f5c542 !important;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background .2s ease, box-shadow .2s ease;
}

.navbar-button:hover {
    background: #111;
    box-shadow: 0 0 10px rgba(245, 197, 66, 0.45);
}

.navbar-button.active {
    background: #f5c542;
    color: #000 !important;
}
/* ---------- PRELOADER ---------- */
.preloader img {
    animation: amcommPulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--amcomm-gold));
}

@keyframes amcommPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 12px var(--amcomm-energy)); }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* ---------- FOOTER ---------- */
.main-footer {
    background-color: var(--amcomm-black) !important;
    border-top: 1px solid var(--amcomm-gold-soft);
    color: var(--amcomm-gold);
    padding: 12px 0;
    text-align: center;
}

.footer-support-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--amcomm-gold);
    text-shadow: 0 0 6px var(--amcomm-gold-soft);
}

.footer-meta {
    color: var(--amcomm-text);
    opacity: 0.8;
}

.footer-social img {
    filter: drop-shadow(0 0 6px var(--amcomm-gold-soft));
}

/* ---------- HOME PAGE (JS-DRIVEN) ---------- */
.amcomm-home {
    padding-top: 20px;
}

#main.amcomm-dynamic {
    display: block;
    width: 100%;
}

/* ---------- TILE SYSTEM (for JS content) ---------- */
.amcomm-tile {
    background-color: var(--amcomm-gray);
    border: 1px solid var(--amcomm-gold-faint);
    border-radius: 6px;
    padding: 16px;
    color: var(--amcomm-text);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.amcomm-tile:hover {
    transform: translateY(-3px);
    border-color: var(--amcomm-gold);
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.4);
}

/* ---------- CARDS ---------- */
.card {
    background-color: var(--amcomm-gray) !important;
    border: 1px solid var(--amcomm-gold-faint);
}

.card-header {
    color: var(--amcomm-gold);
    border-bottom: 1px solid var(--amcomm-gold-faint);
    font-weight: 600;
}

/* ---------- TABLES ---------- */
.table {
    color: var(--amcomm-text);
}

.table thead th {
    color: var(--amcomm-gold);
    border-bottom: 2px solid var(--amcomm-gold);
}

.table-hover tbody tr:hover {
    background-color: rgba(245, 197, 66, 0.1);
}

/* ---------- BUTTONS ---------- */
.btn {
    border-radius: 4px;
    transition: box-shadow .2s ease, background .2s ease;
}

.btn:hover {
    box-shadow: 0 0 8px var(--amcomm-gold-soft);
}

/* ---------- SCROLLBAR (optional but nice) ---------- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--amcomm-gold-faint);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--amcomm-gold-soft);
}
/* Table text fix for dark background */
.table-dark td,
.table-dark th,
.table td,
.table th {
    color: #f5f5f5 !important; /* soft white for readability */
}

/* Optional: strengthen header contrast */
.table-dark thead th {
    color: #f5c542 !important; /* AmComm gold for headers */
    font-weight: 600;
}

/* Optional: subtle row hover effect */
.table-hover tbody tr:hover {
    background-color: rgba(245, 197, 66, 0.1); /* gold glow on hover */
}


/* Darken footer and navbar */
.main-footer,
.main-header,
.navbar {
  background-color: #000 !important;
  color: #f5f5f5 !important;
  border-top: 1px solid #333 !important;
}
/* Force global dark background */
body,
.wrapper,
/* Allow the grid background to show */
.content-wrapper {
    background-color: transparent !important;
}

/* Keep wrapper dark but not covering the grid */
.wrapper {
    background-color: rgba(0,0,0,0.6) !important; /* adjustable */
}


}

/* Optional: soften the black if you want a charcoal look */
.content-wrapper,
.wrapper {
    background-color: #0d0d0d !important;
}