/* PDPL Compliance Tool - Neubrutalism Theme */
:root {
    --brutal-black: #000;
    --brutal-white: #fff;
    --brutal-bg: #f0f0f0;
    --brutal-yellow: #ffd43b;
    --brutal-pink: #ff6b6b;
    --brutal-blue: #339af0;
    --brutal-green: #51cf66;
    --brutal-orange: #ff922b;
    --brutal-purple: #cc5de8;
    --brutal-teal: #20c997;
    --brutal-red: #e03131;
    --brutal-gray: #ced4da;
    --brutal-dark: #212529;
    --brutal-border: 3px solid #000;
    --brutal-shadow: 5px 5px 0 #000;
    --brutal-radius: 4px;
}

body {
    background-color: var(--brutal-bg);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--brutal-dark);
}

/* Cards */
.card {
    border: var(--brutal-border);
    border-radius: var(--brutal-radius);
    box-shadow: var(--brutal-shadow);
    margin-bottom: 1rem;
    background: var(--brutal-white);
}
.card-header {
    background-color: var(--brutal-yellow);
    border-bottom: 3px solid #000;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-radius: var(--brutal-radius) var(--brutal-radius) 0 0 !important;
}
.card-body {
    padding: 1.25rem;
}

/* Navigation */
.navbar {
    background-color: var(--brutal-black) !important;
    border-bottom: 4px solid var(--brutal-yellow);
}
.navbar-brand {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.navbar-dark .navbar-nav .nav-link {
    font-weight: 600;
    border: 2px solid transparent;
    margin: 0 2px;
    transition: none;
}
.navbar-dark .navbar-nav .nav-link:hover {
    border: 2px solid var(--brutal-yellow);
    color: var(--brutal-yellow) !important;
}

/* Buttons */
.btn {
    border: var(--brutal-border);
    border-radius: var(--brutal-radius);
    box-shadow: var(--brutal-shadow);
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    transition: none;
    text-transform: none;
}
.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #000;
}
.btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #000;
}
.btn-primary { background-color: var(--brutal-blue); color: #000; border-color: #000; }
.btn-primary:hover { background-color: #74c0fc; color: #000; }
.btn-success { background-color: var(--brutal-green); color: #000; }
.btn-success:hover { background-color: #8ce99a; color: #000; }
.btn-danger { background-color: var(--brutal-red); color: #fff; }
.btn-danger:hover { background-color: #ff6b6b; color: #fff; }
.btn-warning { background-color: var(--brutal-yellow); color: #000; }
.btn-warning:hover { background-color: #ffe066; color: #000; }
.btn-info { background-color: var(--brutal-teal); color: #000; }
.btn-info:hover { background-color: #63e6be; color: #000; }
.btn-secondary { background-color: var(--brutal-gray); color: #000; border-color: #000; }
.btn-secondary:hover { background-color: #dee2e6; color: #000; }
.btn-outline-primary { border: 3px solid #000; background: #fff; color: #000; }
.btn-outline-primary:hover { background: var(--brutal-blue); color: #000; }
.btn-outline-danger { border: 3px solid #000; background: #fff; color: #000; }
.btn-outline-danger:hover { background: var(--brutal-red); color: #fff; }
.btn-outline-secondary { border: 3px solid #000; background: #fff; color: #000; }
.btn-outline-secondary:hover { background: var(--brutal-gray); color: #000; }
.btn-outline-dark { border: 3px solid #000; background: #fff; color: #000; }
.btn-outline-dark:hover { background: var(--brutal-dark); color: #fff; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }
.btn-group .btn { box-shadow: none; }
.btn-group .btn:hover { box-shadow: none; transform: none; }

/* Badges */
.badge {
    border: 2px solid #000;
    border-radius: var(--brutal-radius);
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    box-shadow: 2px 2px 0 #000;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.badge.bg-success { background-color: var(--brutal-green) !important; color: #000; }
.badge.bg-danger { background-color: var(--brutal-red) !important; color: #fff; }
.badge.bg-warning { background-color: var(--brutal-orange) !important; color: #000; }
.badge.bg-info { background-color: var(--brutal-blue) !important; color: #000; }
.badge.bg-secondary { background-color: var(--brutal-gray) !important; color: #000; }
.badge.bg-primary { background-color: var(--brutal-blue) !important; color: #000; }

/* Tables */
.table {
    border: var(--brutal-border);
}
.table thead th {
    background-color: var(--brutal-yellow);
    border-bottom: 3px solid #000;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.75rem;
    color: #000;
}
.table td {
    padding: 0.75rem;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
}
.table-hover tbody tr:hover {
    background-color: #fff3bf;
}

/* Progress bars */
.progress {
    border: 2px solid #000;
    border-radius: var(--brutal-radius);
    background-color: var(--brutal-white);
    height: 1rem;
}
.progress-bar {
    border-radius: var(--brutal-radius);
    background-color: var(--brutal-blue);
    font-weight: 700;
    font-size: 0.7rem;
    color: #000;
}
.progress-bar.bg-success { background-color: var(--brutal-green) !important; }
.progress-bar.bg-warning { background-color: var(--brutal-orange) !important; }
.progress-bar.bg-danger { background-color: var(--brutal-red) !important; }

/* Forms */
.form-control, .form-select {
    border: var(--brutal-border);
    border-radius: var(--brutal-radius);
    box-shadow: 3px 3px 0 #000;
    padding: 0.5rem 0.75rem;
}
.form-control:focus, .form-select:focus {
    border-color: #000;
    box-shadow: 3px 3px 0 var(--brutal-blue);
    outline: none;
}

/* Alerts */
.alert {
    border: var(--brutal-border);
    border-radius: var(--brutal-radius);
    box-shadow: var(--brutal-shadow);
    font-weight: 500;
}
.alert-info { background-color: #d0ebff; border-color: #000; }
.alert-success { background-color: #d3f9d8; border-color: #000; }
.alert-danger { background-color: #ffe0e0; border-color: #000; }
.alert-warning { background-color: #fff3bf; border-color: #000; }

/* Footer */
footer.page-footer {
    background-color: var(--brutal-black) !important;
    border-top: 4px solid var(--brutal-yellow);
    color: #fff !important;
}

/* Breadcrumbs */
.breadcrumb {
    font-weight: 600;
}
.breadcrumb-item.active {
    font-weight: 800;
}

/* Links */
a {
    color: var(--brutal-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    font-weight: 600;
}
a:hover {
    color: var(--brutal-blue);
}

/* List groups */
.list-group-item {
    border: 2px solid #000;
    margin-bottom: -2px;
    padding: 0.75rem 1rem;
}
.list-group-item:first-child { border-radius: var(--brutal-radius) var(--brutal-radius) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--brutal-radius) var(--brutal-radius); }
.list-group-item.active {
    background-color: var(--brutal-blue);
    border-color: #000;
    color: #000;
    font-weight: 700;
}

/* Cards with colored borders / stat cards */
.card.border-primary { border-color: var(--brutal-blue) !important; }
.card.border-success { border-color: var(--brutal-green) !important; }
.card.border-danger { border-color: var(--brutal-red) !important; }
.card.border-warning { border-color: var(--brutal-orange) !important; }
.card.border-info { border-color: var(--brutal-teal) !important; }

/* Text colors */
.text-primary { color: var(--brutal-blue) !important; }
.text-success { color: var(--brutal-green) !important; }
.text-danger { color: var(--brutal-red) !important; }
.text-warning { color: var(--brutal-orange) !important; }
.text-info { color: var(--brutal-blue) !important; }
.bg-light { background-color: #e9ecef !important; }
.bg-dark { background-color: var(--brutal-dark) !important; }
.bg-primary { background-color: var(--brutal-blue) !important; }
.bg-success { background-color: var(--brutal-green) !important; }
.bg-danger { background-color: var(--brutal-red) !important; }
.bg-warning { background-color: var(--brutal-orange) !important; }
.bg-info { background-color: var(--brutal-blue) !important; }

/* Risk level badges */
.risk-critical {
    background-color: var(--brutal-red); color: #fff;
    border: 3px solid #000; box-shadow: 3px 3px 0 #000;
    padding: 0.25rem 0.75rem; font-weight: 800; text-transform: uppercase;
}
.risk-high {
    background-color: var(--brutal-orange); color: #000;
    border: 3px solid #000; box-shadow: 3px 3px 0 #000;
    padding: 0.25rem 0.75rem; font-weight: 800; text-transform: uppercase;
}
.risk-medium {
    background-color: var(--brutal-yellow); color: #000;
    border: 3px solid #000; box-shadow: 3px 3px 0 #000;
    padding: 0.25rem 0.75rem; font-weight: 800; text-transform: uppercase;
}
.risk-low {
    background-color: var(--brutal-green); color: #000;
    border: 3px solid #000; box-shadow: 3px 3px 0 #000;
    padding: 0.25rem 0.75rem; font-weight: 800; text-transform: uppercase;
}

/* Onboarding wizard steps */
.step-indicator .step {
    width: 36px; height: 36px;
    border: 3px solid #000;
    border-radius: var(--brutal-radius);
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--brutal-white);
    font-weight: 800;
    box-shadow: 3px 3px 0 #000;
}
.step-indicator .step.active { background-color: var(--brutal-blue); color: #000; }
.step-indicator .step.completed { background-color: var(--brutal-green); color: #000; }

/* Help banner */
.card.border-info { border: 3px solid var(--brutal-blue) !important; }

/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Dropdowns */
.dropdown-menu {
    border: var(--brutal-border);
    border-radius: var(--brutal-radius);
    box-shadow: var(--brutal-shadow);
    padding: 0.25rem;
}
.dropdown-item {
    font-weight: 600;
    border-radius: 2px;
}
.dropdown-item:hover {
    background-color: var(--brutal-yellow);
}

/* Pagination */
.pagination .page-link {
    border: var(--brutal-border);
    color: #000;
    font-weight: 700;
    padding: 0.5rem 0.85rem;
    box-shadow: 2px 2px 0 #000;
}
.pagination .page-item.active .page-link {
    background-color: var(--brutal-blue);
    border-color: #000;
    color: #000;
}

/* Modals */
.modal-content {
    border: var(--brutal-border);
    border-radius: var(--brutal-radius);
    box-shadow: 8px 8px 0 #000;
}
.modal-header {
    background-color: var(--brutal-yellow);
    border-bottom: 3px solid #000;
}

/* Small utility overrides */
.shadow { box-shadow: var(--brutal-shadow) !important; }
.shadow-sm { box-shadow: 3px 3px 0 #000 !important; }
.rounded { border-radius: var(--brutal-radius) !important; }
.rounded-4 { border-radius: var(--brutal-radius) !important; }
.border { border: var(--brutal-border) !important; }

/* Progress bar inside cards */
.card .progress {
    height: 12px !important;
}

/* Alert dismiss button */
.btn-close {
    filter: none;
    opacity: 1;
}

/* Evidence dropzone */
.evidence-dropzone {
    border: 3px dashed #000 !important;
    border-radius: var(--brutal-radius);
    padding: 2rem;
    text-align: center;
    background: var(--brutal-white);
}
.evidence-dropzone:hover { background-color: #e9ecef; }

/* Nav tabs */
.nav-tabs .nav-link {
    border: 2px solid #000;
    border-bottom: none;
    font-weight: 700;
    color: #000;
    background: var(--brutal-gray);
    margin-right: 2px;
}
.nav-tabs .nav-link.active {
    background: var(--brutal-white);
    border-bottom: 2px solid var(--brutal-white);
}

/* Page wrap for sticky footer */
.page-wrap {
    flex: 1 0 auto;
}

/* Badge inside btn groups */
.btn-group .badge {
    box-shadow: none;
}

/* Print styles */
@media print {
    .navbar, .btn, footer, nav { display: none !important; }
    .card { box-shadow: none !important; border: 2px solid #000 !important; }
    body { background: white; }
}