/* ============================================
 * VARIABLES AND ROOT SETTINGS
 * ============================================ */
:root {
  /* Primary colors */
  --bs-primary: #b44593;
  --bs-primary-rgb: 180, 69, 147; /* RGB values for #b44593 */
  --bs-primary-text-emphasis: #491d3c; /* Darker shade for text on primary backgrounds */
  --bs-primary-bg-subtle: #f1e5ee; /* Lighter shade for subtle backgrounds */
  --bs-primary-border-subtle: #e3cadd; /* Lighter shade for subtle borders */

  /* Common gradients */
  --gradient-header: linear-gradient(
    to right,
    #ee7724,
    #d8363a,
    #dd3675,
    #b44593
  );

  /* Standardized colors */
  --color-white: #fff;
  --color-black: #000;
  --color-light-grey: #f9f9f9;
  --color-grey: #ddd;
  --color-dark-grey: #666;
  --color-border: #dee2e6;
  --color-error: #f00;

  /* Status colors */
  --color-success: #70bb70; /* green */
  --color-warning: #ffbf00; /* yellow */
  --color-danger: #f08888; /* red */
  --color-info: lightblue;

  /* Spacing variables */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-message: 18px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* Font sizes */
  --font-xs: 0.75rem;
  --font-sm: 0.8rem;
  --font-md: 0.95rem;
  --font-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

/* ============================================
 * GENERAL ELEMENTS AND TYPOGRAPHY
 * ============================================ */
input::placeholder {
  font-style: italic;
}

.small-text {
  font-size: var(--font-sm);
}

.container .small-text {
  padding-left: 0;
  padding-right: 0;
}

/* Links styling */
a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--bs-primary-text-emphasis);
  text-decoration: underline;
}

/* ============================================
 * SHARED COMPONENTS STYLES
 * ============================================ */
/* Card headers */
.card-header {
  background: var(--gradient-header);
  color: #ffffff;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* ============================================
 * BOOTSTRAP COMPONENT OVERRIDES
 * ============================================ */
/* Color classes */
.bg-primary,
.list-group-item-primary {
  background-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

/* List group */
.list-group-item-primary {
  color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary);
}

/* Pagination */
.page-link {
  color: var(--bs-primary);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Progress bar */
.progress-bar {
  background-color: var(--bs-primary);
}

/* ============================================
 * BUTTONS
 * ============================================ */
/* Primary button styling - consolidating all variants */
.btn-primary,
.app-button,
#go-button,
.chatbot #submitBtn {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.btn-primary:hover,
.app-button:hover,
#go-button:hover,
.chatbot #submitBtn:hover {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
  color: var(--bs-primary-text-emphasis);
  transition: all 0.3s ease;
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary-text-emphasis);
  color: #fff;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Outline buttons */
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
}

/* ============================================
 * CLIENT/MATTER TABS
 * ============================================ */
.client-matter-tabs .nav-link {
  color: #000;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem 0.25rem 0 0;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.client-matter-tabs .nav-link i {
  margin-right: 0.3em;
}

.client-matter-tabs .nav-link.active {
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  background-color: var(--bs-primary) !important;
}

.client-matter-tabs .nav-link:hover {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary) !important;
}

.client-name {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 10px;
  margin: -1px 0 15px;
  z-index: 1;
}

/* ============================================
 * RESPONSIVE NAVBAR & TABS
 * ============================================ */
/* Remove top and bottom padding when navbar is expanded */
@media (min-width: 768px) {
  .navbar.navbar-expand-md {
    padding: 0;
  }
}

/* Make tabs vertical when collapsed */
@media (max-width: 767.98px) {
  .client-matter-tabs {
    display: flex;
    flex-direction: column;
  }
  .client-matter-tabs .nav-item {
    width: 100%;
  }
  .client-matter-tabs .nav-link {
    text-align: left;
    padding: 10px 15px;
    border-radius: 0;
    border-width: 1px 0;
  }
}

/* ============================================
 * TABLES
 * ============================================ */
/* Common table styles */
.wip-table th,
.ledgercard-table th {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.25rem;
  text-align: right;
}

.wip-table td,
.ledgercard-table td {
  padding: 0.25rem;
  text-align: right;
  border-right: 1px solid #dee2e6;
}

.wip-table .text-left,
.ledgercard-table .text-left {
  text-align: left;
}

/* WIP table specific colors */
.wip-table .text-green {
  background-color: var(--color-success);
}

.wip-table .text-yellow {
  background-color: var(--color-warning);
}

.wip-table .text-red {
  background-color: var(--color-danger);
}

/* Ledgercard table specific colors */
.ledgercard-table .text-blue {
  background-color: lightblue;
}

.ledgercard-table .text-pink {
  background-color: lightpink;
}

.ledgercard-table .negative {
  color: red;
}

/* Other table styling */
.italic-row {
  font-style: italic;
}

.shaded-cell {
  background-color: #ccc !important;
}

/* ============================================
 * FILE SELECT TREE
 * ============================================ */
/* Base file tree styling */
.file-select-tree .list-group-item.folder-item,
.file-select-tree .folder-item i,
.file-select-tree .folder-item span {
  cursor: pointer;
}

.file-select-tree .nested {
  display: none; /* Initially hide nested items */
}

.file-select-tree .nested.active {
  display: block; /* Show when active class is added */
}

.file-select-tree .indent {
  margin-left: 20px; /* Indentation for nested levels */
}

.file-select-tree .list-group-item i,
.file-item i,
.folder-item i {
  margin-right: 5px; /* Space between icon and text */
}

.file-select-tree .text-danger {
  color: var(--color-error);
}

/* Folder styling */
.file-select-tree .folder-item {
  cursor: default; /* Override the cursor for the folder itself */
  padding: 0.5rem 1rem;
}

.file-select-tree .folder-item:hover {
  background-color: rgba(180, 69, 147, 0.05);
}

.file-select-tree .folder-item .form-check {
  margin-bottom: 0;
}

/* Select all functionality */
.file-select-tree .folder-select-all {
  margin-left: 5px;
}

.file-select-tree label.small-text {
  font-size: 0.75rem;
  color: #666;
}

.file-select-tree .folder-select-all:checked + label {
  color: var(--bs-primary);
  font-weight: 500;
}

.file-select-tree .select-all-container {
  transition: opacity 0.2s ease-in-out;
}

.file-select-tree .select-all-container.d-none {
  display: none !important;
}

/* ============================================
 * MODAL STYLING
 * ============================================ */
#aiModal .modal-content {
  margin: 2vh auto; /* Add top/bottom margin */
  max-height: 96vh; /* Allow for the margin */
  border-radius: 0.5rem;
}

#aiModal .modal-dialog {
  max-width: none; /* Remove max width */
  width: 50%;
}

/* File select tree container in modal */
#aiModal .file-select-tree-container {
  display: flex;
  flex-direction: column;
  height: 75vh;
}

#aiModal .file-select-tree {
  overflow-y: auto; /* Scroll only the file tree */
  flex-grow: 1;
}

#aiModal .selected-files-container {
  flex-shrink: 0;
}

/* ============================================
 * CHATBOT
 * ============================================ */
/* Response container */
.chatbot #formatted-response {
  max-height: 500px;
  min-height: 150px;
  overflow-y: auto;
  background: #f9f9f9;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

/* Common message styling */
.chatbot .assistant-message,
.chatbot .user-message {
  max-width: 90%;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 18px;
  word-wrap: break-word;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  clear: both;
}

/* Clear the float after each message */
.chatbot .assistant-message::after,
.chatbot .user-message::after {
  content: "";
  display: table;
  clear: both;
}

/* Add space between messages */
.chatbot .assistant-message + .user-message,
.chatbot .user-message + .assistant-message {
  margin-top: 15px;
}

/* Assistant message styling */
.chatbot .assistant-message {
  float: left;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-top-left-radius: 5px;
  color: #333;
  align-self: flex-start;
  text-align: left;
  position: relative;
  padding-bottom: 25px; /* Add space for the save button */
}

/* Save button styling */
.chatbot .save-response-btn {
  position: absolute;
  bottom: 5px;
  right: 10px;
  cursor: pointer;
  color: var(--bs-primary);
  background: none;
  border: none;
  padding: 2px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.chatbot .save-response-btn:hover {
  opacity: 1;
}

/* User message styling */
.chatbot .user-message {
  float: right;
  background-color: var(--bs-primary);
  color: white;
  border-top-right-radius: 5px;
  align-self: flex-end;
  text-align: left;
}

/* Links in messages */
.chatbot .assistant-message a {
  color: var(--bs-primary);
  text-decoration: underline;
}

.chatbot .user-message a {
  color: #fff;
  text-decoration: underline;
}

/* Loading indicator */
.chatbot #loadingIndicator {
  color: var(--bs-primary);
}

/* ============================================
 * MARKDOWN OUTPUT STYLING
 * ============================================ */
/* Code blocks inside messages */
.chatbot .markdown-output pre,
.chatbot .assistant-message pre,
.chatbot .user-message pre {
  max-width: 100%;
  overflow-x: auto;
  background-color: #f5f5f5;
  border-radius: 5px;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
}

/* User message code blocks */
.chatbot .user-message pre {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
}

/* Inline code styling */
.chatbot .markdown-output code,
.chatbot .assistant-message code,
.chatbot .user-message code {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 0.95em;
  padding: 2px 4px;
  border-radius: 3px;
}

.chatbot .assistant-message code {
  background-color: #f0f0f0;
  color: #333;
}

.chatbot .user-message code {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Table styling */
.chatbot .markdown-output table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}

.chatbot .markdown-output table,
.chatbot .markdown-output th,
.chatbot .markdown-output td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.chatbot .markdown-output th {
  background-color: #f2f2f2;
}

/* Images */
.chatbot .assistant-message img,
.chatbot .user-message img {
  max-width: 100%;
  height: auto;
}

.active .fas {
  color: #ffbf00;
}

/* ============================================
 * MISCELLANEOUS STYLES
 * ============================================ */
/* Sticky offset stack — adjust top values as needed */
.sticky-tabs {
  position: sticky;
  top: 56px; /* height of navbar */
  z-index: 530;
  background: white;
}

.sticky-info-bar {
  position: sticky;
  top: 96px; /* navbar + tabs height */
  z-index: 520;
  margin-bottom: -14px;
}

.sticky-toolbar {
  position: sticky;
  top: 140px; /* navbar + tabs + info bar */
  z-index: 510;
  background: #eee;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ============================================
 * AI2 PROGRESS SECTION STYLES
 * ============================================ */

.ai2-progress-section {
  margin-bottom: 15px;
  font-size: 0.9em;
}

.ai2-progress-header .btn-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
  border: none;
  background: none;
}

.ai2-progress-header .btn-link:hover {
  color: inherit;
  text-decoration: none;
}

.ai2-progress-header .btn-link:focus {
  box-shadow: none;
  outline: none;
}

.ai2-progress-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.ai2-progress-details.show {
  max-height: 500px;
  overflow-y: auto;
}

.ai2-progress-message {
  border-left: 3px solid #28a745;
  padding-left: 10px;
  margin-left: 12px;
}

.ai2-progress-text {
  font-weight: 500;
  line-height: 1.4;
}

.ai2-progress-timestamp {
  font-size: 0.85em;
  margin-top: 2px;
}

.ai2-message-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.ai2-message-details.show {
  max-height: 300px;
  overflow-y: auto;
}

.ai2-message-details pre {
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.8em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Progress timer styling */
.ai2-progress-time {
  font-family: monospace;
  font-weight: bold;
}

/* Button styling for progress toggles */
.ai2-progress-section [data-toggle] i {
  transition: transform 0.2s ease;
}

.ai2-progress-section [data-toggle="message-details"] {
  min-width: 32px;
  height: 32px;
}

/* Required field asterisk styling for webforms */
.required-asterisk {
  color: #dc3545 !important;
  font-weight: bold;
  margin-left: 2px;
}

.form-field .required {
  color: #dc3545 !important;
  font-weight: bold;
}