@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Cyber Colors */
  --color-positive: #198754;
  --color-negative: #dc3545;
  --color-neutral: #6c757d;

  --cyber-0: #0b0b0b;
  --cyber-1: #8a2be2;
  --cyber-2: #9966ff;
  --cyber-3: #6666ff;
  --cyber-4: #3366ff;
  --cyber-5: #3399ff;
  --cyber-6: #66ccff;
  --cyber-7: #99ccff;
  --cyber-8: #fefefe;
  --cyber-9: #404040;

  /* Transparency & Backgrounds */
  --cyber-blk-bg-transparent: rgba(0, 0, 0, 0.25);
  --cyber-grey-bg-transparent: rgba(45, 45, 45, 0.6);
  --cyber-card-bg: var(--cyber-grey-bg-transparent);
  --cyber-card-border: var(--cyber-9);
  --cyber-card-inner: rgba(40, 40, 40, 0.2);
  --cyber-container-bg: var(--cyber-blk-bg-transparent);

  /* Text */
  --cyber-muted-text: #a0a0a0;
  --cyber-placeholder-text: rgba(0, 0, 0, 0.21);

  /* Forms */
  --cyber-form-bg: #404040;
  --cyber-form-border: #505050;
  --cyber-form-focus: #4d4d4d;
  --cyber-form-shadow: rgba(0, 102, 204, 0.25);

  /* Scrollbar */
  --cyber-scrollbar-track: #1e1e1e;
  --cyber-scrollbar-thumb: #444;
  --cyber-scrollbar-thumb-hover: #666;

  /* Buttons */
  --cyber-btn-primary-bg: #202f4c;
  --cyber-btn-primary-border: #304e7b;
  --cyber-btn-success-bg: #8000ff66;
  --cyber-btn-success-border: #ff00d7;
  --cyber-btn-success-border-active: #f836db;
  --cyber-btn-warning-bg: #9a9696c2;
  --cyber-btn-warning-border: #cb46c9;
  --cyber-btn-active-bg: #51205fc7;
  --cyber-btn-active-border: #c45fe9;
}

body {
  background-color: var(--cyber-0);
  color: var(--cyber-8);
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: -0.02em;
  line-height: 29px;
  font-size: 20px;
  font-weight: 300;
  min-height: 100vh;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('../img/websitebg_new.jpg') center/cover no-repeat;
  z-index: -1;
  animation: fadeIn 1.8s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.container {
  position: relative;
  background: var(--cyber-container-bg);
  padding: 2rem;
}

.card {
  background-color: var(--cyber-card-bg);
  border: 1px solid var(--cyber-card-border);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-body {
  background-color: var(--cyber-card-inner);
}

.chart-expanded {
  width: 100%;
  height: 500px;
  max-width: 100%;
  display: block;
}

.cyber {
    color: var(--cyber-muted-text);
}

h1, h1.mb-4, h2, h2.card-title, h3, h3.card-title, h4, h4.text-info {
  color: var(--cyber-8) !important;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  padding: 1rem 0;
  text-transform: uppercase !important;
}

.text-muted,
.last-updated,
.quote-text {
  color: var(--cyber-muted-text) !important;
  font-size: 0.85em;
  font-style: italic;
}

.list-group-item {
  background-color: #333;
  color: #e0e0e0;
  border-color: var(--cyber-9);
}

.list-group-item.active {
  background-color: var(--cyber-btn-active-bg);
  border-color: var(--cyber-btn-active-border);
  color: #f2f2f2;
}

.litentabell {
    font-size: 0.5em;
}

.form-control,
.form-select {
  background-color: var(--cyber-form-bg);
  color: #e0e0e0;
  border: 1px solid var(--cyber-form-border);
}

.form-label {
    color: var(--cyber-9);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--cyber-form-focus);
  color: white;
  border-color: var(--cyber-4);
  box-shadow: 0 0 0 0.25rem var(--cyber-form-shadow);
}

input[type="number"] {
  appearance: textfield;
  padding: 0.375rem 0.5rem;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

label {
    color: var(--cyber-muted-text);
}

.modal-content {
  background-color: #333;
  color: #e0e0e0;
}

.btn, .btn-sm {
  transition: all 0.2s ease;
}

.btn:hover {
  filter: brightness(1.2);
}

.btn-sm { height: 31px; }

.quote-hidden {
  display: none;
}


.sentiment-controls .btn,
.sentiment-controls .form-control {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sentiment-controls .btn-sm {
  padding: 0.25rem 0.75rem;
}

.sentiment-controls .form-control,
.report-input {
  min-width: 70px;
  width: 70px;
  max-width: 90px;
}

.spinner-border {
  vertical-align: -0.125em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
}

.tone-badge {
  font-size: 0.8em;
  padding: 0.35em 0.7em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
}

.tone-badge.bg-success { background-color: var(--color-positive) !important; }
.tone-badge.bg-danger  { background-color: var(--color-negative) !important; }
.tone-badge.bg-secondary { background-color: var(--color-neutral) !important; }

.text-info {
  color: rgb(111, 157, 244) !important;
}

.btn-primary {
  color: #e1e1e1;
  background-color: var(--cyber-btn-primary-bg);
  border-color: var(--cyber-btn-primary-border);
}

.btn-warning {
  color: #140f30;
  background-color: var(--cyber-btn-warning-bg);
  border-color: var(--cyber-btn-warning-border);
}

.btn-success,
.btn-success.active {
  color: #fff;
  background-color: var(--cyber-btn-success-bg);
  border-color: var(--cyber-btn-success-border);
}

.btn-success.active {
  border-color: var(--cyber-btn-success-border-active);
}

.report-badge {
  background-color: var(--cyber-card-bg) !important;
  border: 1px solid var(--cyber-card-border);
  color: #e0e0e0 !important;
  font-weight: 600;
  font-size: 0.9em;
  min-width: 80px;
  padding: 0.5em 0.75em;
}

.login-content {
  max-width: 450px;
  width: 100%;
  z-index: 1;
  border-radius: 8px;
}

.quote-block.collapsible {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 160px; /* approx 5 lines with spacing */
}

.quote-block.expanded {
  max-height: 1000px; /* large enough to show all quotes */
}

.toggle-quotes {
  font-size: 0.875rem;
  padding-left: 0;
}


.form-control::-webkit-input-placeholder {
  color: var(--cyber-placeholder-text);
}

.form-control:-moz-input-placeholder,
.form-control:-ms-input-placeholder {
  color: red; /* Fallback: consider adjusting for consistency */
}

img { height: 8em; }

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cyber-scrollbar-track);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-scrollbar-thumb-hover);
}

.no-body-padding {
    padding-right: 0 !important;
}

.max-height-60vh {
    max-height: 60vh;
    overflow-y: auto;
}

.inline-display {
    display: inline;
}