/**
 * Waclaude Theme for DefectDojo
 * Based on Waclaude Brand Specification
 */

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
    /* Brand Colors */
    --brand-blood: #7d0c19;
    --brand-glare: #f38a00;
    --ink-900: #0d0d0d;
    --ink-50: #f2f2f2;
    --surface-800: #1b1b1b;
    --surface-700: #242424;
    --surface-600: #2d2d2d;
    
    /* Functional Colors */
    --primary: var(--brand-blood);
    --secondary: var(--brand-glare);
    --success: #0d6e0d;
    --info: #c45a00;
    --warning: var(--brand-glare);
    --danger: #a01424;
    --light: var(--ink-50);
    --dark: var(--surface-800);
    
    /* Severity Colors (aligned with brand) */
    --severity-critical: #a01424;
    --severity-high: var(--brand-blood);
    --severity-medium: var(--brand-glare);
    --severity-low: #c47316;
    --severity-info: #666666;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #333 !important;
    background-color: #f5f5f5 !important;
}

/* Page wrapper and content area */
#wrapper {
    background-color: #f5f5f5 !important;
}

#page-wrapper {
    background-color: white !important;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--ink-900);
}

h1 { font-size: 32px; line-height: 40px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 20px; line-height: 28px; font-weight: 600; font-family: 'Inter', sans-serif; }

code, pre, .monospace {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    line-height: 20px;
}

/* ============================================
   NAVBAR STYLING
   ============================================ */
.navbar-default {
    background-color: white !important;
    border-color: #e7e7e7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.navbar-default .navbar-brand {
    color: #333 !important;
}

.navbar-default .navbar-nav > li > a {
    color: #333 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 120ms ease-out;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--brand-blood) !important;
    background-color: rgba(125, 12, 25, 0.05) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: var(--brand-blood) !important;
    color: white !important;
}

/* Dropdown menus */
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #333 !important;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: rgba(125, 12, 25, 0.1) !important;
    color: var(--brand-blood) !important;
}

/* Toggle button */
.navbar-default .navbar-toggle {
    border-color: #ddd !important;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #f8f8f8 !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888 !important;
}

/* ============================================
   SIDEBAR STYLING
   ============================================ */
.sidebar {
    background-color: #f8f8f8 !important;
    border-right: 1px solid #ddd !important;
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a {
    color: #333 !important;
    background-color: transparent !important;
    transition: all 120ms ease-out;
}

.sidebar ul li a:hover,
.sidebar ul li a:focus {
    background-color: rgba(125, 12, 25, 0.1) !important;
    color: var(--brand-blood) !important;
}

.sidebar ul li.active > a,
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    background-color: var(--brand-blood) !important;
    color: white !important;
}

/* Fix for nested menu items */
.sidebar .nav-second-level li a {
    padding-left: 37px;
    color: #333 !important;
}

.sidebar .nav-second-level li a:hover {
    background-color: rgba(125, 12, 25, 0.1) !important;
    color: var(--brand-blood) !important;
}

/* Metis Menu specific fixes */
.metismenu li a {
    color: #333 !important;
}

.metismenu li.active > a {
    background-color: var(--brand-blood) !important;
    color: white !important;
}

.metismenu .active > a i,
.metismenu li.active > a .fa,
.metismenu li.active > a .glyphicon {
    color: white !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
    background-color: var(--brand-blood);
    border-color: var(--brand-blood);
    color: white !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #961020;
    border-color: #961020;
    color: white !important;
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(125, 12, 25, 0.3);
}

.btn-primary:active {
    color: white !important;
    transform: translateY(6px);
    box-shadow: none;
}

.btn-secondary,
.btn-warning {
    background-color: var(--brand-glare);
    border-color: var(--brand-glare);
    color: white !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover,
.btn-warning:hover {
    background-color: #d47700;
    border-color: #d47700;
    color: white !important;
}

/* Info buttons */
.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-info:hover,
.btn-info:focus {
    background-color: #138496;
    border-color: #117a8b;
    color: white !important;
}

/* Default buttons */
.btn-default {
    background-color: #e7e7e7;
    border-color: #ccc;
    color: #333 !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-default:hover,
.btn-default:focus {
    background-color: #d4d4d4;
    border-color: #b3b3b3;
    color: #333 !important;
}

/* Success buttons */
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: white !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #0a5a0a;
    border-color: #0a5a0a;
    color: white !important;
}

/* Add glitch effect on critical actions */
.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: white !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #8a0f1f;
    border-color: #8a0f1f;
    color: white !important;
}

.btn-danger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 138, 0, 0.3) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    transition: all 240ms ease-out;
}

.btn-danger:active::after {
    width: 200%;
    height: 200%;
}

/* Outline button variants */
.btn-outline-primary {
    color: var(--brand-blood) !important;
    border-color: var(--brand-blood) !important;
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-blood) !important;
    border-color: var(--brand-blood) !important;
    color: white !important;
}

.btn-outline-secondary {
    color: var(--brand-glare) !important;
    border-color: var(--brand-glare) !important;
    background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--brand-glare) !important;
    border-color: var(--brand-glare) !important;
    color: white !important;
}

.btn-outline-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: white !important;
}

.btn-outline-info {
    color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: white !important;
}

/* Button group fixes */
.btn-group .btn {
    color: inherit;
}

.btn-group .btn-primary,
.btn-group .btn-danger,
.btn-group .btn-warning,
.btn-group .btn-success,
.btn-group .btn-info {
    color: white !important;
}

/* Link buttons */
.btn-link {
    color: var(--brand-blood) !important;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--brand-glare) !important;
    text-decoration: underline;
}

/* ============================================
   CARDS & PANELS
   ============================================ */
.panel {
    border-radius: 12px;
    border: 1px solid var(--surface-600);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.panel-default {
    border-color: var(--surface-600);
}

.panel-default > .panel-heading {
    background-color: var(--surface-700);
    color: var(--ink-50);
    border-color: var(--surface-600);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}

.panel-body {
    background-color: white;
}

/* Dark theme panels */
.panel-dark {
    background-color: var(--surface-800);
    border-color: var(--surface-700);
}

.panel-dark .panel-body {
    background-color: var(--surface-800);
    color: var(--ink-50);
}

/* ============================================
   TABLES
   ============================================ */
.table {
    font-family: 'Inter', sans-serif;
    background-color: white;
}

.table > thead > tr > th {
    background-color: #f8f8f8 !important;
    color: #333 !important;
    font-weight: 600;
    border-bottom: 2px solid var(--brand-blood);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 12px 8px;
}

.table > tbody > tr > td {
    color: #333 !important;
    padding: 10px 8px;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(125, 12, 25, 0.03);
}

.table-bordered {
    border: 1px solid #e7e7e7;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid #e7e7e7;
}

/* ============================================
   SEVERITY BADGES
   ============================================ */
.severity-CRITICAL,
.label-danger {
    background-color: var(--severity-critical) !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-HIGH {
    background-color: var(--severity-high) !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-MEDIUM {
    background-color: var(--severity-medium) !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-LOW {
    background-color: var(--severity-low) !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-INFO,
.label-info {
    background-color: var(--severity-info) !important;
    color: white !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--brand-blood);
    transition: color 120ms ease-out;
}

a:hover,
a:focus {
    color: var(--brand-glare);
    text-decoration: none;
}

/* ============================================
   FORMS
   ============================================ */
.form-control {
    border-color: var(--surface-600);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    transition: all 120ms ease-out;
}

.form-control:focus {
    border-color: var(--brand-blood);
    box-shadow: 0 0 0 3px rgba(125, 12, 25, 0.1);
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    border-radius: 12px;
    border-width: 2px;
    font-family: 'Inter', sans-serif;
}

.alert-danger {
    background-color: rgba(160, 20, 36, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-warning {
    background-color: rgba(243, 138, 0, 0.1);
    border-color: var(--brand-glare);
    color: #a05600;
}

.alert-success {
    background-color: rgba(13, 110, 13, 0.1);
    border-color: var(--success);
    color: var(--success);
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress {
    background-color: var(--surface-600);
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--brand-glare);
    transition: width 240ms ease-out;
}

.progress-bar-danger {
    background-color: var(--brand-blood);
}

/* ============================================
   BADGES & LABELS
   ============================================ */
.badge,
.label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.badge-primary,
.label-primary {
    background-color: var(--brand-blood);
}

.badge-warning,
.label-warning {
    background-color: var(--brand-glare);
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.modal-header {
    background-color: var(--surface-700);
    color: var(--ink-50);
    border-radius: 12px 12px 0 0;
    border-bottom: 2px solid var(--brand-blood);
}

.modal-header .modal-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

/* ============================================
   MICRO INTERACTIONS
   ============================================ */
@keyframes glitch-flicker {
    0%, 100% { opacity: 1; }
    10% { opacity: 0.8; transform: translateX(-2px); }
    20% { opacity: 1; transform: translateX(2px); }
    30% { opacity: 0.9; transform: translateX(-1px); }
}

.glitch-effect {
    animation: glitch-flicker 180ms ease-out;
}

/* New vulnerability or alert items */
.new-item-flash {
    animation: flash-highlight 240ms ease-out;
}

@keyframes flash-highlight {
    0%, 100% { background-color: transparent; }
    25%, 75% { background-color: rgba(243, 138, 0, 0.15); }
}

/* ============================================
   DATATABLES OVERRIDES
   ============================================ */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-blood) !important;
    border-color: var(--brand-blood) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--brand-glare) !important;
    border-color: var(--brand-glare) !important;
    color: white !important;
}

/* ============================================
   SCROLLBAR STYLING (Webkit)
   ============================================ */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--surface-700);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-blood);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-glare);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-blood { color: var(--brand-blood) !important; }
.text-glare { color: var(--brand-glare) !important; }
.bg-blood { background-color: var(--brand-blood) !important; }
.bg-glare { background-color: var(--brand-glare) !important; }
.bg-surface { background-color: var(--surface-800) !important; }

/* 8pt grid spacing utilities */
.p-8 { padding: 8px !important; }
.p-16 { padding: 16px !important; }
.p-24 { padding: 24px !important; }
.p-32 { padding: 32px !important; }
.m-8 { margin: 8px !important; }
.m-16 { margin: 16px !important; }
.m-24 { margin: 24px !important; }
.m-32 { margin: 32px !important; }