/* Force the chat inline field to use full width */
.login-logo img {
  width: 300px !important;
  height: auto !important;
}

.col-sm-7.field-chat_area {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
#chat-tab .card.tab .card-body {
    padding: 0 !important;
  }

.form-group.field-chat_area .row {
margin: 0 !important;
padding: 0 !important;
}

#chat-tab .card.tab {
    border: none !important;
    box-shadow: none !important;
  }
  
.col-sm-7.field-drag_drop_documents {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Clean up the outer card in #documents-tab */
#documents-tab .card.tab {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}

/* Tighten outer card-body padding */
#documents-tab .card.tab .card-body {
  padding: 1rem !important;
}

/* Inner card shadow and border refinement */
#documents-tab .readonly .row > div > .card {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  border: none !important;
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .client-info {
    display: none !important;
  }
  .chat-wrapper {
    flex-direction: column;
  }
  .chat-section,
  .chat-area,
  .chat-container {
    width: 100% !important;
  }
}

/* Tooltip badge enhancement */
.custom-tooltip-badge {
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  transition: transform 0.1s ease;
}
.custom-tooltip-badge:hover {
  transform: scale(1.8);
}

/* Other card styles */
.change-form .card {
  background-color: #f8f9fa;
}







/* Override Jazzmin's active/hover behavior for icon colors */
.sidebar .nav-sidebar .nav-item .nav-link i.nav-icon {
    transition: none !important; /* Disable color transitions */
}

/* Set specific colors for each icon type regardless of state */
.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-user-tie {
    color: #4e73df !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-calendar-alt {
    color: #fd7e14 !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-user:not(.fa-user-tie):not(.fa-user-cog):not(.fa-user-shield) {
    color: #2c9faf !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-gavel {
    color: #e74a3b !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-users {
    color: #858796 !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-landmark {
    color: #f6c23e !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-balance-scale {
    color: #6f42c1 !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-user-cog {
    color: #1cc88a !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-file-contract {
    color: #36b9cc !important;
}

.sidebar .nav-sidebar .nav-item .nav-link i.fas.fa-calendar:not(.fa-calendar-alt) {
    color: #d63384 !important;
}


/* Make sure colors stay the same on hover and active states */
.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-user-tie,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-user-tie {
    color: #4e73df !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-calendar-alt,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-calendar-alt {
    color: #fd7e14 !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-user:not(.fa-user-tie):not(.fa-user-cog):not(.fa-user-shield),
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-user:not(.fa-user-tie):not(.fa-user-cog):not(.fa-user-shield) {
    color: #2c9faf !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-gavel,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-gavel {
    color: #e74a3b !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-users,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-users {
    color: #858796 !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-landmark,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-landmark {
    color: #f6c23e !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-balance-scale,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-balance-scale {
    color: #6f42c1 !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-user-cog,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-user-cog {
    color: #1cc88a !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-file-contract,
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-file-contract {
    color: #36b9cc !important;
}

.sidebar .nav-sidebar .nav-item .nav-link:hover i.fas.fa-calendar:not(.fa-calendar-alt),
.sidebar .nav-sidebar .nav-item .nav-link.active i.fas.fa-calendar:not(.fa-calendar-alt) {
    color: #d63384 !important;
}







/* Fix Django Jazzmin filter_horizontal - replace text with arrows */
.selector-chooser a.selector-add,
.selector-chooser a.selector-remove {
    font-size: 0 !important; /* Hide the "Choose"/"Remove" text */
    text-indent: -9999px !important; /* Extra hiding */
    overflow: hidden !important;
    position: relative !important;
}

/* Add arrow symbols */
.selector-chooser a.selector-add::before {
    content: "→" !important;
    font-size: 16px !important;
    color: white !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-indent: 0 !important;
    font-weight: bold !important;
}

.selector-chooser a.selector-remove::before {
    content: "←" !important;
    font-size: 16px !important;
    color: white !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-indent: 0 !important;
    font-weight: bold !important;
}

/* Fix the main selector layout */
.selector {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important; /* Changed from stretch to flex-start */
}

.selector-available, .selector-chosen {
    width: calc(45% - 10px) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix the chooser container to match select box height */
.selector .selector-chooser {
    width: 10% !important;
    min-width: 40px !important;
    margin: 0 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 200px !important; /* Match the select box height */
    max-height: 200px !important;
    padding: 8px 0 !important; /* Add some padding to center the buttons */
}

.selector .selector-chooser a {
    width: 24px !important;
    height: 24px !important;
    margin: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: #007cba !important;
    color: white !important;
    text-decoration: none !important;
    line-height: 24px !important;
}

.selector .selector-chooser a:hover {
    background: #005a87 !important;
    transform: scale(1.05) !important;
}

/* Fix the select boxes themselves */
.selector select {
    width: 100% !important;
    height: 200px !important;
    padding: 8px !important;
}

/* Make sure the labels stay at the top */
.selector .selector-available h2,
.selector .selector-chosen h2 {
    margin-bottom: 5px !important;
    padding: 0 !important;
}

.col-sm-7.field-case_overview {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-group.field-case_overview .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Clean up the outer card in overview tab */
#overview-tab .card.tab {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Tighten outer card-body padding */
#overview-tab .card.tab .card-body {
    padding: 0 !important;
}

/* Hide the empty label column for overview */
.form-group.field-case_overview .col-sm-3 {
    display: none !important;
}

.col-sm-7.field-attorney_dashboard {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-group.field-attorney_dashboard .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Force the manager_dashboard field to use full width */
.col-sm-7.field-manager_dashboard {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-group.field-manager_dashboard .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Clean up the outer cards in dashboard tabs */
#dashboard-tab .card.tab {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Tighten outer card-body padding for dashboards */
#dashboard-tab .card.tab .card-body {
    padding: 0 !important;
}

/* Hide the empty label columns for dashboards */
.form-group.field-attorney_dashboard .col-sm-3,
.form-group.field-manager_dashboard .col-sm-3 {
    display: none !important;
}


/* =================================================================== */
/* ===== START: REQUIRED STYLES FOR FULL-WIDTH ADMIN TABS ======== */
/* =================================================================== */

/* This makes sure the tabs for chat, documents, overview, etc., take up the full width of the form. */
.field-chat_area,
.field-drag_drop_documents,
.field-case_overview,
.field-attorney_dashboard,
.field-manager_dashboard {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* This removes strange margins inside the full-width fields. */
.form-group.field-chat_area .row,
.form-group.field-drag_drop_documents .row,
.form-group.field-case_overview .row,
.form-group.field-attorney_dashboard .row,
.form-group.field-manager_dashboard .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hides the now-empty label column for these full-width fields. */
.form-group.field-case_overview .col-sm-3,
.form-group.field-attorney_dashboard .col-sm-3,
.form-group.field-manager_dashboard .col-sm-3 {
    display: none !important;
}

/* This removes the extra border and padding that Jazzmin puts around tab content, allowing our components to look clean. */
#chat-tab .card.tab,
#documents-tab .card.tab,
#overview-tab .card.tab,
#dashboard-tab .card.tab {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#chat-tab .card.tab .card-body,
#documents-tab .card.tab .card-body,
#overview-tab .card.tab .card-body,
#dashboard-tab .card.tab .card-body {
    padding: 0 !important;
}

/* =================================================================== */
/* ===== END: REQUIRED STYLES FOR FULL-WIDTH ADMIN TABS ========== */
/* =================================================================== */


/* styles for events */