:root {
  --primary-color: #C81C2C;
  --primary-color-dark: #A01622;
  --primary-color-light: #D8394B;
  --main-color: #FFFFFF;
  --text-color: #333333;
  --text-muted: #666666;
  --border-color: #E5E5E5;
  --background-light: #F8F9FA;
  --success-color: #28A745;
  --warning-color: #FFC107;
  --danger-color: #DC3545;
  --info-color: #17A2B8;
}

html {
  font-size: 14px;
  background-color: var(--main-color);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  background-color: var(--main-color);
  color: var(--text-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Button focus styles using primary color */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
}

/* Primary button styles */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--main-color);
}

.btn-primary:hover {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
  color: var(--main-color);
}

.btn-primary:focus {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
  box-shadow: 0 0 0 0.25rem rgba(200, 28, 44, 0.25);
}

.btn-primary:active {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
}

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

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

/* Navigation styles */
.navbar-light {
  background-color: var(--main-color) !important;
  border-bottom: 1px solid var(--border-color);
}

.navbar-light .navbar-brand {
  color: var(--primary-color);
  font-weight: 600;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--text-color);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary-color);
  font-weight: 500;
}

/* Form styles */
.form-control {
  border-color: var(--border-color);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(200, 28, 44, 0.15);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--text-muted);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Alert styles */
.alert-primary {
  background-color: rgba(200, 28, 44, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color-dark);
}

/* Link styles */
a {
  color: var(--primary-color);
}

a:hover {
  color: var(--primary-color-dark);
}

/* Card styles */
.card {
  background-color: var(--main-color);
  border-color: var(--border-color);
}

.card-header {
  background-color: var(--background-light);
  border-bottom-color: var(--border-color);
}

/* Table styles */
.table {
  background-color: var(--main-color);
}

.table th {
  border-bottom-color: var(--border-color);
  color: var(--text-color);
}

.table td {
  border-top-color: var(--border-color);
}

/* Footer styles */
.footer {
  background-color: var(--background-light);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}

/* Build Info Toolbar */
.build-info-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #ecf0f1;
    font-size: 11px;
    font-weight: 500;
    z-index: 1060;
    border-top: 1px solid #1a252f;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}

.build-info-toolbar .container-fluid {
    height: 100%;
    padding: 0 15px;
}

.build-info-left, .build-info-right {
    display: flex;
    align-items: center;
    color: #bdc3c7;
}

.build-info-left {
    color: #ecf0f1;
}

.build-info-right {
    color: #bdc3c7;
}

.build-version {
    color: #ecf0f1;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    display: inline-flex;
    align-items: center;
}

.build-info-left i,
.build-info-left .build-version {
    vertical-align: middle;
    line-height: 1;
}

.environment-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #3498db;
    color: white;
}

.build-info-toolbar i {
    font-size: 10px;
    opacity: 0.8;
}

/* Login specific styles */
.login-container {
  background: linear-gradient(135deg, var(--main-color) 0%, var(--background-light) 100%);
  min-height: calc(100vh - 32px); /* Account for bottom toolbar */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--main-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.login-header h2 {
  color: var(--text-color);
}

.login-header p {
  color: var(--text-muted);
}

/* Badge styles */
.badge.bg-primary {
  background-color: var(--primary-color) !important;
}

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

.page-link:hover {
  color: var(--primary-color-dark);
  background-color: var(--background-light);
  border-color: var(--border-color);
}

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

/* Responsive utilities */
@media (max-width: 767.98px) {
  .table-responsive {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   DROPDOWN Z-INDEX FIXES - COMPREHENSIVE SOLUTION
   ========================================================================== */

/* Ensure dropdowns always appear above modals and other elements */
.dropdown-menu {
  z-index: 1060 !important; /* Higher than modal (1055) and backdrop (1050) */
}

/* Fix for dropdowns in tables and containers */
.table .dropdown,
.table-responsive .dropdown,
.card .dropdown,
.container .dropdown,
.container-fluid .dropdown {
  position: static;
}

.table .dropdown-menu,
.table-responsive .dropdown-menu,
.card .dropdown-menu,
.container .dropdown-menu,
.container-fluid .dropdown-menu {
  position: absolute !important;
  z-index: 1060 !important;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Specific fix for modal context dropdowns */
.modal .dropdown-menu {
  z-index: 1065 !important; /* Even higher when inside modals */
}

/* Bootstrap utility overrides for z-index */
.z-index-dropdown {
  z-index: 1060 !important;
}

.z-index-dropdown-modal {
  z-index: 1065 !important;
}

/* Ensure dropdown toggle buttons don't interfere */
.dropdown-toggle {
  z-index: auto;
}

/* Fix for navbar dropdowns */
.navbar .dropdown-menu {
  z-index: 1060 !important;
}

/* ==========================================================================
   END DROPDOWN FIXES
   ========================================================================== */

/* ==========================================================================
   RICH TEXT TABLE STYLES (DevExtreme HTML Editor + rendered content)
   ========================================================================== */
.dx-htmleditor table,
.content-body table,
.legacy-quill-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.dx-htmleditor th, .dx-htmleditor td,
.content-body th, .content-body td,
.legacy-quill-content th, .legacy-quill-content td {
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  vertical-align: top;
}

.dx-htmleditor thead th,
.content-body thead th,
.legacy-quill-content thead th {
  background-color: var(--background-light);
  font-weight: 600;
}

/* Make wide tables scroll horizontally within the editor */
.dx-htmleditor table {
  display: block;
  overflow-x: auto;
}

/* Legacy Quill content display (read-only) */
.legacy-quill-content {
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
    min-height: 100px;
}

.legacy-quill-content p {
    margin-bottom: 0.5rem;
}

.legacy-quill-content p:last-child {
    margin-bottom: 0;
}

/* DevExtreme HTML Editor Resize Handle */
.dx-widget.dx-htmleditor {
    position: relative !important;
}

.dx-htmleditor-resize-handle {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    z-index: 9999;
    display: block !important;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-top-left-radius: 3px;
    opacity: 0.8;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    pointer-events: auto;
}

/* Diagonal grip dots pattern (like Windows/DevExpress resize grip) */
.dx-htmleditor-resize-handle::before {
    content: "";
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    background-image: 
        radial-gradient(circle, #999 1px, transparent 1px);
    background-size: 3px 3px;
    background-position: bottom right;
}

.dx-htmleditor-resize-handle:hover {
    opacity: 1;
    background-color: #e9ecef;
}

.dx-htmleditor-resize-handle:hover::before {
    background-image: 
        radial-gradient(circle, #666 1px, transparent 1px);
}

/* Prevent text selection during resize */
.dx-htmleditor-resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}