:root {
    /* Sampled from the Mission Unity logo; darkened variants keep text readable. */
    --brand-blue: #0118db;
    --brand-blue-dark: #00109b;
    --brand-blue-hover: #000d80;
    --brand-blue-rgb: 0, 16, 155;
    --brand-green: #09c43b;
    --brand-red: #f20c1c;
    --brand-danger: #c81020;
    --brand-surface: #f3f6ff;
    --brand-border: #dce5ff;
    --brand-text: #17265b;
    --brand-primary: var(--brand-blue-dark);
    --brand-primary-hover: var(--brand-blue-hover);
}

body {
    background-color: var(--brand-surface);
    color: var(--brand-text);
}

.auth-page {
    background: linear-gradient(135deg, #f7f9ff, #eaf0ff);
}

.header-area,
.full-width-content .header-area {
    background-color: var(--brand-surface) !important;
    border-bottom-color: var(--brand-border) !important;
}

.top-info-header {
    background-color: #eaf0ff !important;
    border-bottom-color: var(--brand-border) !important;
}

.navigation-bar,
.horizontal-nav,
.header-area .horizontal-menu-item .dropdown-menu {
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)) !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.bg-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

.form-control:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-blue-rgb), 0.2) !important;
}

.header-area .horizontal-menu-item.active .horizontal-menu-link {
    box-shadow: inset 0 -3px 0 var(--brand-green) !important;
}

.btn-success {
    background-color: #00812b !important;
    border-color: #00812b !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #006f25 !important;
    border-color: #006f25 !important;
}

/* Status and destructive controls retain the red from the logo. */
.btn-danger,
.badge-danger {
    background-color: var(--brand-danger) !important;
    border-color: var(--brand-danger) !important;
    color: #fff !important;
}

.alert-danger {
    border-color: var(--brand-danger) !important;
}

.brand-accent {
    color: var(--brand-green);
}

.modal-content {
    border-radius: 16px !important;
    overflow: hidden;
    border: 0 !important;
}

.modal-header {
    border-radius: 0 !important;
}

.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 4px 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: var(--brand-text);
    padding-left: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-blue-rgb), 0.2) !important;
}

.select2-dropdown {
    border-color: #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-blue) !important;
}

.swal2-popup {
    border-radius: 16px !important;
    font-family: Montserrat, sans-serif !important;
    padding: 1.75rem 1.5rem !important;
}

.swal2-title {
    color: var(--brand-text) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    color: #64748b !important;
    font-size: 0.9rem !important;
}

.swal2-icon {
    border-width: 3px !important;
}

.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.swal2-icon.swal2-error {
    border-color: var(--brand-danger) !important;
    color: var(--brand-danger) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--brand-green) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(9, 196, 59, 0.3) !important;
}

.swal2-styled.swal2-confirm {
    border-radius: 8px !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-cancel {
    border-radius: 8px !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    background-color: #64748b !important;
    box-shadow: none !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-blue-rgb), 0.2) !important;
}

/* DataTables renders its own <td>/<th> markup client-side, so Tailwind classes
   written on the empty <tbody> in Blade never reach the generated rows. This
   gives every DataTables-driven table the same spacious look as the
   hand-styled Tailwind tables elsewhere in the app. */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

table.dataTable thead th,
table.dataTable thead td {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.65rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle;
}

table.dataTable tbody td {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem;
    color: #1e293b;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle;
}

table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

table.dataTable tbody tr:hover td {
    background-color: #f8fafc;
}

/* Tailwind ships without preflight in this app (Bootstrap already resets
   .btn), so any plain <button> written with only tw: utility classes keeps
   the browser's native chrome (an outset border + focus ring) unless every
   single one remembers tw:border-0/tw:outline-none. Reset it once, globally,
   for any button that isn't a Bootstrap .btn (which already gets its own
   `border: 1px solid transparent` from bootstrap.css) so hand-styled
   Tailwind buttons never show native borders by omission.
   IMPORTANT: do NOT set `background` here — `button:not(.btn)` (a type
   selector + :not()) is MORE specific than a bare Tailwind utility class
   like `.tw:bg-white`, so a `background: none` here silently wins over any
   tw:bg-* class on every plain <button> in the app and makes it look
   transparent regardless of what utility classes it carries. Border and
   appearance are safe to force because no tw: utility here sets those for
   buttons that already declare tw:border-0 explicitly. */
button:not(.btn) {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    font: inherit;
    color: inherit;
}

button:not(.btn):focus,
button:not(.btn):focus-visible {
    outline: none;
}