/* =================== */
/* = Style for Coule = */
/* =================== */

.nodeco {
    text-decoration: none;
}

.j-hidden {
    display: none;
}


.mode-light {
    background-image: url("/static/webapp/p6.e57a01a96549.png");
    background-repeat: repeat;
}

.mode-dark {
    background-image: url("/static/webapp/background.af20785d07e3.png");
    background-repeat: repeat;
}

.twitter-typeahead, .tt-input {
    width: 100% !important;
}


.tt-menu {
    background-color: #222; /* Dark background */
    border: 1px solid #444; /* Slightly lighter border */
    border-radius: 4px;     
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); /* Stronger shadow for contrast */
    z-index: 1000;          
}

.tt-suggestion {
    padding: 8px 12px;     
    cursor: pointer;        
    color: #ddd; /* Light gray text */
    background-color: #222; /* Same as menu for consistency */
}

.tt-suggestion:hover {
    background-color: #333; /* Slightly lighter gray on hover */
}

.tt-suggestion.tt-cursor {
    background-color: #007bff; /* Bootstrap primary blue */
    color: #fff; /* White text for contrast */
}

.literal {
	white-space: pre-wrap;
}

/* ======================== */
/* = Collaboration Styles = */
/* ======================== */
/* Custom color for 'collaboration' */
.text-collaboration {
  color: #9f7ead !important; /* Purple */
}

.border-collaboration {
  border-color: #9f7ead !important;
}

.bg-collaboration {
  background-color: #9f7ead !important;
  color: #fff !important; /* Optional: white text on purple bg */
}

/* Base collaboration color */
:root {
  --collaboration: #9f7ead;
  --collaboration-hover: #5a32a3;
  --collaboration-contrast: #fff;
}

/* Solid collaboration button */
.btn-collaboration {
  color: var(--collaboration-contrast) !important;
  background-color: var(--collaboration) !important;
  border: 1px solid var(--collaboration) !important;
}

.btn-collaboration:hover {
  background-color: var(--collaboration-hover) !important;
  border-color: var(--collaboration-hover) !important;
  color: var(--collaboration-contrast) !important;
}

/* Outline collaboration button */
.btn-outline-collaboration {
  color: var(--collaboration) !important;
  background-color: transparent !important;
  border: 1px solid var(--collaboration) !important;
}

.btn-outline-collaboration:hover {
  background-color: var(--collaboration) !important;
  color: var(--collaboration-contrast) !important;
  border-color: var(--collaboration-hover) !important;
}

/* ================== */
/* = Planner Styles = */
/* ================== */
/* Custom color for 'planner' */
.text-planner {
  color: #ffa800 !important; /* Orange */
}

.border-planner {
  border-color: #ffa800 !important;
}

.bg-planner {
  background-color: #ffa800 !important;
  color: #fff !important; /* Optional: white text on purple bg */
}

/* Base planner color */
:root {
  --planner: #ffa800;
  --planner-hover: #ffca22;
  --planner-contrast: #000;
}

/* Solid planner button */
.btn-planner {
  color: var(--planner-contrast) !important;
  background-color: var(--planner) !important;
  border: 1px solid var(--planner) !important;
}

.btn-planner:hover {
  background-color: var(--planner-hover) !important;
  border-color: var(--planner-hover) !important;
  color: var(--planner-contrast) !important;
}

/* Outline planner button */
.btn-outline-planner {
  color: var(--planner) !important;
  background-color: transparent !important;
  border: 1px solid var(--planner) !important;
}

.btn-outline-planner:hover {
  background-color: var(--planner) !important;
  color: var(--planner-contrast) !important;
  border-color: var(--planner-hover) !important;
}

/* ========================= */
/* = Glassorphism Override = */
/* ========================= */

.card {
	background: rgba(255, 255, 255, 0.01);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.card-glass {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(13.2px);
	-webkit-backdrop-filter: blur(13.2px);
}

.card-glass-dark {
	background: rgba(25, 25, 25, 0.7);
	backdrop-filter: blur(17.2px);
	-webkit-backdrop-filter: blur(17.2px);
}

.card-triage {
	background: rgba(100, 200, 255, 0.1);
}

/* ========= */
/* = River = */
/* ========= */
/* ------------------------- */
/*  River Theme (Bootstrap)  */
/* ------------------------- */

/* Background + text */
.text-bg-river {
    color: #fff !important;
    background-color: #5ca0db !important;
}

/* Text color only */
.text-river {
    color: #5ca0db !important;
}

/* Border utility */
.border-river {
    border-color: #5ca0db !important;
}

.bg-river {
    background-color: #5ca0db !important;
}

/* ------------------------- */
/* Buttons                   */
/* ------------------------- */

/* Solid Button */
.btn-river {
    color: #fff;
    background-color: #5ca0db;
    border: 1px solid #3a76aa; /* darkened shade */
}

.btn-river:hover {
    background-color: #4b8fc9;
    border-color: #336f94;
}

.btn-river:active,
.btn-river:focus {
    background-color: #3a76aa;
    border-color: #2c6486;
    box-shadow: 0 0 0 0.2rem rgba(92,160,219,0.35);
}

/* Outline Button */
.btn-outline-river {
    color: #5ca0db;
    background-color: transparent;
    border: 1px solid #5ca0db;
}

.btn-outline-river:hover {
    color: #fff;
    background-color: #5ca0db;
    border-color: #5ca0db;
}

.btn-outline-river:active,
.btn-outline-river:focus {
    color: #fff;
    background-color: #3a76aa;
    border-color: #3a76aa;
    box-shadow: 0 0 0 0.2rem rgba(92,160,219,0.35);
}

/* ================ */
/* = River Alerts = */
/* ================ */

/* Base (light theme by default) */
.alert-river {
  --river-base: #5ca0db;
  --river-bg: rgba(92, 160, 219, 0.12);
  --river-border: rgba(92, 160, 219, 0.4);
  --river-text: #22577c;

  background-color: var(--river-bg);
  border: 1px solid var(--river-border);
  color: var(--river-text);

  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}

/* Dark mode (Bootstrap theme override) */
html[data-bs-theme="dark"] .alert-river {
  --river-bg: rgba(92, 160, 219, 0.18);
  --river-border: rgba(92, 160, 219, 0.45);
  --river-text: #d3e7f7;

  background-color: var(--river-bg);
  border-color: var(--river-border);
  color: var(--river-text);
}

/* Optional: links inside the alert */
.alert-river .alert-link {
  color: #2e506e;
  font-weight: 600;
  text-decoration: underline;
}

/* Dark mode tweak for alert links */
html[data-bs-theme="dark"] .alert-river .alert-link {
  color: #a5d2f5;
}