@import "@fontsource-variable/work-sans";

@import "tailwindcss";

@plugin "@tailwindcss/forms";

@source "../dojo/templates/**/*.html";

@source "../dojo/static/dojo/js/**/*.js";

@theme {

/* Primary palette — Fuji Blue (DefectDojo brand) */

--color-dd-primary-50: #e8f3fb;

--color-dd-primary-100: #C6DDF2;

--color-dd-primary-200: #82B0D9;

--color-dd-primary-300: #5094CC;

--color-dd-primary-400: #2E87C6;

--color-dd-primary-500: #1779C5;

--color-dd-primary-600: #1467AD;

--color-dd-primary-700: #204D87;

--color-dd-primary-800: #0F3C6E;

--color-dd-primary-900: #003864;

/* Accent — Torii Orange (CTA highlights, badges) */

--color-dd-accent: #F2561D;

--color-dd-accent-light: #F2D49B;

--color-dd-accent-hover: #F2762E;

--color-dd-accent-dark: #C1230D;

/* Surface / neutral tokens — Dojo Black palette */

--color-surface: #ffffff;

--color-surface-2: #f7f8f9;

--color-surface-3: #f0f1f3;

--color-border: #DCDCDC;

--color-text: #191919;

--color-text-muted: #666666;

/* Severity colors */

--color-severity-critical: #dc2626;

--color-severity-high: #ea580c;

--color-severity-medium: #ca8a04;

--color-severity-low: #2563eb;

--color-severity-info: #6b7280;

/* Dashboard stat card accent colors */

--color-panel-blue: #1779C5;

--color-panel-green: #16a34a;

--color-panel-yellow: #ca8a04;

--color-panel-red: #dc2626;

/* Badge count */

--color-badge-count: #dc2626;

--color-badge-count-zero: #16a34a;

/* Font stack — Work Sans (DefectDojo brand) */

--font-sans: "Work Sans Variable", "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

@layer components {

/* ---- Buttons ---- */

.btn {

@apply inline-flex items-center justify-center gap-1.5 rounded-md px-3.5 py-2 text-sm font-medium

transition-all duration-150 cursor-pointer shadow-xs

hover:shadow-md hover:-translate-y-px

focus:outline-none focus:ring-2 focus:ring-offset-1

disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-xs;

min-height: 2.25rem; /* 36px — comfortable touch target */

}

.btn-primary {

@apply bg-dd-primary-500 text-white hover:bg-dd-primary-700 focus:ring-dd-primary-400;

}

.btn-default, .btn-secondary {

@apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 hover:border-gray-400 focus:ring-dd-primary-300;

}

.btn-success {

@apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-400;

}

.btn-danger {

@apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-400;

}

.btn-warning {

@apply bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-300;

}

.btn-info {

@apply bg-dd-primary-400 text-white hover:bg-dd-primary-500 focus:ring-dd-primary-300;

}

.btn-link {

@apply bg-transparent text-dd-primary-500 hover:text-dd-primary-700 hover:underline shadow-none p-0;

min-height: auto;

}

.btn-sm {

@apply px-2.5 py-1 text-xs;

min-height: 1.75rem; /* 28px */

}

.btn-xs {

@apply px-2 py-0.5 text-xs;

min-height: 1.5rem; /* 24px */

}

.btn-lg {

@apply px-5 py-2.5 text-base;

min-height: 2.75rem; /* 44px — full mobile touch target */

}

.btn-circle {

@apply rounded-full w-10 h-10 p-0 flex items-center justify-center;

}

.btn-group {

@apply inline-flex;

}

.btn-group > .btn {

@apply rounded-none first:rounded-l last:rounded-r;

}

/* Button group mobile: wrap + restore rounding + touch targets */

@media (max-width: 640px) {

.btn-group {

flex-wrap: wrap;

gap: 0.25rem;

}

.btn-group > .btn {

border-radius: 0.375rem;

}

.btn {

min-height: 2.5rem;

}

.btn-xs {

min-height: 2rem;

}

}

/* ---- Cards (panels) ---- */

.card, .panel, .panel-default {

@apply bg-surface rounded-lg border border-border shadow-sm transition-shadow duration-200;

}

.card-header, .panel-heading {

@apply px-5 py-3.5 border-b border-border bg-surface-2 font-semibold text-sm text-text rounded-t-lg;

}

.card-body, .panel-body {

@apply p-4;

}

.card-footer, .panel-footer {

@apply px-4 py-3 border-t border-border bg-surface-2 rounded-b-lg;

}

/* Colored panel headings — used on delete pages, reports, etc. */

.panel-primary > .panel-heading {

@apply bg-dd-primary-500 text-white border-dd-primary-500;

}

.panel-danger > .panel-heading {

@apply bg-panel-red text-white border-panel-red;

}

.panel-warning > .panel-heading {

@apply bg-amber-500 text-white border-amber-500;

}

.panel-success > .panel-heading {

@apply bg-panel-green text-white border-panel-green;

}

.panel-info > .panel-heading {

@apply bg-dd-primary-400 text-white border-dd-primary-400;

}

/* ---- Alerts ---- */

.alert {

@apply px-4 py-3 rounded-lg border mb-4 text-sm;

}

.alert-success {

@apply bg-green-50 border-green-200 text-green-800;

}

.alert-danger, .alert-error {

@apply bg-red-50 border-red-200 text-red-800;

}

.alert-warning {

@apply bg-yellow-50 border-yellow-200 text-yellow-800;

}

.alert-info {

@apply bg-blue-50 border-blue-200 text-blue-800;

}

.alert-dismissible {

@apply pr-10 relative;

}

.alert-dismissible > .close {

@apply absolute top-3 right-3 text-lg leading-none opacity-60 hover:opacity-100 cursor-pointer bg-transparent border-none;

}

/* ---- Typography ---- */

h1, .h1 {

@apply text-2xl font-semibold tracking-tight text-text;

}

h2, .h2 {

@apply text-xl font-semibold text-text;

}

h3, .h3 {

@apply text-lg font-medium text-text;

}

h4, .h4 {

@apply text-base font-medium text-text;

}

h5, .h5 {

@apply text-sm font-semibold text-text;

}

h6, .h6 {

@apply text-xs font-semibold uppercase tracking-wide text-text-muted;

}

.text-muted {

@apply text-text-muted;

}

small, .small {

@apply text-xs text-text-muted;

}

.lead {

@apply text-lg text-text-muted font-light;

}

/* ---- Inline code & code blocks ----

code {

@apply px-1.5 py-0.5 rounded bg-red-50 text-red-600 text-[0.85em];

font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,

Consolas, "Liberation Mono", "Courier New", monospace;

}

pre {

@apply block bg-surface-3 border border-border rounded-md

px-4 py-3 my-3 text-sm leading-relaxed overflow-x-auto;

font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,

Consolas, "Liberation Mono", "Courier New", monospace;

/* `<pre>` inside should stay raw; clear the inline-code styling so

}

pre code {

@apply p-0 bg-transparent text-inherit text-sm;

}

/* ---- Tables ---- */

.table {

@apply w-full text-sm text-left border-collapse;

}

.table th {

/* Title-case headers (no uppercase / letter-spacing) keep column widths

@apply px-3 py-2.5 bg-surface-2 font-semibold text-text-muted border-b-2 border-border

text-left text-xs sticky top-0 z-10;

}

.table td {

@apply px-3 py-2.5 border-b border-border/50;

/* Allow long values (e.g. URLs, finding titles) to wrap inside their

overflow-wrap: break-word;

}

.table tbody tr {

@apply transition-colors duration-100;

}

.table-striped tbody tr:nth-child(odd) {

@apply bg-surface-2/50;

}

.table-hover tbody tr:hover {

@apply bg-dd-primary-50/50;

}

.table-condensed th, .table-condensed td {

@apply px-2 py-1;

}

.table-responsive {

/* `overflow-x: scroll` keeps the horizontal scrollbar slot reserved at

overflow-x: scroll;

scrollbar-width: thin;

scrollbar-color: rgb(203 213 225) transparent;

}

.table-responsive::-webkit-scrollbar {

height: 10px;

width: 10px;

}

.table-responsive::-webkit-scrollbar-track {

background: transparent;

}

.table-responsive::-webkit-scrollbar-thumb {

background: rgb(203 213 225);

border-radius: 6px;

}

.table-responsive::-webkit-scrollbar-thumb:hover {

background: rgb(148 163 184);

}

/* Sort indicators for tablesorter-bootstrap (non-DataTables tables) */

.tablesorter-bootstrap thead th {

cursor: pointer;

position: relative;

padding-right: 1.5rem;

}

.tablesorter-bootstrap thead th::after {

content: "\2195"; /* ↕ up-down arrow */

position: absolute;

right: 0.5rem;

top: 50%;

transform: translateY(-50%);

opacity: 0.25;

font-size: 0.65rem;

}

.tablesorter-bootstrap thead th.tablesorter-headerAsc::after {

content: "\25B2"; /* ▲ */

opacity: 0.7;

color: var(--color-dd-primary-500);

}

.tablesorter-bootstrap thead th.tablesorter-headerDesc::after {

content: "\25BC"; /* ▼ */

opacity: 0.7;

color: var(--color-dd-primary-500);

}

/* Table + responsive mobile enhancements */

@media (max-width: 640px) {

.table th, .table td {

padding: 0.5rem;

font-size: 0.75rem;

}

.table th {

font-size: 0.65rem;

}

}

/* Visual fade hint at the right edge so users always see that there is

.table-responsive {

background:

linear-gradient(to right, white 30%, rgba(255,255,255,0)) left,

linear-gradient(to left, white 30%, rgba(255,255,255,0)) right;

background-size: 40px 100%;

background-repeat: no-repeat;

background-attachment: local, local;

}

/* ---- Forms ---- */

.form-group {

@apply mb-4;

}

.control-label {

@apply block text-sm font-medium text-slate-700 mb-1.5;

}

.form-control {

@apply block w-full rounded-md border-border shadow-xs text-sm

px-3 py-2 bg-white

transition-all duration-150

focus:border-dd-primary-500 focus:ring-2 focus:ring-dd-primary-200/40 focus:outline-none;

min-height: 2.5rem; /* 40px — consistent with button heights */

}

textarea.form-control {

@apply h-auto min-h-[5rem];

}

select.form-control {

@apply pr-8;

}

.help-block {

@apply text-xs text-slate-500 mt-1;

}

.has-error .form-control {

@apply border-red-500 focus:border-red-500 focus:ring-red-500/20;

}

.has-error .help-block {

@apply text-red-600;

}

.has-error .control-label {

@apply text-red-600;

}

/* Form section — a card wrapper for logical form grouping */

.form-section {

@apply bg-white rounded-lg border border-border p-5 mb-6;

}

.form-section-title {

@apply text-base font-semibold text-text mb-4 pb-2 border-b border-border;

}

.input-group {

@apply flex;

}

.input-group .form-control {

@apply rounded-r-none;

}

.input-group-btn {

@apply flex;

}

.input-group-btn .btn {

@apply rounded-l-none;

}

/* Read-only form display */

.form-control-static {

@apply py-2 px-0 text-sm text-text min-h-[2.5rem] flex items-center;

}

/* ---- Grid (Bootstrap compat) ---- */

.row {

@apply grid grid-cols-12 gap-4;

}

/* Children of .row without col-* class default to full width (BS3 compat) */

.row > :not([class*="col-"]) {

grid-column: 1 / -1;

}

/* -- Mobile defaults: sm/md/lg columns stack full-width below breakpoint -- */

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,

.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {

@apply col-span-12;

}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,

.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

@apply col-span-12;

}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,

.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {

@apply col-span-12;

}

/* -- xs: always applies (no breakpoint, like BS3) — AFTER defaults to win cascade -- */

.col-12, .col-xs-12 { @apply col-span-12; }

.col-xs-11 { @apply col-span-11; }

.col-xs-10 { @apply col-span-10; }

.col-xs-9 { @apply col-span-9; }

.col-xs-8 { @apply col-span-8; }

.col-xs-7 { @apply col-span-7; }

.col-xs-6 { @apply col-span-6; }

.col-xs-5 { @apply col-span-5; }

.col-xs-4 { @apply col-span-4; }

.col-xs-3 { @apply col-span-3; }

.col-xs-2 { @apply col-span-2; }

.col-xs-1 { @apply col-span-1; }

.col-xs-offset-1 { @apply col-start-2; }

.col-xs-offset-2 { @apply col-start-3; }

.col-xs-offset-3 { @apply col-start-4; }

.col-xs-offset-4 { @apply col-start-5; }

.col-xs-offset-5 { @apply col-start-6; }

.col-xs-offset-6 { @apply col-start-7; }

/* -- sm: ≥768px (Bootstrap 3 small breakpoint) -- */

@media (min-width: 768px) {

.col-sm-1 { @apply col-span-1; }

.col-sm-2 { @apply col-span-2; }

.col-sm-3 { @apply col-span-3; }

.col-sm-4 { @apply col-span-4; }

.col-sm-5 { @apply col-span-5; }

.col-sm-6 { @apply col-span-6; }

.col-sm-7 { @apply col-span-7; }

.col-sm-8 { @apply col-span-8; }

.col-sm-9 { @apply col-span-9; }

.col-sm-10 { @apply col-span-10; }

.col-sm-11 { @apply col-span-11; }

.col-sm-12 { @apply col-span-12; }

.col-sm-offset-1 { @apply col-start-2; }

.col-sm-offset-2 { @apply col-start-3; }

.col-sm-offset-3 { @apply col-start-4; }

.col-sm-offset-4 { @apply col-start-5; }

.col-sm-offset-5 { @apply col-start-6; }

.col-sm-offset-6 { @apply col-start-7; }

.col-sm-offset-10 { @apply col-start-11; }

}

/* -- md: ≥992px (Bootstrap 3 medium breakpoint) -- */

@media (min-width: 992px) {

.col-md-1 { @apply col-span-1; }

.col-md-2 { @apply col-span-2; }

.col-md-3 { @apply col-span-3; }

.col-md-4 { @apply col-span-4; }

.col-md-5 { @apply col-span-5; }

.col-md-6 { @apply col-span-6; }

.col-md-7 { @apply col-span-7; }

.col-md-8 { @apply col-span-8; }

.col-md-9 { @apply col-span-9; }

.col-md-10 { @apply col-span-10; }

.col-md-11 { @apply col-span-11; }

.col-md-12 { @apply col-span-12; }

.col-md-offset-1 { @apply col-start-2; }

.col-md-offset-2 { @apply col-start-3; }

.col-md-offset-3 { @apply col-start-4; }

.col-md-offset-4 { @apply col-start-5; }

.col-md-offset-5 { @apply col-start-6; }

.col-md-offset-6 { @apply col-start-7; }

.col-md-offset-10 { @apply col-start-11; }

}

/* -- lg: ≥1200px (Bootstrap 3 large breakpoint) -- */

@media (min-width: 1200px) {

.col-lg-1 { @apply col-span-1; }

.col-lg-2 { @apply col-span-2; }

.col-lg-3 { @apply col-span-3; }

.col-lg-4 { @apply col-span-4; }

.col-lg-5 { @apply col-span-5; }

.col-lg-6 { @apply col-span-6; }

.col-lg-7 { @apply col-span-7; }

.col-lg-8 { @apply col-span-8; }

.col-lg-9 { @apply col-span-9; }

.col-lg-10 { @apply col-span-10; }

.col-lg-11 { @apply col-span-11; }

.col-lg-12 { @apply col-span-12; }

.col-lg-offset-1 { @apply col-start-2; }

.col-lg-offset-2 { @apply col-start-3; }

.col-lg-offset-3 { @apply col-start-4; }

.col-lg-offset-4 { @apply col-start-5; }

.col-lg-offset-5 { @apply col-start-6; }

.col-lg-offset-6 { @apply col-start-7; }

.col-lg-offset-10 { @apply col-start-11; }

}

/* ---- Badges ---- */

.badge {

@apply inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs font-medium;

}

.badge-count {

@apply bg-badge-count text-white;

}

.badge-count0 {

@apply bg-badge-count-zero text-white;

}

.label {

@apply inline-flex items-center rounded px-2 py-0.5 text-xs font-medium;

}

.label-default {

@apply bg-gray-200 text-gray-700;

}

.label-primary {

@apply bg-dd-primary-500 text-white;

}

.label-success {

@apply bg-green-100 text-green-800;

}

.label-danger {

@apply bg-red-100 text-red-800;

}

.label-warning {

@apply bg-yellow-100 text-yellow-800;

}

.label-info {

@apply bg-blue-100 text-blue-800;

}

/* ---- Dropdowns (Alpine.js powered) ---- */

.dropdown {

@apply relative;

}

.dropdown-menu {

@apply absolute z-50 mt-1.5 min-w-52 rounded-lg bg-white border border-gray-200 shadow-lg py-1.5;

}

.dropdown-menu > li > a, .dropdown-menu > a {

@apply block px-4 py-2 text-sm text-gray-700 hover:bg-dd-primary-50 hover:text-dd-primary-700

transition-colors duration-100;

}

.dropdown-menu .divider, .dropdown-menu > li.divider {

@apply border-t border-gray-200 my-1;

}

/* ---- Navs / Tabs ---- */

.nav {

@apply list-none p-0 m-0;

}

.nav-tabs {

@apply flex border-b border-gray-200 gap-0 overflow-x-auto;

-webkit-overflow-scrolling: touch;

scrollbar-width: none;

}

.nav-tabs::-webkit-scrollbar {

display: none;

}

/* The horizontal-bar variant (product / engagement / test tab strips)

.nav-tabs.horizontal-bar {

@apply flex-wrap;

overflow: visible;

}

.nav-tabs > li {

@apply -mb-px flex-shrink-0;

}

.nav-tabs > li > a {

@apply block px-4 py-2.5 text-sm text-gray-500 hover:text-gray-700 border-b-2 border-transparent

hover:border-gray-300 no-underline transition-colors duration-150;

}

.nav-tabs > li.active > a, .nav-tabs > li > a.active {

@apply text-dd-primary-600 border-dd-primary-500 font-semibold;

}

.tab-content > .tab-pane {

@apply hidden;

}

.tab-content > .tab-pane.active {

@apply block;

}

/* ---- Breadcrumbs ---- */

.breadcrumb {

@apply flex flex-wrap items-center gap-0.5 text-sm text-slate-500 py-2 px-0 mb-4 list-none bg-transparent;

}

.breadcrumb > li a {

@apply text-text-muted hover:text-dd-primary-600 transition-colors duration-150;

}

.breadcrumb > li + li::before {

content: "\203A"; /* › single right-pointing angle quotation mark */

@apply px-1.5 text-slate-300 text-base;

}

.breadcrumb > li.active > a,

.breadcrumb > li:last-child > a {

@apply text-slate-900 font-semibold no-underline cursor-default;

}

/* ---- Modals (using <dialog>) ---- */

.modal, dialog.modal {

@apply fixed inset-0 z-50 m-auto p-0 rounded-lg shadow-xl border-0

w-[calc(100%-2rem)] max-w-lg bg-white;

}

dialog.modal::backdrop {

@apply bg-black/50;

}

.modal-header {

@apply flex items-center justify-between px-5 py-4 border-b border-gray-200;

}

.modal-title {

@apply text-lg font-semibold;

}

.modal-body {

@apply px-5 py-4;

}

.modal-footer {

@apply flex items-center justify-end gap-2 px-5 py-4 border-t border-gray-200;

}

/* Modal mobile padding */

@media (max-width: 640px) {

.modal-header, .modal-body, .modal-footer {

padding-left: 0.75rem;

padding-right: 0.75rem;

}

}

/* ---- Well ---- */

.well {

@apply rounded-md bg-gray-100 p-4 border border-gray-200;

}

/* ---- Tooltips (Alpine hover) ---- */

.has-popover {

@apply relative cursor-help;

}

/* ---- Severity tag colors ---- */

.tag-label {

@apply inline-flex items-center rounded px-2 py-0.5 text-xs font-bold text-white;

}

/* ---- Pagination ---- */

.pagination {

@apply flex items-center gap-0 list-none p-0 m-0;

}

.pagination > li > a {

@apply block px-3 py-1.5 text-sm text-gray-600 border border-gray-200 -ml-px

hover:bg-dd-primary-50 hover:text-dd-primary-700 no-underline transition-colors duration-100;

}

.pagination > li:first-child > a {

@apply rounded-l-md ml-0;

}

.pagination > li:last-child > a {

@apply rounded-r-md;

}

.pagination > li.active > a {

@apply bg-dd-primary-500 text-white border-dd-primary-500 z-10;

}

.pagination-sm > li > a {

@apply px-2 py-1 text-xs;

}

/* Pagination mobile: smaller, centered, stacked floats */

@media (max-width: 640px) {

.pagination {

flex-wrap: wrap;

justify-content: center;

gap: 0;

margin: 0.5rem 0;

}

.pagination > li > a {

padding: 0.25rem 0.5rem;

font-size: 0.75rem;

}

.clearfix > .pull-left,

.clearfix > .pull-right {

float: none;

display: block;

text-align: center;

}

}

/* ---- Progress bars ---- */

.progress {

@apply h-5 overflow-hidden rounded bg-gray-200;

}

.progress-bar {

@apply h-full flex items-center justify-center text-xs font-semibold text-white transition-all duration-500;

}

.progress-bar-success { @apply bg-green-500; }

.progress-bar-warning { @apply bg-yellow-500; }

.progress-bar-danger { @apply bg-red-500; }

.progress-bar-info { @apply bg-blue-500; }

/* ---- List groups ---- */

.list-group {

@apply list-none p-0 m-0 rounded-lg border border-gray-200;

}

.list-group-item {

@apply block px-4 py-3 border-b border-gray-200 last:border-b-0 first:rounded-t-lg last:rounded-b-lg

transition-colors duration-100;

}

.list-group-item:hover {

@apply bg-dd-primary-50;

}

.list-group-item.active {

@apply bg-dd-primary-500 text-white border-dd-primary-500;

}

/* ---- Inline forms ---- */

.form-inline {

@apply flex flex-wrap items-end gap-2;

}

.form-inline .form-group {

@apply mb-0;

}

.form-inline .form-control {

@apply w-auto inline-block;

}

/* ---- Button variants ---- */

.btn-outline-secondary {

@apply bg-transparent text-gray-600 border border-gray-300 hover:bg-gray-100 hover:text-gray-800

focus:ring-gray-300;

}

.btn-outline-primary {

@apply bg-transparent text-dd-primary-500 border border-dd-primary-500

hover:bg-dd-primary-500 hover:text-white focus:ring-dd-primary-400;

}

/* ---- Bootstrap utility compat ---- */

.d-flex { @apply flex; }

.d-inline-flex { @apply inline-flex; }

.d-block { @apply block; }

.d-inline-block { @apply inline-block; }

.d-none { @apply hidden; }

.justify-content-end { @apply justify-end; }

.justify-content-center { @apply justify-center; }

.justify-content-between { @apply justify-between; }

.justify-content-start { @apply justify-start; }

.align-items-center { @apply items-center; }

.align-items-start { @apply items-start; }

.align-items-end { @apply items-end; }

.flex-wrap { @apply flex-wrap; }

.gap-1 { @apply gap-1; }

.gap-2 { @apply gap-2; }

.gap-3 { @apply gap-3; }

.me-1 { @apply mr-1; }

.me-2 { @apply mr-2; }

.me-3 { @apply mr-3; }

.ms-1 { @apply ml-1; }

.ms-2 { @apply ml-2; }

.ms-auto { @apply ml-auto; }

.mb-0 { @apply mb-0; }

.mb-1 { @apply mb-1; }

.mb-2 { @apply mb-2; }

.mb-3 { @apply mb-3; }

.mb-4 { @apply mb-4; }

.mt-1 { @apply mt-1; }

.mt-2 { @apply mt-2; }

.mt-3 { @apply mt-3; }

.mt-4 { @apply mt-4; }

.p-0 { @apply p-0; }

.p-2 { @apply p-2; }

.p-3 { @apply p-3; }

.p-4 { @apply p-4; }

.w-100 { @apply w-full; }

.w-auto { @apply w-auto; }

/* ---- Form label (Bootstrap 5 compat) ---- */

.form-label {

@apply block text-sm font-medium text-text mb-1;

}

/* ---- Filter UI components ---- */

.has-filters {

@apply flex justify-between items-center;

}

.panel-heading.tight, .card-header.tight {

@apply px-3 py-1.5;

}

.filter-set {

@apply block;

}

.is-filters {

@apply bg-surface-2 border-t border-border;

}

.toggle-filters {

@apply transition-transform duration-200;

}

.toggle-filters .caret,

.toggle-filters .fa-caret-down {

@apply transition-transform duration-200;

}

.dropup .caret,

.dropup .fa-caret-down {

transform: rotate(180deg);

}

/* ---- Disabled state for anchor buttons ---- */

a.disabled, .btn.disabled {

@apply opacity-50 cursor-not-allowed;

pointer-events: none;

}

/* ---- Misc Bootstrap compat ---- */

.text-muted { @apply text-text-muted; }

.text-danger { @apply text-red-600; }

.text-success { @apply text-green-600; }

.text-warning { @apply text-yellow-600; }

.text-info { @apply text-blue-600; }

.text-primary { @apply text-dd-primary-500; }

.text-center { @apply text-center; }

.text-right { @apply text-right; }

.text-left { @apply text-left; }

.pull-left { @apply float-left; }

.pull-right { @apply float-right; }

.clearfix { @apply after:content-[''] after:table after:clear-both; }

.hidden-xs { @apply max-sm:hidden; }

.hidden { @apply hidden; }

.no-margin-top { @apply mt-0; }

.container-fluid { @apply w-full px-4; }

.close {

@apply text-xl leading-none opacity-60 hover:opacity-100 cursor-pointer bg-transparent border-none float-right;

}

.caret {

@apply inline-block w-0 h-0 ml-0.5 align-middle

border-t-4 border-t-current border-x-4 border-x-transparent;

}

.glyphicon.arrow {

@apply inline-block w-0 h-0 ml-1 align-middle

border-t-4 border-t-current border-x-4 border-x-transparent;

}

/* ---- Dashboard stat cards ---- */

.stat-card {

@apply bg-surface rounded-lg border border-border shadow-sm

transition-all duration-200 hover:shadow-md

overflow-hidden border-l-4;

}

.stat-card .stat-card-body {

@apply flex items-center gap-4 px-5 py-4;

}

.stat-card .stat-card-icon {

@apply flex items-center justify-center w-12 h-12 rounded-full text-lg shrink-0;

}

.stat-card .stat-card-content {

@apply flex flex-col min-w-0;

}

.stat-card .stat-card-value {

@apply text-3xl font-bold text-text leading-none;

}

.stat-card .stat-card-label {

/* Allow long labels (e.g. "Risk Accepted In Last Seven Days") to wrap

@apply text-sm text-text-muted mt-1 leading-tight;

}

.stat-card .stat-card-link {

@apply flex items-center justify-between px-5 py-2.5 text-sm

bg-surface-2 border-t border-border text-text-muted

hover:text-dd-primary-500 hover:bg-surface-3 transition-colors;

}

/* Stat card color variants */

.stat-card--blue {

@apply border-l-panel-blue;

}

.stat-card--blue .stat-card-icon {

@apply bg-blue-50 text-panel-blue;

}

.stat-card--red {

@apply border-l-panel-red;

}

.stat-card--red .stat-card-icon {

@apply bg-red-50 text-panel-red;

}

.stat-card--green {

@apply border-l-panel-green;

}

.stat-card--green .stat-card-icon {

@apply bg-green-50 text-panel-green;

}

.stat-card--yellow {

@apply border-l-panel-yellow;

}

.stat-card--yellow .stat-card-icon {

@apply bg-yellow-50 text-panel-yellow;

}

.huge {

@apply text-4xl font-bold;

}

/* ---- Announcement banner ---- */

.announcement-banner {

@apply rounded-none mb-0;

}

/* ---- Skeletons (loading placeholders) ---- */

.skeleton {

@apply animate-pulse bg-slate-200 rounded;

}

.skeleton-text {

@apply animate-pulse bg-slate-200 rounded h-4 w-3/4;

}

.skeleton-text-sm {

@apply animate-pulse bg-slate-200 rounded h-3 w-1/2;

}

.skeleton-circle {

@apply animate-pulse bg-slate-200 rounded-full;

}

.skeleton-row {

@apply flex gap-3 items-center;

}

.skeleton-row .skeleton-cell {

@apply animate-pulse bg-slate-200 rounded h-8 flex-1;

}

/* ---- Empty states ---- */

.empty-state {

@apply flex flex-col items-center justify-center py-12 px-6 text-center;

}

.empty-state-icon {

@apply text-4xl text-slate-300 mb-4;

}

.empty-state h3 {

@apply text-lg font-semibold text-slate-700 mb-2;

}

.empty-state p {

@apply text-sm text-slate-500 max-w-md mb-4;

}

/* ---- Page transitions ---- */

.app-content {

animation: fadeSlideIn 200ms ease-out;

}

@keyframes fadeSlideIn {

from { opacity: 0; transform: translateY(4px); }

to { opacity: 1; transform: translateY(0); }

}

/* htmx swap transitions */

.htmx-swapping {

opacity: 0;

transition: opacity 150ms ease-out;

}

.htmx-settling {

opacity: 1;

transition: opacity 150ms ease-in;

}

/* htmx loading indicator */

.htmx-indicator {

display: none;

}

.htmx-request .htmx-indicator,

.htmx-request.htmx-indicator {

display: inline-block;

}

/* ---- Micro-interactions ---- */

/* Card hover lift */

.card {

@apply transition-shadow duration-200;

}

.card:hover {

@apply shadow-md;

}

/* Alert dismiss animation */

.alert {

@apply transition-all duration-300;

}

.alert.fade-out {

opacity: 0;

transform: translateY(-0.5rem);

max-height: 0;

margin: 0;

padding-top: 0;

padding-bottom: 0;

overflow: hidden;

}

/* ============================================================

/* Typography: scale down headings + stat values on mobile */

@media (max-width: 640px) {