/* === Global Reset === */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* === Body === */
body {
	margin: 0;
	background-color: #ffffff;
	color: #111111;
	font-family: 'Inter', sans-serif;
}

/* === Header / Title === */
h1 {
	font-size: 2.8rem;
	font-weight: 700;
	color: #58a6ff;
	margin-bottom: 0.5rem;
	text-align: center;
}

/* === Subtitle === */
h2, h3 {
	font-weight: 400;
	color: #a0b3c6;
	margin-bottom: 1rem;
	text-align: center;
}

/* === Paragraphs */
p {
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	text-align: center;
}

/* === Links ===*/
a {
	color: #222222;
	text-decoration: none;
	font-weight: 500;
}

a:hover {
	color: #0a58ca;
	text-decoration: underline;
}

/* === Buttons === */
button, .btn {
	background-color: #198754;
	color: white;
	border: none;
	border-radius: 6px;
	padding: 0.6rem 1.2rem;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
	margin-top: 1rem;
}

button:hover, .btn:hover {
	background-color: #146c43;
}

/* Auth Section */
.auth-links {
	margin-top: 1.5rem;
	text-align: center;
}

.auth-links a {
	margin: 0 0.75rem;
	font-size: 1.1rem;
}

/* === Footer === */
footer {
	background-color: #161b22;
	margin-top: auto;
	padding: 1.5rem;
	font-size: 0.9rem;
	color: #8b949e;
	text-align: center;
	border-top: 1px solid #30363d;
	width: 100%;
}

/* === NAV BAR WRAPPER === */
.site-nav {
  background-color: #f7f7f7;
  border-bottom: 1px solid #e0e0e0;
}

/* 3-SECTION LAYOUT: left | center | right */
.nav-grid {
  max-width: 1350px;
  margin: 0 auto;
  padding: 12px 16px;

  display: grid;
  grid-template-columns: auto 1fr auto; /* left | middle grows | right */
  align-items: center;
  column-gap: 24px;
}

/* LEFT: Logo */
.nav-left .brand img {
  height: 120px;          /* resize logo here */
  width: auto;
  display: block;
}

/* CENTER: Menu */
.nav-center {
  display: flex;          /* makes it easy to center content */
  justify-content: center;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 28px;              /* spacing between links */
}
.menu a {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.menu a:hover {
  color: #0a58ca;
}

/* RIGHT: Logout button */
.nav-right {
  display: flex;
  justify-content: flex-end;
}
.btn-logout {
  background-color: #dc3545;
  color: #fff !important;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.btn-logout:hover {
  background-color: #b02a37;
  color: #fff;
}

/* Optional: stick the nav at the top */
.site-nav {
  position: relative;
  top: 0;
  z-index: 10;
}

/* === Responsive tweaks === */
@media (max-width: 992px) {
  .nav-left .brand img { height: 76px; }
  .menu { gap: 20px; }
}
@media (max-width: 768px) {
  .nav-left .brand img { height: 64px; }
  .menu { gap: 14px; font-size: 0.95rem; }
}
@media (max-width: 600px) {
  /* If you want to collapse to two rows on very small screens */
  .nav-grid {
    grid-template-columns: 1fr auto; /* left spans row; right stays */
    row-gap: 8px;
  }
  .nav-center {
    grid-column: 1 / -1;   /* center menu goes to its own row */
    order: 2;
  }
  .nav-left { order: 1; }
  .nav-right { order: 3; }
  .nav-center { justify-content: center; }
}

.table td, .table th { vertical-align: middle; }
.bg-secondary-subtle { background: #eef1f4; color: #3b4754; }

/* Make DataTables export buttons more visible and styled */
.dt-buttons .btn {
  background-color: #0d6efd !important;  /* Bootstrap primary blue */
  color: white !important;
  border: none !important;
  font-weight: 500;
  margin-right: 6px;
  transition: background-color 0.2s ease-in-out;
}

.dt-buttons .btn:hover {
  background-color: #0b5ed7 !important;
}

/* Space between export buttons and Add IOC */
#export-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-buttons {
  display: inline-flex;
  gap: 0.5rem;
}


/* Make "Go to Intel" or any .btn-success use bright green */
.btn-success {
  background-color: #28a745 !important; /* Bootstrap green */
  border-color: #28a745 !important;
  color: #fff !important;
}
/* Optional: lighten on hover */
.btn-success:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
  color: #fff !important;
}

/* Setting a fixed size for the source column in the intel tab */
table.dataTable td:nth-child(5),
table.dataTable th:nth-child(5) {
  max-width: 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* From Uiverse.io by Galahhad */ 
.theme-switch {
  --toggle-size: 15px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.theme-switch__moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* ---------- Dark mode base ---------- */
html.dark-mode, 
body.dark-mode {
  /* Force the real page background */
  background-color: transparent !important;
  color: #c9d1d9;
}

/* If your layout has a wrapper that sets its own background, include it here */
html.dark-mode body,
html.dark-mode .page,
html.dark-mode main,
html.dark-mode .container-fluid,
html.dark-mode .content-wrapper,
html.dark-mode .page-wrapper,
html.dark-mode .site-nav {
  background-color: transparent !important;
  color: #c9d1d9;
}

html.dark-mode .card {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Dark Mode: Transparent Cards & Surfaces */
html.dark-mode .card,
html.dark-mode .table,
html.dark-mode .bg-white,
html.dark-mode .bg-light,
html.dark-mode .bg-body,
html.dark-mode .bg-body-secondary,
html.dark-mode .bg-body-tertiary,
html.dark-mode .bg-secondary-subtle {
  background-color: rgba(22,27,34,0.55) !important;
  backdrop-filter: blur(6px);    /* Subtle glass blur */
  -webkit-backdrop-filter: blur(6px);
  color: #c9d1d9 !important;
  border-color: rgba(48, 54, 62, 0.5) !important;
}

/* Badges in dark mode */
html.dark-mode .badge.bg-warning.text-dark {
  background-color: #facc15 important;
  color: #111827 !important;
}

html.dark-mode .badge-soft {
  background: #1f2933;
  color: #e5e7eb;
  border-color: #374151;
}

/* Dark mode for .btn-success */
html.dark-mode .btn-success {
  background-color: #22c55e !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

/* Headings / links */
html.dark-mode a { color: #58a6ff; }
html.dark-mode h1, 
html.dark-mode h2, 
html.dark-mode h3, 
html.dark-mode h4 { color: #e6edf3; }

/* Force text-dark to become light in dark mode */
html.dark-mode .text-dark {
  color: #e6edf3 !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: rgba(22,27,34,0.45) !important;
  backdrop-filter: blur(6px);
  color: #c9d1d9 !important;
  border-color: rgba(48,54,61,0.4) !important;
}

/* Navbar (you already have some styles, this ensures the base bg is dark) */
html.dark-mode .navbar,
html.dark-mode .site-nav {
  background-color: #0d1117 !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #30363d !important;
}

html.dark-mode .modal-content,
html.dark-mode .table thead th {
  background-color: rgba(22, 27. 34, 0.65) !important;
  background-filter: blur(6px);
  color: #e6edf3 !important;
}

/* ---- Dark tables (Bootstrap 5) ---- */
html.dark-mode .table {
  /* Core colors */
  --bs-table-color: #c9d1d9;
  --bs-table-bg: #161b22;
  --bs-border-color: #30363d;

  /* Striping + hover */
  --bs-table-striped-bg: #151a21;
  --bs-table-striped-color: #c9d1d9;
  --bs-table-hover-bg: #1b2330;
  --bs-table-hover-color: #c9d1d9;

  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Make sure cells inherit the dark background */
html.dark-mode .table tbody tr,
html.dark-mode .table tbody td,
html.dark-mode .table tbody th {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* Header row */
html.dark-mode .table thead th {
  background-color: #0f141a !important;
  color: #e6edf3 !important;
  border-color: var(--bs-border-color) !important;
}

/* Responsive wrapper (if used) */
html.dark-mode .table-responsive {
  background-color: #161b22 !important;
}

/* Optional: DataTables bits (if you use DataTables) */
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_length label,
html.dark-mode .dataTables_wrapper .dataTables_filter label {
  color: #c9d1d9;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #c9d1d9 !important;
}

.profile-btn:hover svg {
  transform: scale(1.1);
  transition: 0.2s ease-in-out;
}

.profile-avatar-link {
  text-decoration: none;
}

.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #4da3ff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease-in-out;
}

.profile-avatar:hover {
  transform: scale(1.1);
  border-color: #6bb8ff;
  cursor: pointer;
}