/* =================== */
/* = 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);
}