:root {
--police-blue: #0055A5;
--dark-green: #202A25;
--crimson-red: #B33951;
--pure-white: #FFFFFF;
--light-gray: #E6E8E6;
--dark-gray: #BABCB3;

--primary-color: var(--police-blue);
--secondary-color: var(--dark-green);
--accent-color: var(--crimson-red);
--success-color: var(--police-blue);
--info-color: var(--police-blue);
--warning-color: var(--crimson-red);
--danger-color: var(--crimson-red);
--light-bg: var(--light-gray);
--card-bg: var(--pure-white);
--border-color: var(--light-gray);
--text-primary: var(--dark-green);
--text-secondary: var(--dark-green);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Dark mode variables */
:root[data-theme="dark"] {
--police-blue: #0055A5;
--dark-green: #202A25;
--crimson-red: #B33951;
--pure-white: #FFFFFF;
--light-gray: #E6E8E6;
--dark-gray: #BABCB3;

--primary-color: var(--police-blue);
--secondary-color: var(--dark-green);
--accent-color: var(--crimson-red);
--success-color: var(--police-blue);
--info-color: var(--police-blue);
--warning-color: var(--crimson-red);
--danger-color: var(--crimson-red);
--light-bg: #1A1A1A;
--card-bg: #2C2C2C;
--border-color: #404040;
--text-primary: #E0E0E0;
--text-secondary: #A0A0A0;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}



body {
background: var(--light-gray);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text-primary);
}

.navbar {
background: var(--police-blue) !important;
box-shadow: var(--shadow-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-brand {
text-align: left !important;
justify-content: flex-start !important;
font-weight: 600;
font-size: 1.25rem;
}

.nav-link {
color: rgba(255, 255, 255, 0.8) !important;
font-weight: 500;
transition: all 0.2s ease;
padding: 0.5rem 1rem !important;
border-radius: 6px;
margin: 0 0.25rem;
}

.nav-link:hover {
color: var(--pure-white) !important;
background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
color: var(--pure-white) !important;
background-color: rgba(255, 255, 255, 0.2);
font-weight: 600;
border-bottom: 3px solid var(--pure-white);
}

/* Custom scrollbar styling for content areas */
.scrollable-content {
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}

/* Company Management Card Scrolling */
#company-management-section .card-body {
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}

#company-management-section .card-body::-webkit-scrollbar {
width: 8px;
}

#company-management-section .card-body::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}

#company-management-section .card-body::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}

#company-management-section .card-body::-webkit-scrollbar-thumb:hover {
background: var(--dark-gray);
}

/* Ensure proper spacing in scrollable content */
#company-management-section .card-body > div:last-child {
margin-bottom: 1rem;
}

/* Settings Page Styling */
.setting-item {
transition: all 0.2s ease;
border-left: 3px solid transparent;
}

.setting-item:hover {
background-color: #f8f9fa;
}

.setting-item.active {
background-color: #e3f2fd;
border-left: 3px solid var(--police-blue);
}

/* Dark mode for settings */
:root[data-theme="dark"] .setting-item:hover {
background-color: rgba(0, 85, 165, 0.1);
}

:root[data-theme="dark"] .setting-item.active {
background-color: rgba(0, 85, 165, 0.2);
border-left-color: var(--police-blue);
}

/* Company Management Section Spacing */
#settingsContent .mb-4 {
margin-bottom: 3rem !important;
}

#settingsContent h6.mb-3 {
margin-bottom: 2rem !important;
}

#settingsContent .mt-3 {
margin-top: 3rem !important;
}

/* Company Management Section Spacing - Target specific sections */
#settingsContent .invitation-overview-section {
margin-top: 3rem !important;
}

#settingsContent .pending-users-section {
margin-top: 4rem !important;
}

#settingsContent .company-users-section {
margin-top: 4.5rem !important;
}

/* Add space ABOVE specific section headers */
#settingsContent .invitation-overview-section h6 {
margin-top: 6rem !important;
}

#settingsContent .pending-users-section h6 {
margin-top: 2rem !important;
}

#settingsContent .company-users-section h6 {
margin-top: 2rem !important;
}

/* Add space ABOVE the dynamically generated invitation section headers */
#settingsContent .active-invitations-header {
margin-top: 4rem !important;
}

#settingsContent .deactivated-invitations-header {
margin-top: 4rem !important;
}

#settingsContent .expired-invitations-header {
margin-top: 2rem !important;
}

/* Add space ABOVE the active invitations container */
#settingsContent #active-invitations-container {
margin-top: 3rem !important;
}

/* Loading overlay styles */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.loading-content {
text-align: center;
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}

.loading-overlay[data-theme="dark"] {
background-color: rgba(26, 26, 26, 0.95);
}

.loading-overlay[data-theme="dark"] .loading-content {
background: var(--card-bg);
color: var(--text-primary);
}

/* Login page styles */
#loginPage {
min-height: 100vh;
background: linear-gradient(135deg, var(--police-blue) 0%, var(--dark-green) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}

#loginPage .card {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-lg);
}

#loginPage .card-title {
color: var(--police-blue);
font-weight: 700;
}

#loginPage .text-primary {
color: var(--police-blue) !important;
}

#loginPage .btn-primary {
background: var(--police-blue);
border-color: var(--police-blue);
font-weight: 600;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
}

#loginPage .btn-primary:hover {
background: var(--dark-green);
border-color: var(--dark-green);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}

#loginPage .fas {
color: var(--police-blue);
}

/* Dark mode support for login page */
:root[data-theme="dark"] #loginPage {
background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
}

:root[data-theme="dark"] #loginPage .card {
background: rgba(44, 44, 44, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] #loginPage .card-title {
color: var(--police-blue);
}

.scrollable-content::-webkit-scrollbar {
width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
background: var(--dark-gray);
background-clip: content-box;
}

/* Drag and Drop styling for object fields */
.field-row {
transition: all 0.2s ease;
}

.field-row:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.field-row.dragging {
opacity: 0.5;
transform: rotate(2deg);
}

.drag-handle {
transition: color 0.2s ease;
}

.drag-handle:hover {
color: var(--primary-color) !important;
}

.field-row.drag-over {
border: 2px dashed var(--primary-color) !important;
background-color: rgba(0, 85, 165, 0.05) !important;
}

.field-row .badge {
font-size: 0.75rem;
min-width: 24px;
}

.field-row .drag-handle {
padding: 8px;
border-radius: 4px;
}

.field-row .drag-handle:hover {
background-color: rgba(0, 0, 0, 0.05);
}

/* Duplicate button styling */
.btn-outline-info:hover {
background-color: var(--info-color);
border-color: var(--info-color);
color: white;
}

.btn-outline-info:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 85, 165, 0.25);
}

/* Authentication UI Styles */
.navbar-nav .btn {
font-weight: 500;
transition: all 0.2s ease;
}

.navbar-nav .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.navbar-text {
font-weight: 500;
}

#auth-not-signed-in .btn {
margin-left: 0.5rem;
}

#auth-signed-in .btn {
margin-left: 0.5rem;
}

/* Mouse-based Drag and Drop styling for report template elements */
.draggable-element {
transition: all 0.2s ease;
cursor: default;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
}

.draggable-element:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}

.draggable-element.dragging {
opacity: 0.8;
z-index: 1000;
position: relative;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.sortable-list {
min-height: 100px;
position: relative;
}

.draggable-element.drag-over {
background-color: rgba(0, 85, 165, 0.1);
border: 2px dashed var(--primary-color);
border-radius: 4px;
}

/* Enhanced drag feedback */
.draggable-element.dragging::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 85, 165, 0.05);
border: 2px solid var(--primary-color);
border-radius: 4px;
pointer-events: none;
}

/* Ensure drag handles are visible and interactive */
.draggable-element .fa-grip-vertical {
color: #6c757d;
transition: color 0.2s ease;
cursor: move !important;
padding: 4px;
border-radius: 3px;
}

.draggable-element:hover .fa-grip-vertical {
color: var(--primary-color);
background-color: rgba(0, 85, 165, 0.1);
}

.draggable-element .fa-grip-vertical:active {
color: var(--primary-color);
background-color: rgba(0, 85, 165, 0.2);
}

.card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}

.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}

.card-header {
background: var(--dark-gray);
border-bottom: 2px solid var(--police-blue);
padding: 1.25rem 1.5rem;
font-weight: 700;
color: var(--pure-white);
}

.card-header h5 {
font-weight: 700;
color: var(--dark-green);
}



.card-body {
padding: 1.5rem;
}

.template-element {
background: var(--pure-white);
border: 1px solid var(--light-gray);
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
}

.template-element:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
border-color: var(--police-blue);
transform: translateY(-2px);
}

.template-element .btn-group {
opacity: 0.7;
transition: opacity 0.2s ease;
}

.template-element:hover .btn-group {
opacity: 1;
}

.form-check.bg-light {
border-color: var(--police-blue) !important;
background-color: rgba(0, 85, 165, 0.1) !important;
}

.badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}

.nav-tabs .nav-link {
color: var(--dark-green) !important;
border: none;
border-bottom: 2px solid transparent;
padding: 0.75rem 1rem;
font-weight: 500;
transition: all 0.2s ease;
background-color: transparent !important;
}

.nav-tabs .nav-link:hover {
color: var(--police-blue) !important;
border-bottom-color: var(--police-blue);
background-color: rgba(0, 85, 165, 0.1) !important;
}

.nav-tabs .nav-link.active {
color: var(--police-blue) !important;
border-bottom-color: var(--police-blue);
background-color: rgba(0, 85, 165, 0.1) !important;
font-weight: 600;
}

.element-card, .report-card {
transition: all 0.2s ease;
}

.element-card:hover, .report-card:hover {
transform: translateY(-2px);
}

.template-element.h-100 {
display: flex;
flex-direction: column;
}

.template-element.h-100 .btn-group {
margin-top: auto;
}

/* Gmail-like table styling */
.table-hover tbody tr:hover {
background-color: rgba(0, 85, 165, 0.05);
cursor: pointer;
}

.element-row {
transition: background-color 0.2s ease;
}

.element-row.selected {
background-color: rgba(0, 85, 165, 0.1);
}

.table th {
border-top: none;
border-bottom: 2px solid var(--border-color);
font-weight: 600;
color: var(--text-secondary);
background-color: var(--light-bg);
}

.table td {
border-top: 1px solid var(--border-color);
vertical-align: middle;
padding: 0.75rem 0.5rem;
}

.table-responsive {
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-sm);
background-color: var(--pure-white);
}

/* Report template selection styling */
.form-check-input.report-template-checkbox:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}

.form-check-input.report-template-checkbox:checked + .form-check-label {
color: var(--primary-color);
}

.form-check-input.report-template-checkbox:checked + .form-check-label .fas {
color: var(--primary-color) !important;
}

/* Hover effect for report template cards */
.form-check:has(.report-template-checkbox) {
transition: all 0.2s ease;
}

.form-check:has(.report-template-checkbox):hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.form-check:has(.report-template-checkbox:checked) {
border-color: var(--primary-color) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Element selection styling */
.form-check-input.element-checkbox {
width: 18px;
height: 18px;
margin-top: 2px;
}

.form-check-label {
padding-left: 0;
}

/* Sidebar Styles */
.sidebar-full {
background: var(--pure-white);
border-radius: 0;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 250px;
z-index: 1020;
border-right: 1px solid var(--border-color);
}

.sidebar-header h6 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}

.sidebar-menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
}

.sidebar-item {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
border-radius: 8px;
text-decoration: none;
color: var(--dark-green);
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid transparent;
font-size: 0.9rem;
}

.sidebar-item:hover {
background-color: rgba(0, 85, 165, 0.1);
color: var(--police-blue);
text-decoration: none;
}

.sidebar-item.active {
background-color: var(--police-blue);
color: var(--pure-white);
border-color: var(--police-blue);
}

/* Content Header */
.content-header h2 {
color: var(--dark-green);
font-weight: 600;
}

/* Sub Navigation */
.sub-nav {
border-bottom: 1px solid var(--light-gray);
padding-bottom: 1rem;
}

.nav-pills .nav-link {
color: #000000 !important;
border: 1px solid #666666 !important;
padding: 0.5rem 1rem;
font-weight: 500;
transition: all 0.2s ease;
border-radius: 6px;
margin-right: 0.5rem;
background-color: #ffffff !important;
}

.nav-pills .nav-link:hover {
color: var(--police-blue) !important;
background-color: #e6f3ff !important;
border-color: var(--police-blue) !important;
}

.nav-pills .nav-link.active {
color: var(--pure-white) !important;
background-color: var(--police-blue) !important;
border-color: var(--police-blue) !important;
}

.btn {
border-radius: 8px;
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid transparent;
}

.btn-primary {
background: var(--police-blue);
border-color: var(--police-blue);
}

.btn-primary:hover {
background: var(--dark-green);
border-color: var(--dark-green);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-success {
background: var(--police-blue);
border-color: var(--police-blue);
}

.btn-success:hover {
background: var(--dark-green);
border-color: var(--dark-green);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-outline-primary {
border-color: var(--police-blue);
color: var(--police-blue);
}

.btn-outline-primary:hover {
background: var(--police-blue);
border-color: var(--police-blue);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-outline-success {
border-color: var(--police-blue);
color: var(--police-blue);
}
.btn-outline-success:hover {
background: var(--police-blue);
border-color: var(--police-blue);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-outline-warning {
border-color: var(--crimson-red);
color: var(--crimson-red);
}

.btn-outline-warning:hover {
background: var(--crimson-red);
border-color: var(--crimson-red);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-outline-info {
border-color: var(--info-color);
color: var(--info-color);
}

.btn-outline-info:hover {
background: var(--info-color);
border-color: var(--info-color);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-outline-secondary {
border-color: var(--border-color);
color: var(--text-secondary);
}

.btn-outline-secondary:hover {
background: var(--border-color);
border-color: var(--border-color);
color: var(--text-primary);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-outline-secondary:focus {
box-shadow: 0 0 0 0.2rem rgba(160, 160, 160, 0.25);
outline: none;
}

.btn-outline-danger {
border-color: var(--crimson-red);
color: var(--crimson-red);
}

.btn-outline-danger:hover {
background: var(--crimson-red);
border-color: var(--crimson-red);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.action-buttons {
display: flex;
gap: 6px;
}

.action-buttons .btn {
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
min-width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}

.action-buttons .btn:disabled {
opacity: 0.3;
filter: grayscale(70%);
cursor: not-allowed;
}

.action-buttons .btn:not(:disabled):hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

.modal-content {
border-radius: 16px;
border: none;
box-shadow: var(--shadow-lg);
}

.modal-header {
background: var(--dark-gray);
border-bottom: 1px solid var(--border-color);
border-radius: 16px 16px 0 0;
}

.modal-title {
font-weight: 600;
color: var(--text-primary);
}

.alert {
border-radius: 12px;
border: none;
box-shadow: var(--shadow-sm);
}

.alert-success {
background: var(--light-gray);
color: var(--police-blue);
border-left: 4px solid var(--police-blue);
}

.alert-info {
background: var(--light-gray);
color: var(--police-blue);
border-left: 4px solid var(--police-blue);
}

.text-muted {
color: var(--text-secondary) !important;
}

.form-control, .form-select {
border-radius: 8px;
border: 1px solid var(--border-color);
transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
border-color: var(--police-blue);
box-shadow: 0 0 0 3px rgba(0, 85, 165, 0.2);
}

.loading {
display: none;
}

.loading.show {
display: block;
}

.page-content {
display: none;
height: calc(100vh - 60px); /* Full height minus header */
overflow: hidden;
padding: 0;
}

.page-content.active {
display: block;
}

/* Gmail-like operation list styling */
.operations-list-container {
height: 100%;
display: flex;
flex-direction: column;
}

.operations-header {
padding: 16px 20px;
border-bottom: 1px solid #e0e0e0;
background: #fff;
flex-shrink: 0;
}

.operations-list {
flex: 1;
overflow-y: auto;
background: #fff;
}



.operation-item {
padding: 12px 20px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
}

.operation-item:hover {
background-color: #f8f9fa;
}

.operation-item.selected {
background-color: #e3f2fd;
border-left: 3px solid var(--police-blue);
}

.operation-info {
flex: 1;
min-width: 0;
}

.operation-title {
font-weight: 500;
color: #202124;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 0.5rem;
}

.operation-title .fa-info-circle {
opacity: 0.6;
transition: all 0.2s ease;
flex-shrink: 0;
}

.operation-title:hover .fa-info-circle {
opacity: 1;
color: var(--police-blue);
}

.operation-title .fa-info-circle:hover {
opacity: 1;
color: var(--police-blue);
transform: scale(1.1);
}

.operation-meta {
font-size: 0.875rem;
color: #5f6368;
display: flex;
align-items: center;
gap: 8px;
}

.operation-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

/* Search functionality styles - Ultra Compact Design */
.search-container {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 10px 16px;
margin-bottom: 15px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.search-input-group {
position: relative;
width: 100%;
}

.search-input {
border: 2px solid #e9ecef;
border-radius: 20px;
padding: 8px 16px 8px 40px;
font-size: 14px;
width: 100%;
transition: all 0.3s ease;
background: white;
}

.search-input:focus {
border-color: var(--police-blue);
box-shadow: 0 0 0 2px rgba(0, 133, 255, 0.1);
outline: none;
}

.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
font-size: 16px;
}



.search-results-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 10px 15px;
background: rgba(0, 133, 255, 0.05);
border-radius: 8px;
border-left: 4px solid var(--police-blue);
}

.search-highlight {
background: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
font-weight: 500;
}

.no-results {
text-align: center;
padding: 40px 20px;
color: #6c757d;
}

.no-results i {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.5;
}

/* Dark mode support */
:root[data-theme="dark"] .search-container {
background: linear-gradient(135deg, var(--card-bg) 0%, var(--light-bg) 100%);
border-color: var(--border-color);
}

:root[data-theme="dark"] .search-input {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .filter-select {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
}

.transcription-badge {
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 12px;
}

/* Gmail-like elements list styling */
.elements-list-container {
height: 100%;
display: flex;
flex-direction: column;
}

.elements-header {
padding: 16px 20px;
border-bottom: 1px solid #e0e0e0;
background: #fff;
flex-shrink: 0;
}

.elements-list {
flex: 1;
overflow-y: auto;
background: #fff;
}

.element-item {
padding: 8px 20px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

.element-item.dragging {
opacity: 0.5;
transform: rotate(2deg);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.element-item.drag-over {
border-color: var(--police-blue);
background-color: #f8f9fa;
}

.drag-handle {
cursor: grab;
color: #6c757d;
margin-right: 8px;
padding: 4px;
flex-shrink: 0;
}

.drag-handle:hover {
color: var(--police-blue);
}

.drag-handle:active {
cursor: grabbing;
}

.element-item:hover {
background-color: #f8f9fa;
}

.element-item.selected {
background-color: #e3f2fd;
border-left: 3px solid var(--police-blue);
}

.element-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}

.element-checkbox-container {
flex-shrink: 0;
}

.element-content {
flex: 1;
min-width: 0;
}

.element-title {
font-weight: 500;
color: #202124;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
}

.element-meta {
font-size: 0.875rem;
color: #5f6368;
}

.element-description {
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.element-field-type {
margin-top: 4px;
}



.element-prompt {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.element-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

/* Fixed height container for batch actions to prevent layout jumping */
.batch-actions-container {
height: 60px;
overflow: hidden;
transition: all 0.3s ease;
}

.batch-actions-container.hidden {
height: 0;
margin-bottom: 0;
}

#batchActionsBar {
transition: all 0.3s ease;
}

/* Make Details card header match operations header height */
.card-header.details-header {
padding: 16px 20px;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
color: #495057;
}

/* Report card headers styling */
.card-header:not(.details-header) {
background: #e9ecef;
color: #495057;
}

.card-header:not(.details-header) h6 {
font-weight: bold !important;
color: #495057;
}

/* Make Datenfeld titles bold in report cards */
.card-body h6 {
font-weight: bold !important;
color: #495057;
}

/* Full height card styling */
.card.h-100 {
height: calc(100vh - 60px) !important;
}

/* Floating notification system */
.floating-notification {
position: fixed;
top: 80px;
right: 20px;
z-index: 9999;
max-width: 400px;
animation: slideInRight 0.3s ease-out;
}

.notification-content {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.9rem;
font-weight: 500;
}

.floating-notification-success .notification-content {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
}

.floating-notification-error .notification-content {
background: linear-gradient(135deg, #dc3545, #e74c3c);
color: white;
}

.floating-notification-info .notification-content {
background: linear-gradient(135deg, #17a2b8, #20c997);
color: white;
}

.floating-notification-warning .notification-content {
background: linear-gradient(135deg, #ffc107, #fd7e14);
color: #212529;
font-weight: 600;
}

.floating-notification .btn-close {
opacity: 0.8;
transition: opacity 0.2s;
}

.floating-notification .btn-close:hover {
opacity: 1;
}

@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

/* Timeline styling for report history */
.timeline {
position: relative;
padding-left: 30px;
}

.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: #e9ecef;
}

.timeline-item {
position: relative;
margin-bottom: 20px;
}

.timeline-marker {
position: absolute;
left: -22px;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}

.timeline-content {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border-left: 3px solid #007bff;
}

.change-item {
background: #fff;
border: 1px solid #e9ecef !important;
}

.change-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.changes-list {
max-height: 400px;
overflow-y: auto;
}

/* Audio and transcription styling */
.audio-item {
transition: all 0.2s ease;
margin-bottom: 0.5rem;
}

.audio-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transform: translateY(-1px);
}

.transcription-text {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 0.9rem;
}

.audio-item audio {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.image-item {
transition: all 0.2s ease;
}

.image-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transform: translateY(-1px);
}

.image-item img {
transition: all 0.2s ease;
}

.image-item:hover img {
transform: scale(1.02);
}

/* Drag and Drop Styles */
.draggable-element {
transition: all 0.2s ease;
}

/* Mission Details Visibility Control */
.mission-details-hidden {
display: none !important;
}

/* Table Header Styling */
.table-header {
background-color: #e9ecef;
border-bottom: 2px solid #dee2e6;
}

.table-header th {
background-color: #e9ecef;
border-bottom: 2px solid #dee2e6;
font-weight: 600;
color: #343a40;
padding: 12px 8px;
}



.draggable-element.dragging {
opacity: 0.5;
transform: rotate(5deg);
}

.sortable-list {
min-height: 50px;
}

.sortable-list.drag-over {
background-color: #f8f9fa;
}



/* Compact layout for audio and transcription */
.audio-transcription-container {
/* Remove fixed height - let content determine height */
}

.transcription-container {
/* Remove height: 100% - let content determine height */
display: block;
}

.transcription-content {
/* Remove flex properties - let content flow naturally */
overflow-y: auto;
padding-top: 0;
}

.transcription-text {
margin-top: 0;
padding-top: 0;
}

/* Responsive adjustments for full-height sidebar */
@media (max-width: 768px) {
.sidebar-full {
position: relative;
top: auto;
left: auto;
width: 100%;
min-height: auto;
margin-bottom: 1rem;
border-radius: 12px;
border-right: none;
}

.col-md-10 {
margin-left: 0 !important;
}
}

/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}

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

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

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

/* Dark mode specific styles */
:root[data-theme="dark"] body {
background: var(--light-bg);
color: var(--text-primary);
}

:root[data-theme="dark"] .card {
background: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .card-header {
background: var(--card-bg);
border-bottom-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .card-header h5 {
color: var(--text-primary);
}

:root[data-theme="dark"] .sidebar-full {
background: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .sidebar-item {
color: var(--text-primary);
}

:root[data-theme="dark"] .sidebar-item:hover {
color: var(--text-primary);
background-color: rgba(0, 85, 165, 0.2);
}

:root[data-theme="dark"] .sidebar-item.active {
background-color: var(--police-blue);
color: var(--pure-white);
}

:root[data-theme="dark"] .text-muted {
color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .table {
color: var(--text-primary);
}

:root[data-theme="dark"] .table th {
background-color: var(--card-bg);
color: var(--text-primary);
border-color: var(--border-color);
}
:root[data-theme="dark"] .table td {
border-color: var(--border-color);
}

:root[data-theme="dark"] .table-hover tbody tr:hover {
background-color: rgba(0, 85, 165, 0.1);
}

:root[data-theme="dark"] .table-responsive {
background-color: var(--card-bg);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
background-color: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
background-color: var(--card-bg);
border-color: var(--police-blue);
color: var(--text-primary);
box-shadow: 0 0 0 0.2rem rgba(0, 85, 165, 0.25);
}

:root[data-theme="dark"] .template-element {
background: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .template-element:hover {
border-color: var(--police-blue);
}

:root[data-theme="dark"] .nav-tabs .nav-link {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .nav-tabs .nav-link:hover {
color: var(--police-blue) !important;
background-color: rgba(0, 85, 165, 0.1) !important;
}

:root[data-theme="dark"] .nav-tabs .nav-link.active {
color: var(--police-blue) !important;
background-color: rgba(0, 85, 165, 0.1) !important;
}

:root[data-theme="dark"] .nav-pills .nav-link {
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
background-color: var(--card-bg) !important;
}

:root[data-theme="dark"] .nav-pills .nav-link:hover {
color: var(--police-blue) !important;
background-color: rgba(0, 85, 165, 0.1) !important;
border-color: var(--police-blue) !important;
}

:root[data-theme="dark"] .nav-pills .nav-link.active {
color: var(--pure-white) !important;
background-color: var(--police-blue) !important;
border-color: var(--police-blue) !important;
}

/* Red icons with white center in dark mode */
:root[data-theme="dark"] .fas.fa-exclamation-triangle,
:root[data-theme="dark"] .fas.fa-times-circle,
:root[data-theme="dark"] .fas.fa-exclamation-circle {
color: var(--crimson-red);
}

:root[data-theme="dark"] .fas.fa-exclamation-triangle::before,
:root[data-theme="dark"] .fas.fa-times-circle::before,
:root[data-theme="dark"] .fas.fa-exclamation-circle::before {
color: var(--pure-white);
}

/* Dark mode scrollbar */
:root[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--light-bg);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--border-color);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: var(--police-blue);
}

/* Additional dark mode styles for lists and other elements */
:root[data-theme="dark"] .list-group {
background-color: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .list-group-item {
background-color: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .list-group-item:hover {
background-color: rgba(0, 85, 165, 0.1);
}

:root[data-theme="dark"] .list-group-item.active {
background-color: var(--police-blue);
border-color: var(--police-blue);
color: var(--pure-white);
}

:root[data-theme="dark"] .dropdown-menu {
background-color: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .dropdown-item {
color: var(--text-primary);
}

:root[data-theme="dark"] .dropdown-item:hover {
background-color: rgba(0, 85, 165, 0.1);
color: var(--text-primary);
}

:root[data-theme="dark"] .modal-content {
background-color: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .modal-header {
border-bottom-color: var(--border-color);
}

:root[data-theme="dark"] .modal-footer {
border-top-color: var(--border-color);
}

:root[data-theme="dark"] .modal-title {
color: var(--text-primary);
}

:root[data-theme="dark"] .alert {
background-color: var(--card-bg);
border-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .badge {
background-color: var(--police-blue);
}

:root[data-theme="dark"] .border {
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .border-top {
border-top-color: var(--border-color) !important;
}

:root[data-theme="dark"] .border-bottom {
border-bottom-color: var(--border-color) !important;
}

:root[data-theme="dark"] .border-start {
border-left-color: var(--border-color) !important;
}

:root[data-theme="dark"] .border-end {
border-right-color: var(--border-color) !important;
}

/* Dark mode for form switches */
:root[data-theme="dark"] .form-check-input {
background-color: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] .form-check-input:checked {
background-color: var(--police-blue);
border-color: var(--police-blue);
}

:root[data-theme="dark"] .form-check-label {
color: var(--text-primary);
}

/* Dark mode for operations and elements lists */
:root[data-theme="dark"] .operations-header {
background: var(--card-bg);
border-bottom-color: var(--border-color);
}

:root[data-theme="dark"] .operations-list {
background: var(--card-bg);
}

:root[data-theme="dark"] .operation-item {
border-bottom-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .operation-item:hover {
background-color: rgba(0, 85, 165, 0.1);
}

:root[data-theme="dark"] .operation-item.selected {
background-color: rgba(0, 85, 165, 0.2);
border-left-color: var(--police-blue);
}

:root[data-theme="dark"] .operation-title {
color: var(--text-primary);
}

:root[data-theme="dark"] .operation-meta {
color: var(--text-secondary);
}

:root[data-theme="dark"] .elements-header {
background: var(--card-bg);
border-bottom-color: var(--border-color);
}

:root[data-theme="dark"] .elements-list {
background: var(--card-bg);
}

:root[data-theme="dark"] .element-item {
border-bottom-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] .element-item:hover {
background-color: rgba(0, 85, 165, 0.1);
}

:root[data-theme="dark"] .element-item.selected {
background-color: rgba(0, 85, 165, 0.2);
border-left-color: var(--police-blue);
}

/* Dark mode for element text */
:root[data-theme="dark"] .element-title {
color: var(--text-primary);
}

:root[data-theme="dark"] .element-meta {
color: var(--text-secondary);
}

:root[data-theme="dark"] .element-description {
color: var(--text-primary);
}

:root[data-theme="dark"] .element-prompt {
color: var(--text-secondary);
}

/* Dark mode for search input group */
:root[data-theme="dark"] .input-group-text {
background-color: var(--card-bg);
border-color: var(--border-color);
color: var(--text-secondary);
}

:root[data-theme="dark"] .input-group-text .fas {
color: var(--text-secondary);
}

/* Dark mode for operation details content */
:root[data-theme="dark"] .audio-item {
background: linear-gradient(135deg, var(--card-bg) 0%, var(--light-bg) 100%) !important;
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .transcription-container {
background: linear-gradient(135deg, var(--card-bg) 0%, var(--light-bg) 100%) !important;
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .image-item {
background: linear-gradient(135deg, var(--card-bg) 0%, var(--light-bg) 100%) !important;
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .transcription-content {
color: var(--text-primary);
}

:root[data-theme="dark"] .transcription-text {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .audio-item strong,
:root[data-theme="dark"] .image-item strong {
color: var(--text-primary);
}

:root[data-theme="dark"] .audio-item small,
:root[data-theme="dark"] .image-item small {
color: var(--text-secondary);
}

:root[data-theme="dark"] #missionInfo {
background: var(--card-bg) !important;
color: var(--text-primary);
}

:root[data-theme="dark"] #missionInfo strong {
color: var(--text-primary);
}

:root[data-theme="dark"] hr {
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .bg-light {
background-color: var(--card-bg) !important;
}

/* Dark mode for generated reports */
:root[data-theme="dark"] #reportsListNew {
color: var(--text-primary);
}

:root[data-theme="dark"] #reportsListNew .card {
background: var(--card-bg);
border-color: var(--border-color);
}

:root[data-theme="dark"] #reportsListNew .card-header {
background: var(--card-bg);
border-bottom-color: var(--border-color);
color: var(--text-primary);
}

:root[data-theme="dark"] #reportsListNew .card-body {
color: var(--text-primary);
}

/* Dark mode for default state */
:root[data-theme="dark"] #defaultState {
color: var(--text-secondary);
}

/* Dark mode for subtitles and section headers */
:root[data-theme="dark"] h6.fw-bold {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] h6.fw-bold i,
:root[data-theme="dark"] h6.fw-bold .fas {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .fw-bold {
color: var(--text-primary) !important;
}

/* Dark mode for all text content in cards */
:root[data-theme="dark"] .card-body {
color: var(--text-primary);
}

:root[data-theme="dark"] .card-body strong {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body p {
color: var(--text-primary);
}

:root[data-theme="dark"] .card-body h6 {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body h5 {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body h4 {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body h3 {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body h2 {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body h1 {
color: var(--text-primary) !important;
}

/* Dark mode for report template cards */
:root[data-theme="dark"] .form-check:has(.report-template-checkbox) {
background: var(--card-bg) !important;
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .form-check:has(.report-template-checkbox):hover {
background: rgba(0, 85, 165, 0.1) !important;
border-color: var(--police-blue) !important;
}

:root[data-theme="dark"] .form-check:has(.report-template-checkbox:checked) {
background: rgba(0, 85, 165, 0.2) !important;
border-color: var(--police-blue) !important;
}

:root[data-theme="dark"] .form-check-label {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .form-check-label .fas {
color: var(--police-blue) !important;
}

:root[data-theme="dark"] .form-check-label small {
color: var(--text-primary) !important;
}

/* Dark mode for metadata text in cards */
:root[data-theme="dark"] .text-muted {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] small {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-body small {
color: var(--text-primary) !important;
}

/* Dark mode for badges and metadata */
:root[data-theme="dark"] .badge.bg-light {
background-color: var(--card-bg) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .badge.bg-light.text-dark {
color: var(--text-primary) !important;
}

/* Dark mode for report content areas */
:root[data-theme="dark"] .report-content {
background-color: rgba(255, 255, 255, 0.08) !important;
border-radius: 4px;
padding: 12px 16px;
margin: 4px 0;
}

:root[data-theme="dark"] .bg-light.report-content {
background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode for action button backgrounds */
:root[data-theme="dark"] .btn-outline-primary {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: var(--police-blue) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-primary:hover {
background-color: rgba(0, 85, 165, 0.2) !important;
border-color: var(--police-blue) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-secondary {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-secondary:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
border-color: var(--text-secondary) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-success {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: #28a745 !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-success:hover {
background-color: rgba(40, 167, 69, 0.2) !important;
border-color: #28a745 !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-danger {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: var(--crimson-red) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-danger:hover {
background-color: rgba(179, 57, 81, 0.2) !important;
border-color: var(--crimson-red) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-warning {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: #ffc107 !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .btn-outline-warning:hover {
background-color: rgba(255, 193, 7, 0.2) !important;
border-color: #ffc107 !important;
color: var(--text-primary) !important;
}

/* Dark mode for modal headers */
:root[data-theme="dark"] .modal-header {
background-color: var(--card-bg) !important;
border-bottom-color: var(--border-color) !important;
}

:root[data-theme="dark"] .modal-header .modal-title {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-header .btn-close {
filter: invert(1);
}

:root[data-theme="dark"] .modal-header .btn-close:hover {
filter: invert(1) brightness(0.8);
}

/* Dark mode for modal body */
:root[data-theme="dark"] .modal-body {
background-color: var(--card-bg) !important;
color: var(--text-primary) !important;
}

/* Dark mode for modal footer */
:root[data-theme="dark"] .modal-footer {
background-color: var(--card-bg) !important;
border-top-color: var(--border-color) !important;
}

/* Dark mode for modal dialog and content */
:root[data-theme="dark"] .modal-content {
background-color: var(--card-bg) !important;
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .modal-dialog {
color: var(--text-primary) !important;
}

/* Dark mode for modal backdrop */
:root[data-theme="dark"] .modal-backdrop {
background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Dark mode for form elements in modals */
:root[data-theme="dark"] .modal-content .form-control {
background-color: var(--light-bg) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-content .form-control:focus {
background-color: var(--light-bg) !important;
border-color: var(--police-blue) !important;
color: var(--text-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(0, 85, 165, 0.25) !important;
}

:root[data-theme="dark"] .modal-content .form-label {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .modal-content .form-text {
color: var(--text-secondary) !important;
}

/* Dark mode for settings page card headers */
:root[data-theme="dark"] .card-header {
background-color: rgba(255, 255, 255, 0.08) !important;
border-bottom-color: var(--border-color) !important;
}

:root[data-theme="dark"] .card-header h5,
:root[data-theme="dark"] .card-header h6 {
color: var(--text-primary) !important;
}

:root[data-theme="dark"] .report-content p {
color: var(--text-primary) !important;
margin-bottom: 4px;
}

:root[data-theme="dark"] .report-content strong {
color: var(--text-primary) !important;
}

/* Dark mode for change items */
:root[data-theme="dark"] .change-item {
background: var(--card-bg);
border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .change-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Dark mode for table headers */
:root[data-theme="dark"] .table-header {
background-color: var(--card-bg);
border-bottom-color: var(--border-color);
}

:root[data-theme="dark"] .table-header th {
background-color: var(--card-bg);
border-bottom-color: var(--border-color);
color: var(--text-primary);
}

/* Markdown content styling */
.markdown-content h3, .markdown-content h4, .markdown-content h5 {
color: var(--text-primary);
margin-bottom: 0.5rem;
font-weight: 600;
}

.markdown-content h3 {
font-size: 1.25rem;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 0.25rem;
}

.markdown-content h4 {
font-size: 1.1rem;
color: var(--primary-color);
}

.markdown-content h5 {
font-size: 1rem;
color: var(--text-secondary);
}

.markdown-content strong {
font-weight: 600;
color: var(--text-primary);
}

.markdown-content em {
font-style: italic;
color: var(--text-secondary);
}

.markdown-content ul, .markdown-content ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
}

.markdown-content li {
margin-bottom: 0.25rem;
line-height: 1.5;
}

.markdown-content code {
background-color: var(--light-bg);
color: var(--text-primary);
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}

.markdown-content pre {
background-color: var(--dark-gray);
color: var(--pure-white);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
}

.markdown-content pre code {
background: none;
color: inherit;
padding: 0;
}

.markdown-content a {
color: var(--primary-color);
text-decoration: none;
}

.markdown-content a:hover {
text-decoration: underline;
}

.markdown-content p {
margin-bottom: 0.75rem;
line-height: 1.6;
}

/* Dark mode adjustments for markdown */
:root[data-theme="dark"] .markdown-content h3 {
border-bottom-color: var(--primary-color);
}

:root[data-theme="dark"] .markdown-content code {
background-color: var(--dark-gray);
color: var(--pure-white);
}

:root[data-theme="dark"] .markdown-content pre {
background-color: var(--dark-gray);
color: var(--pure-white);
}

/* Registration form styling */
.registration-form .card {
border: none;
box-shadow: var(--shadow-lg);
border-radius: 12px;
}

.registration-form .card-header {
border-radius: 12px 12px 0 0 !important;
border-bottom: none;
}

.registration-form .form-control-lg {
border-radius: 8px;
border: 2px solid var(--border-color);
transition: all 0.2s ease;
}

.registration-form .form-control-lg:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(0, 85, 165, 0.25);
}

.registration-form .btn-lg {
border-radius: 8px;
font-weight: 600;
padding: 12px 30px;
}

#registration-options .btn {
border-radius: 12px;
transition: all 0.3s ease;
border-width: 2px;
}

#registration-options .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}

#registration-options .btn-outline-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}

#registration-options .btn-outline-success:hover {
background-color: var(--success-color);
border-color: var(--success-color);
}

/* Signup modal styling */
#signupModal .modal-dialog {
max-width: 800px;
}

#signup-options .btn {
border-radius: 12px;
transition: all 0.3s ease;
border-width: 2px;
}

#signup-options .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
#signup-options .btn-outline-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}

#signup-options .btn-outline-success:hover {
background-color: var(--success-color);
border-color: var(--success-color);
}

.signup-form {
animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   TITLE EDITING STYLES
   ======================================== */

.editable-title {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    position: relative;
}

.editable-title:hover {
    /* No background or border - just show the icon */
}

.editable-title:hover .edit-title-icon {
    opacity: 1 !important;
}

.edit-title-icon {
    transition: opacity 0.2s ease;
    opacity: 0;
    color: #6c757d !important;
}

.editable-title.title-editing {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.editable-title.title-editing input {
    border: 2px solid var(--police-blue);
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: bold;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.editable-title.title-editing input:focus {
    outline: none;
    border-color: var(--police-blue);
    box-shadow: 0 0 0 3px rgba(0, 85, 165, 0.1);
}

.editable-title.title-updated {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    animation: titleUpdateSuccess 0.5s ease;
}

@keyframes titleUpdateSuccess {
    0% { 
        background-color: rgba(40, 167, 69, 0.2);
        transform: scale(1.02);
    }
    100% { 
        background-color: rgba(40, 167, 69, 0.1);
        transform: scale(1);
    }
}

/* Dark mode adjustments for title editing */
[data-theme="dark"] .editable-title:hover {
    /* No background or border - just show the icon */
}

/* Template download button styling */
.download-template-btn {
    transition: all 0.2s ease;
}

.download-template-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-template-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Dark mode adjustments for download button */
[data-theme="dark"] .download-template-btn {
    border-color: #28a745;
    color: #28a745;
}

[data-theme="dark"] .download-template-btn:hover {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

[data-theme="dark"] .editable-title.title-editing input {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--police-blue);
}

[data-theme="dark"] .editable-title.title-updated {
    background-color: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.5);
}