/* =========================================================
   ORDER OF THE ARROW — BOOTSTRAP THEME
   Requires OA_core.css to load first.
   Load this file AFTER Bootstrap's stylesheet.

   Brand palette is defined in OA_core.css:
   White       #FFFFFF
   Grey        #36454F
   Red         #E31837
   Dark Red    #640813
   Light Grey  #E6E7E8
   Black       #030006
   Blue        #005596
========================================================= */

/* =========================================================
   01. BOOTSTRAP COMPONENT TOKENS
========================================================= */
:root {
    /* Buttons */
    --btn-primary-bg: var(--oa-red);
    --btn-primary-bg-hover: var(--oa-dark-red);
    --btn-primary-text: var(--oa-white);
    --btn-secondary-bg: var(--oa-white);
    --btn-secondary-bg-hover: var(--oa-light-grey);
    --btn-secondary-text: var(--oa-grey);
    --btn-secondary-border: var(--border-subtle);
    --btn-danger-bg: var(--color-error-bg);
    --btn-danger-bg-hover: #F8D7DE;
    --btn-danger-text: var(--oa-dark-red);
    --btn-danger-border: var(--oa-red);

    /* Inputs */
    --input-bg: var(--oa-white);
    --input-bg-focus: var(--oa-white);
    --input-border: var(--border-strong);
    --input-border-focus: var(--oa-red);
    --input-text: var(--oa-black);
    --input-placeholder: var(--text-muted);

    /* Cards */
    --card-bg: var(--oa-white);
    --card-border: var(--border-subtle);
    --card-shadow: var(--shadow-sm);

    /* List groups */
    --list-bg: var(--oa-white);
    --list-hover-bg: var(--oa-light-grey);
    --list-active-bg: var(--oa-red);
    --list-active-text: var(--oa-white);

    /* Alerts */
    --alert-bg: var(--oa-white);
    --alert-border: var(--border-subtle);
    --alert-text: var(--oa-grey);
    --alert-warning-bg: var(--color-warning-bg);
    --alert-warning-border: var(--color-warning);
    --alert-warning-text: var(--oa-black);
    --alert-danger-bg: var(--color-error-bg);
    --alert-danger-border: var(--oa-red);
    --alert-danger-text: var(--oa-dark-red);

    /* Tables */
    --table-header-bg: var(--oa-light-grey);
    --table-row-hover: #F5F6F7;

    /* Pagination */
    --pagination-bg: var(--oa-white);
    --pagination-border: var(--border-subtle);
    --pagination-text: var(--oa-grey);
    --pagination-hover-border: var(--oa-red);
    --pagination-active-bg: var(--oa-red);
    --pagination-active-text: var(--oa-white);

    /* Dropdowns */
    --dropdown-bg: var(--oa-white);
    --dropdown-border: var(--border-subtle);
    --dropdown-hover-bg: var(--oa-light-grey);

    /* Modals */
    --modal-bg: var(--oa-white);
    --modal-border: var(--border-subtle);
}

/* =========================================================
   02. BASE LAYOUT
========================================================= */
body {
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-family-base);
}

.container {
    width: 100%;
    max-width: var(--container-width);
    padding-right: var(--space-md);
    padding-left: var(--space-md);
    margin-right: auto;
    margin-left: auto;
}

/* =========================================================
   03. CARDS
========================================================= */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    color: var(--oa-black);
}

.card-header,
.card-footer {
    background: var(--oa-light-grey);
    border-color: var(--card-border);
    color: var(--oa-grey);
}

.card-body {
    padding: var(--space-md);
}

/* =========================================================
   04. BUTTONS
========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    color: var(--oa-white);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--oa-dark-red);
    border-color: var(--oa-dark-red);
    color: var(--oa-white);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--btn-secondary-bg-hover);
    border-color: var(--oa-grey);
    color: var(--oa-black);
}

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

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--btn-danger-bg-hover);
    border-color: var(--oa-dark-red);
    color: var(--oa-dark-red);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

/* =========================================================
   05. FORMS
========================================================= */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    color: var(--input-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
}

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

.form-control::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.form-label {
    margin-bottom: var(--space-xs);
    color: var(--oa-grey);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--oa-light-grey);
    color: var(--oa-grey);
    opacity: 1;
    cursor: not-allowed;
}

/* =========================================================
   06. CHECKBOXES AND RADIO BUTTONS
========================================================= */
.form-check-input {
    background-color: var(--oa-white);
    border-color: var(--border-strong);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-check-input:checked {
    background-color: var(--oa-red);
    border-color: var(--oa-red);
}

.form-check-input:focus {
    border-color: var(--oa-red);
    box-shadow: var(--focus-ring);
}

.form-check-label {
    color: var(--oa-grey);
    font-size: var(--font-size-sm);
}

.form-check:hover .form-check-label {
    color: var(--oa-black);
}

/* =========================================================
   07. LIST GROUPS
========================================================= */
.list-group-item {
    background-color: var(--list-bg);
    border-color: var(--border-subtle);
    color: var(--oa-grey);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.list-group-item:hover {
    background-color: var(--list-hover-bg);
    color: var(--oa-black);
}

.list-group-item.active {
    background-color: var(--list-active-bg);
    border-color: var(--list-active-bg);
    color: var(--list-active-text);
}

/* =========================================================
   08. ALERTS
========================================================= */
.alert {
    background-color: var(--alert-bg);
    border: 1px solid var(--alert-border);
    border-radius: var(--radius-sm);
    color: var(--alert-text);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.alert a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================================
   09. TABLES
========================================================= */
.table {
    --bs-table-color: var(--oa-grey);
    --bs-table-bg: var(--oa-white);
    --bs-table-border-color: var(--border-subtle);
    --bs-table-hover-bg: var(--table-row-hover);
    --bs-table-hover-color: var(--oa-black);
    color: var(--oa-grey);
    border-color: var(--border-subtle);
}

.table thead th {
    background-color: var(--table-header-bg);
    color: var(--oa-black);
    border-color: var(--border-subtle);
}

.table tbody tr:hover > * {
    background-color: var(--table-row-hover);
    color: var(--oa-black);
}

/* =========================================================
   10. PAGINATION
========================================================= */
.pagination .page-link {
    background-color: var(--pagination-bg);
    border-color: var(--pagination-border);
    color: var(--pagination-text);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pagination .page-link:hover {
    background-color: var(--oa-light-grey);
    border-color: var(--pagination-hover-border);
    color: var(--oa-dark-red);
}

.pagination .page-link:focus-visible {
    box-shadow: var(--focus-ring);
}

.pagination .active .page-link,
.pagination .page-item.active .page-link {
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
    color: var(--pagination-active-text);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--oa-light-grey);
    border-color: var(--pagination-border);
    color: var(--text-muted);
}

/* =========================================================
   11. DROPDOWNS
========================================================= */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    color: var(--oa-grey);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-hover-bg);
    color: var(--oa-dark-red);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--oa-red);
    color: var(--oa-white);
}

/* =========================================================
   12. MODALS
========================================================= */
.modal-backdrop.show {
    background-color: var(--oa-black);
    opacity: 0.65;
}

.modal-dialog {
    max-width: 600px;
}

.modal-content {
    background-color: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--oa-black);
    overflow: hidden;
}

.modal-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
    color: var(--oa-grey);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--oa-grey);
}

.modal-header .close:hover,
.modal-header .close:focus {
    color: var(--oa-dark-red);
}

.modal-body {
    padding: var(--space-lg);
    color: var(--oa-grey);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

.modal-lg {
    max-width: 900px;
}

.modal-sm {
    max-width: 400px;
}

.modal.fade .modal-dialog {
    transform: translateY(20px);
    transition: transform var(--transition);
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

/* =========================================================
   13. UTILITIES
========================================================= */
.text-muted {
    color: var(--text-muted) !important;
}

.border {
    border-color: var(--border-subtle) !important;
}

/* =========================================================
   14. RESPONSIVE ADJUSTMENTS
========================================================= */
@media (max-width: 600px) {
    .card-body {
        padding: var(--space-sm);
    }

    .form-check-label {
        font-size: var(--font-size-xs);
    }

    .modal-body {
        padding: var(--space-md);
    }

    .modal-header,
    .modal-footer {
        padding: var(--space-md);
    }
}