/*
 * ============================================================================
 * MODULAR THEME SYSTEM
 * ============================================================================
 * 
 * This CSS file implements a comprehensive, modular theme system using CSS 
 * variables. All theme colors, backgrounds, text colors, borders, shadows,
 * and interactive states are defined in the :root section below.
 * 
 * TO MODIFY THE THEME:
 * 1. Locate the :root section at the top of this file
 * 2. Update the CSS variables to your desired colors
 * 3. Changes will automatically apply site-wide
 * 
 * VARIABLE ORGANIZATION:
 * - Primary Brand Colors: Main brand identity colors
 * - Background Colors: Body, cards, surfaces, hover states
 * - Text Colors: Primary, secondary, muted text colors
 * - Border Colors: Standard borders and hover states
 * - Interactive States: Links, buttons, hover effects
 * - Status Colors: Success, error, warning, info
 * - Shadows: Box shadows for depth and elevation
 * - Special Colors: Badges, alerts, special components
 * 
 * ============================================================================
 */

/* ============================================================================
   CSS VARIABLES - THEME DEFINITION
   ============================================================================ */
:root {
    /* ------------------------------------------------------------------------
       Primary Brand Colors
       ------------------------------------------------------------------------ */
    --primary-navy: #1a2b4a;
    --primary-blue: #2c4a7c;
    --accent-blue: #4a90d9;
    --accent-blue-hover: #3a7fc8;
    
    /* ------------------------------------------------------------------------
       Background Colors
       ------------------------------------------------------------------------ */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #3a3a3a;
    --bg-hover: #333333;
    --bg-card: #2a2a2a;
    --bg-gradient-start: #1a1a1a;
    --bg-gradient-end: #2a2a2a;
    
    /* Light theme backgrounds (for legacy/light components if needed) */
    --light-bg: #f8fafc;
    --light-blue: #e8f4fd;
    
    /* ------------------------------------------------------------------------
       Text Colors
       ------------------------------------------------------------------------ */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #6a6a6a;
    --text-dark: #1a2b4a;
    --text-light: rgba(255, 255, 255, 0.9);
    
    /* ------------------------------------------------------------------------
       Border Colors
       ------------------------------------------------------------------------ */
    --border-color: #3a3a3a;
    --border-light: #e2e8f0;
    --border-hover: var(--accent-blue);
    
    /* ------------------------------------------------------------------------
       Interactive States
       ------------------------------------------------------------------------ */
    --link-color: var(--accent-blue);
    --link-hover: var(--accent-blue-hover);
    --nav-link-color: rgba(255, 255, 255, 0.9);
    --nav-link-hover: var(--text-primary);
    
    /* ------------------------------------------------------------------------
       Status Colors
       ------------------------------------------------------------------------ */
    --success-green: #28a745;
    --success-light: rgba(40, 167, 69, 0.2);
    --success-text: #4ade80;
    --danger-red: #dc3545;
    --warning-yellow: #ffc107;
    --warning-text: #ffc107;
    --info-cyan: #17a2b8;
    --archived-gray: #6c757d;
    --archived-text: #adb5bd;
    
    /* ------------------------------------------------------------------------
       Badge Colors
       ------------------------------------------------------------------------ */
    --badge-accent-bg: rgba(74, 144, 217, 0.2);
    --badge-success-bg: rgba(40, 167, 69, 0.2);
    --badge-gray-bg: rgba(108, 117, 125, 0.2);
    --badge-white-overlay: rgba(255, 255, 255, 0.2);
    
    /* ------------------------------------------------------------------------
       Shadows
       ------------------------------------------------------------------------ */
    --shadow-sm: 0 2px 10px rgba(26, 43, 74, 0.15);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(74, 144, 217, 0.2);
    --shadow-xl: 0 4px 12px rgba(74, 144, 217, 0.3);
    --shadow-xxl: 0 4px 15px rgba(74, 144, 217, 0.4);
    --shadow-info: 0 4px 12px rgba(74, 144, 217, 0.15);
    --shadow-cyan: 0 4px 12px rgba(23, 162, 184, 0.15);
    --shadow-cyan-xl: 0 4px 15px rgba(23, 162, 184, 0.4);
    
    /* ------------------------------------------------------------------------
       Focus States
       ------------------------------------------------------------------------ */
    --focus-ring: 0 0 0 3px rgba(74, 144, 217, 0.15);
    --focus-ring-input: 0 0 0 0.2rem rgba(74, 144, 217, 0.25);
    
    /* ------------------------------------------------------------------------
       Gradients
       ------------------------------------------------------------------------ */
    --gradient-primary: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    --gradient-pricing: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    --gradient-term-selected: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    --gradient-light: linear-gradient(135deg, #f8fafc 0%, #e8f4fd 100%);
    --gradient-info: linear-gradient(135deg, #17a2b8 0%, #6dd5ed 100%);
    --gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --gradient-purple: linear-gradient(135deg, #6f42c1 0%, #a370f7 100%);
    --gradient-gray: linear-gradient(135deg, #495057 0%, #6c757d 100%);
    --gradient-blue: linear-gradient(135deg, #0d6efd 0%, #6ea8fe 100%);
    
    /* Additional color values for text */
    --color-info-text: #17a2b8;
    
    /* ------------------------------------------------------------------------
       Legacy Variables (for backwards compatibility)
       ------------------------------------------------------------------------ */
    --white: var(--text-primary);
    --dark-text: var(--text-dark);
    --muted-text: #5a6a7a;
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

body {
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    min-height: 100vh;
}

/* Ensure all text is visible on dark background */
.container,
.container-fluid {
    color: var(--text-primary);
}

/* Override Bootstrap default text colors for dark theme */
p, span, div, label {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.navbar-dataforge {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0;
}

.navbar-dataforge .navbar-brand {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--text-primary) !important;
    letter-spacing: -0.5px;
}

.navbar-dataforge .nav-link {
    color: var(--nav-link-color) !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

.navbar-dataforge .nav-link:hover {
    color: var(--nav-link-hover) !important;
}

.navbar-dataforge .btn-quote {
    background-color: var(--accent-blue);
    color: var(--text-primary) !important;
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.navbar-dataforge .btn-quote:hover {
    background-color: var(--accent-blue-hover);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.3rem;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.hero-section {
    background: var(--gradient-primary);
    color: var(--text-primary);
    padding: 3rem 0;
    margin-bottom: 2rem;
}

.hero-section h1 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.hero-section p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
    color: var(--text-primary);
}

/* ============================================================================
   SEARCH & FILTER SECTION
   ============================================================================ */

.search-section {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.search-section .form-label {
    color: var(--text-secondary);
}

.search-section .form-control,
.search-section .form-select {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-section .form-control:focus,
.search-section .form-select:focus {
    background-color: var(--bg-primary);
    border-color: var(--accent-blue);
    box-shadow: var(--focus-ring);
    color: var(--text-primary);
}

.search-section .form-control::placeholder {
    color: var(--text-muted);
}

.search-section .input-group-text {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-secondary);
}

.search-section .input-group .form-control {
    border-left: none;
    border-radius: 0 8px 8px 0;
}

/* ============================================================================
   TYPE LEGEND
   ============================================================================ */

.type-legend {
    background: var(--bg-secondary);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.type-legend .legend-header {
    color: var(--text-primary);
}

.type-legend .legend-header svg {
    color: var(--accent-blue);
}

.type-legend .legend-header h6 {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    font-size: 1.1rem;
}

.legend-item {
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 100%;
    transition: all 0.2s ease;
}

.legend-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.legend-type-badge {
    display: inline-block;
    background: var(--accent-blue);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    margin-bottom: 0.75rem;
    letter-spacing: 0.3px;
}

.legend-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================================================
   QUANTITY CONTROLS
   ============================================================================ */

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity-display {
    color: var(--text-primary);
    font-weight: 600;
}

.quantity-decrement,
.quantity-increment {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.quantity-decrement:hover:not(:disabled),
.quantity-increment:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.quantity-decrement:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   SERVER GRID
   ============================================================================ */

.server-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .server-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1400px) {
    .server-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.server-group-header {
    grid-column: 1 / -1;
    margin-top: 1rem;
}

.server-group-header:first-child {
    margin-top: 0;
}

.server-card {
    display: flex;
    flex-direction: column;
}

.server-card .card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.group-header {
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.group-title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--text-primary);
}

.group-count {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    background-color: var(--bg-card);
}

.card-header-dataforge {
    background: var(--gradient-primary);
    color: var(--text-primary);
    padding: 1rem 1.25rem;
    border: none;
}

.card-header-dataforge h5 {
    font-weight: 600;
    margin: 0;
    font-size: 1.1rem;
}

.card-header-dataforge .badge {
    background-color: var(--badge-white-overlay) !important;
    color: var(--text-primary);
    font-weight: 500;
    padding: 0.4em 0.8em;
    border-radius: 20px;
}

/* Special card header variants */
.card-header-info {
    background: var(--gradient-info) !important;
}

.card-header-purple {
    background: var(--gradient-purple) !important;
}

.card-header-success {
    background: var(--gradient-success) !important;
}

.card-header-gray {
    background: var(--gradient-gray) !important;
}

.card-header-blue {
    background: var(--gradient-blue) !important;
}

/* Quote total summary section */
.quote-total-section {
    background: var(--gradient-primary);
    color: var(--text-primary);
    padding: 1rem 1.25rem;
}

/* Submit button with success gradient */
.btn-submit-success {
    background: var(--gradient-success) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    border: none;
}

.btn-submit-success:hover {
    opacity: 0.9;
    color: var(--text-primary) !important;
}

/* Info text color */
.text-info-color {
    color: var(--color-info-text) !important;
}

/* Primary navy text color */
.text-primary-navy {
    color: var(--primary-navy) !important;
}

/* Card with accent border */
.card-accent-border {
    border: 2px solid var(--accent-blue);
}

/* Breadcrumb styling */
.breadcrumb-transparent {
    background: transparent;
}

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

.breadcrumb-active {
    color: var(--text-primary);
}

/* Hero badge */
.hero-badge {
    background-color: var(--badge-white-overlay);
    font-size: 0.9rem;
    padding: 0.5em 1em;
}

/* Location badge */
.location-badge {
    background-color: var(--primary-navy);
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: help;
}

/* Spec divider */
.spec-divider {
    border-top: 1px solid var(--border-color);
}

/* Sticky positioning utility */
.sticky-top-1rem {
    position: sticky;
    top: 1rem;
}

.card-header h5 {
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.card-body p,
.card-body small,
.card-body span:not(.badge):not(.legend-type-badge) {
    color: var(--text-primary);
}

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

.card-footer-dataforge {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

/* ============================================================================
   SPECIFICATIONS
   ============================================================================ */

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.spec-value {
    color: var(--text-primary);
    font-weight: 600;
}

.specs p {
    font-size: 0.9rem;
}

/* ============================================================================
   BADGES
   ============================================================================ */

.badge-type {
    background-color: var(--badge-accent-bg) !important;
    color: var(--accent-blue) !important;
    font-weight: 600;
    padding: 0.5em 1em;
    border-radius: 20px;
    font-size: 0.8rem;
}

.badge-os {
    background-color: var(--badge-accent-bg) !important;
    color: var(--accent-blue) !important;
    font-weight: 500;
}

.badge-managed {
    background-color: var(--badge-success-bg) !important;
    color: var(--success-text) !important;
    font-weight: 500;
}

.badge-unmanaged {
    background-color: var(--badge-gray-bg) !important;
    color: var(--archived-text) !important;
    font-weight: 500;
}

.badge.bg-warning {
    color: var(--text-dark) !important;
}

/* ============================================================================
   PRICING
   ============================================================================ */

.pricing-box {
    background: var(--gradient-pricing);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
    margin-top: auto;
}

.pricing-box .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pricing-box .price-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pricing-summary {
    background: var(--gradient-pricing);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn-view-details {
    background-color: var(--primary-navy);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-view-details:hover {
    background-color: var(--primary-blue);
    color: var(--text-primary);
}

.btn-add-quote {
    background-color: transparent;
    color: var(--success-green);
    border: 2px solid var(--success-green);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-add-quote:hover {
    background-color: var(--success-green);
    color: var(--text-primary);
}

.btn-add-quote.added {
    background-color: var(--success-green);
    color: var(--text-primary);
    border-color: var(--success-green);
}

/* Dark theme button overrides */
.btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer-dataforge {
    background: var(--primary-navy);
    color: var(--text-light);
    padding: 2rem 0;
    margin-top: 3rem;
}

.footer-dataforge a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-dataforge a:hover {
    color: var(--text-primary);
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-label {
    font-weight: 600;
    color: var(--text-primary);
}

.form-control,
.form-select {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--accent-blue) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--focus-ring-input);
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* ============================================================================
   TEXT UTILITIES
   ============================================================================ */

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

/* ============================================================================
   TABLES
   ============================================================================ */

.table {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.table thead th {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.table th {
    background-color: var(--bg-primary) !important;
    font-weight: 600;
    color: var(--text-primary) !important;
}

.table tbody {
    background-color: var(--bg-secondary);
}

.table tbody tr {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

.table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

.table tbody td {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

.table-hover tbody tr {
    background-color: var(--bg-secondary) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

table.table tbody tr {
    background-color: var(--bg-secondary) !important;
}

table.table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

table.table.table-hover tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

/* Ultra-specific override for quote table rows - highest priority */
table.table.table-hover tbody tr[id^="quote-item-"]:hover {
    background-color: var(--bg-secondary) !important;
}

table.table.table-hover tbody tr[id^="quote-item-"]:hover td {
    background-color: transparent !important;
}

table.table tbody tr td {
    background-color: transparent !important;
}

tr[id^="quote-item-"] {
    background-color: var(--bg-secondary) !important;
}

tr[id^="quote-item-"]:hover {
    background-color: var(--bg-secondary) !important;
}

tr[id^="quote-item-"] td {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.table-responsive .table tbody tr {
    background-color: var(--bg-secondary) !important;
}

.table-responsive .table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

.table-responsive .table tbody tr td {
    background-color: transparent !important;
}

.card .card-body.p-0 {
    background-color: var(--bg-secondary) !important;
}

.card .card-body.p-0 .table {
    background-color: var(--bg-secondary) !important;
}

.card .card-body.p-0 .table tbody tr {
    background-color: var(--bg-secondary) !important;
}

.card .card-body.p-0 .table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

.table-secondary {
    background-color: var(--bg-primary) !important;
}

.table-secondary:hover {
    background-color: var(--bg-primary) !important;
}

.table-secondary td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.table tbody tr strong {
    color: var(--text-primary) !important;
}

.table tbody tr small {
    color: var(--text-secondary) !important;
}

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

/* Quantity controls in quote table */
.table tbody tr .qty-input {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.table tbody tr .qty-btn {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.table tbody tr .qty-btn:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Line total styling */
.quote-line-total {
    color: var(--accent-blue) !important;
}

/* Override inline styles in quote template */
table thead[style*="background-color"] {
    background-color: var(--bg-primary) !important;
}

table tbody tr[class="table-secondary"] td[style*="background-color"] {
    background-color: var(--bg-primary) !important;
}

div[style*="background-color: var(--light-bg)"] {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

div[style*="border-top: 1px solid #dee2e6"] {
    border-top-color: var(--border-color) !important;
}

/* Quote summary sections */
.quote-summary-section {
    background-color: var(--bg-primary);
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

.quote-summary-box {
    background-color: var(--bg-primary);
    border-radius: 0.5rem;
    border: 2px solid var(--info-cyan);
    color: var(--text-primary);
}

/* ============================================================================
   TERM CARDS
   ============================================================================ */

.term-option {
    cursor: pointer;
    transition: all 0.2s ease;
}

.term-card {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.term-option:hover .term-card {
    border-color: var(--accent-blue) !important;
    box-shadow: var(--shadow-xl);
}

.term-option.selected .term-card {
    border-color: var(--accent-blue) !important;
    background: var(--gradient-term-selected) !important;
    box-shadow: var(--shadow-xxl);
}

.term-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem;
}

.term-months {
    font-size: 0.9rem;
    color: var(--text-secondary) !important;
    margin-bottom: 0.5rem;
}

.term-discount .badge {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

/* ============================================================================
   PAYMENT CARDS
   ============================================================================ */

.payment-option {
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-card {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.payment-option:hover .payment-card {
    border-color: var(--info-cyan) !important;
    box-shadow: var(--shadow-cyan);
}

.payment-option.selected .payment-card {
    border-color: var(--info-cyan) !important;
    background: var(--gradient-term-selected) !important;
    box-shadow: var(--shadow-cyan-xl);
}

.payment-option.disabled .payment-card {
    opacity: 0.6;
    cursor: not-allowed;
}

.payment-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem;
}

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

/* ============================================================================
   SUMMARY BOXES
   ============================================================================ */

#purchaseSummary,
#discountSummary {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

#purchaseSummary hr,
#discountSummary hr {
    border-color: var(--border-color) !important;
}

/* ============================================================================
   FAQ SECTION
   ============================================================================ */

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.faq-section {
    margin-bottom: 2.5rem;
}

.faq-category {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-blue);
}

.faq-item {
    margin-bottom: 0.75rem;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.faq-question[aria-expanded="true"] {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.faq-question span {
    flex: 1;
    padding-right: 1rem;
}

.faq-icon {
    color: var(--accent-blue);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-blue);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 1.25rem;
}

.faq-answer p {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.faq-answer li {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.faq-answer strong {
    color: var(--accent-blue);
}

.faq-contact-cta {
    background: var(--gradient-primary);
    color: var(--text-primary);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
}

.faq-contact-cta h4 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.faq-contact-cta p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.faq-contact-cta .btn-primary {
    background-color: var(--accent-blue);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 25px;
}

.faq-contact-cta .btn-primary:hover {
    background-color: var(--accent-blue-hover);
}

/* ============================================================================
   ALERTS
   ============================================================================ */

.alert-info {
    background-color: rgba(74, 144, 217, 0.15);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

/* ============================================================================
   ADMIN STATUS COLORS
   ============================================================================ */

.admin-status-active {
    color: var(--success-green);
}

.admin-status-inactive {
    color: var(--warning-yellow);
}

.admin-status-archived {
    color: var(--archived-gray);
}

/* ============================================================================
   MISC COMPONENTS
   ============================================================================ */

.component-row {
    position: relative;
    background-color: var(--bg-secondary);
}

.no-servers-message {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.no-servers-message h4 {
    color: var(--text-primary);
    font-weight: 600;
}

.no-servers-message p {
    color: var(--text-secondary);
}

.section-divider {
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

.service-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* ============================================================================
   DROPDOWN MENUS (Admin)
   ============================================================================ */

.dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md);
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-color: var(--border-color) !important;
    opacity: 1;
}

/* ============================================================================
   BOOTSTRAP COMPONENTS - DARK THEME OVERRIDES
   ============================================================================ */

/* Alerts */
.alert {
    border-radius: 8px;
}

.alert-success {
    background-color: var(--badge-success-bg);
    border-color: var(--success-green);
    color: var(--text-primary);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: var(--danger-red);
    color: var(--text-primary);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: var(--warning-yellow);
    color: var(--text-primary);
}

.alert-primary {
    background-color: var(--badge-accent-bg);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

/* Buttons */
.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.btn-primary:hover {
    background-color: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
    color: var(--text-primary);
}

.btn-success {
    background-color: var(--success-green);
    border-color: var(--success-green);
    color: var(--text-primary);
}

.btn-danger {
    background-color: var(--danger-red);
    border-color: var(--danger-red);
    color: var(--text-primary);
}

/* Cards (Bootstrap default) */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.card-header {
    background-color: var(--bg-primary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Modal (if used) */
.modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

.modal-header .btn-close {
    filter: invert(1);
}

/* Pagination */
.pagination .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.pagination .page-link:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item a {
    color: var(--text-light);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

/* ============================================================================
   FOOTER UTILITIES
   ============================================================================ */

.footer-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
    margin: 1.5rem 0;
}

.footer-small-text {
    font-size: 0.75rem;
    opacity: 0.8;
}

.footer-small-text a {
    color: var(--text-light);
}

.footer-small-text a:hover {
    color: var(--text-primary);
}

/* ============================================================================
   ADMIN SPECIFIC STYLES
   ============================================================================ */

/* Admin cards should use dark theme */
.admin-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Admin filters/search */
.admin-filters {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* Bootstrap utility class overrides for dark theme */
.bg-primary {
    background-color: var(--primary-navy) !important;
}

.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

.bg-success {
    background-color: var(--success-green) !important;
}

.bg-warning {
    background-color: var(--warning-yellow) !important;
}

.bg-danger {
    background-color: var(--danger-red) !important;
}

.bg-info {
    background-color: var(--info-cyan) !important;
}

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

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

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

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

.text-info {
    color: var(--info-cyan) !important;
}

/* Table striped rows - dark theme */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--bg-hover) !important;
}

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */

.login-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    border-radius: 12px;
}

.login-title {
    color: var(--text-primary);
}

.login-back-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-back-link:hover {
    color: var(--text-primary);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .type-legend {
        padding: 1rem 1.25rem;
    }
    
    .legend-item {
        padding: 1rem;
    }
}

/* ============================================================================
   UNIVERSAL TABLE ROW HOVER REMOVAL
   ============================================================================
   This section ensures NO table rows change color on hover anywhere on the site.
   Maximum specificity rules to override Bootstrap and all other styles.
   ============================================================================ */

/* Universal override - disables ALL table row hover effects */
table tbody tr:hover,
table tbody tr:focus,
table tbody tr:active,
table.table tbody tr:hover,
table.table tbody tr:focus,
table.table tbody tr:active,
table.table-hover tbody tr:hover,
table.table-hover tbody tr:focus,
table.table-hover tbody tr:active,
table.table tbody tr.table-hover:hover,
table tbody tr.table-hover:hover,
tbody tr:hover,
tbody tr:focus,
tbody tr:active,
tr:hover,
tr:focus,
tr:active {
    background-color: var(--bg-secondary) !important;
}

/* Specific rules for all table row variants - maintain current background */
.table tbody tr:hover,
.table-hover tbody tr:hover,
table.table tbody tr:hover,
table.table.table-hover tbody tr:hover,
table.table-hover tbody tr:hover,
.table-responsive .table tbody tr:hover,
.card .card-body .table tbody tr:hover,
.card .card-body.p-0 .table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

/* Quote item rows specifically */
tr[id^="quote-item-"]:hover,
table.table-hover tbody tr[id^="quote-item-"]:hover,
table.table.table-hover tbody tr[id^="quote-item-"]:hover {
    background-color: var(--bg-secondary) !important;
}

/* Table secondary rows (group headers) */
.table-secondary:hover,
table.table-hover tbody tr.table-secondary:hover {
    background-color: var(--bg-primary) !important;
}

/* Ensure table cells don't change on row hover */
table tbody tr:hover td,
table.table-hover tbody tr:hover td,
table tbody tr:hover th,
table.table-hover tbody tr:hover th {
    background-color: transparent !important;
}

/* ============================================================================
   QUOTE LINE ITEMS - ABSOLUTE NO HOVER EFFECTS
   ============================================================================
   Maximum specificity rules to ensure quote line items have ZERO hover effects.
   Targets the exact quote table structure to override all possible Bootstrap
   and custom styles that might cause hover highlighting.
   ============================================================================ */

/* Quote table structure - prevent all hover effects on line items */
.card .card-body.p-0 .table-responsive .table tbody tr[id^="quote-item-"]:hover,
.card .card-body.p-0 .table-responsive .table.table-hover tbody tr[id^="quote-item-"]:hover,
.card .card-body.p-0 .table tbody tr[id^="quote-item-"]:hover,
.card .card-body.p-0 .table.table-hover tbody tr[id^="quote-item-"]:hover {
    background-color: var(--bg-secondary) !important;
    transition: none !important;
}

/* Quote line item cells - maintain background on hover */
.card .card-body.p-0 .table-responsive .table tbody tr[id^="quote-item-"]:hover td,
.card .card-body.p-0 .table-responsive .table.table-hover tbody tr[id^="quote-item-"]:hover td,
.card .card-body.p-0 .table tbody tr[id^="quote-item-"]:hover td,
.card .card-body.p-0 .table.table-hover tbody tr[id^="quote-item-"]:hover td {
    background-color: transparent !important;
    transition: none !important;
}

/* Additional specificity for quote items - prevent any visual changes */
div.table-responsive table.table tbody tr[id^="quote-item-"]:hover,
div.table-responsive table.table.table-hover tbody tr[id^="quote-item-"]:hover {
    background-color: var(--bg-secondary) !important;
    transition: none !important;
    opacity: 1 !important;
}

div.table-responsive table.table tbody tr[id^="quote-item-"]:hover td,
div.table-responsive table.table.table-hover tbody tr[id^="quote-item-"]:hover td {
    background-color: transparent !important;
    transition: none !important;
}