/*
|--------------------------------------------------------------------------
| AlertHub Components
|--------------------------------------------------------------------------
|
| Shared interface components used throughout the application.
|
*/

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    min-height: 2.5rem;
    padding: 0.55rem 1rem;

    border-width: 1px;
    border-radius: var(--ah-radius-sm);

    font-family:
        "Open Sans",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;

    text-decoration: none;

    transition:
        background-color var(--ah-transition),
        border-color var(--ah-transition),
        color var(--ah-transition),
        box-shadow var(--ah-transition),
        transform var(--ah-transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible {
    box-shadow:
        0 0 0 0.25rem rgba(90, 120, 154, 0.28);
}

/*
|--------------------------------------------------------------------------
| Primary button
|--------------------------------------------------------------------------
*/

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ah-primary);
    --bs-btn-border-color: var(--ah-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ah-primary-hover);
    --bs-btn-hover-border-color: var(--ah-primary-hover);

    --bs-btn-focus-shadow-rgb: 90, 120, 154;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--bb-admiral-80);
    --bs-btn-active-border-color: var(--bb-admiral-80);

    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--bb-admiral-60);
    --bs-btn-disabled-border-color: var(--bb-admiral-60);
}

.btn-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ah-secondary);
    --bs-btn-border-color: var(--ah-secondary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ah-secondary-hover);
    --bs-btn-hover-border-color: var(--ah-secondary-hover);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--bb-slatestone-80);
    --bs-btn-active-border-color: var(--bb-slatestone-80);
}

.btn-warning {
    --bs-btn-color: var(--bb-admiral);
    --bs-btn-bg: var(--bb-regalia);
    --bs-btn-border-color: var(--bb-regalia);

    --bs-btn-hover-color: var(--bb-admiral);
    --bs-btn-hover-bg: var(--bb-regalia-80);
    --bs-btn-hover-border-color: var(--bb-regalia-80);

    --bs-btn-active-color: var(--bb-admiral);
    --bs-btn-active-bg: var(--bb-regalia-60);
    --bs-btn-active-border-color: var(--bb-regalia-60);
}

.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ah-danger);
    --bs-btn-border-color: var(--ah-danger);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #8f1c14;
    --bs-btn-hover-border-color: #8f1c14;
}

.btn-light {
    --bs-btn-color: var(--ah-primary);
    --bs-btn-bg: var(--bb-white);
    --bs-btn-border-color: var(--ah-border);

    --bs-btn-hover-color: var(--ah-primary);
    --bs-btn-hover-bg: var(--ah-surface-muted);
    --bs-btn-hover-border-color: var(--bb-slatestone-60);
}

.btn-outline-primary {
    --bs-btn-color: var(--ah-primary);
    --bs-btn-border-color: var(--ah-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ah-primary);
    --bs-btn-hover-border-color: var(--ah-primary);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--bb-admiral-80);
    --bs-btn-active-border-color: var(--bb-admiral-80);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--ah-secondary);
    color: var(--ah-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ah-secondary);
    border-color: var(--ah-secondary);
    color: var(--bb-white);
}

/*
|--------------------------------------------------------------------------
| Semantic buttons
|--------------------------------------------------------------------------
*/

.btn-success {
    background-color: var(--ah-success);
    border-color: var(--ah-success);
    color: var(--bb-white);
}

.btn-warning {
    background-color: var(--bb-regalia);
    border-color: var(--bb-regalia);
    color: var(--bb-admiral);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--bb-regalia-80);
    border-color: var(--bb-regalia-80);
    color: var(--bb-admiral);
}

.btn-danger {
    background-color: var(--ah-danger);
    border-color: var(--ah-danger);
    color: var(--bb-white);
}

.btn-sm {
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

.btn-lg {
    min-height: 3rem;
    padding: 0.7rem 1.35rem;
    font-size: 1rem;
}

/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/

.card {
    overflow: hidden;

    background-color: var(--ah-surface);
    border: 1px solid var(--ah-border-light);
    border-radius: var(--ah-radius-md);

    box-shadow: var(--ah-shadow-sm);

    transition:
        border-color var(--ah-transition),
        box-shadow var(--ah-transition),
        transform var(--ah-transition);
}

.card:hover {
    border-color: var(--bb-slatestone-40);
    box-shadow: var(--ah-shadow-md);
}

.card-header {
    padding: 1rem 1.25rem;

    background-color: var(--ah-surface);
    border-bottom: 1px solid var(--ah-border-light);

    color: var(--ah-primary);

    font-size: 1rem;
    font-weight: 700;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: 0.9rem 1.25rem;

    background-color: var(--ah-surface-muted);
    border-top: 1px solid var(--ah-border-light);
}

.card-title {
    margin-bottom: 0.75rem;

    color: var(--ah-primary);

    font-size: 1.1rem;
    font-weight: 700;
}

.card-subtitle {
    color: var(--ah-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Branded card header
|--------------------------------------------------------------------------
*/

.card-header-brand {
    position: relative;

    background-color: var(--ah-primary);
    border-bottom: 0;

    color: var(--bb-white);
}

.card-header-brand::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background-color: var(--bb-regalia);

    content: "";
}

.card-header.card-header-brand {
    position: relative;
    background-color: var(--ah-primary);
    border-bottom: 0;
    color: var(--bb-white);
}

.card-header.card-header-brand::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--bb-regalia);
    content: "";
}

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

.form-label {
    margin-bottom: 0.4rem;

    color: var(--ah-primary);

    font-size: 0.88rem;
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 2.65rem;
    padding: 0.55rem 0.75rem;

    background-color: var(--bb-white);
    border: 1px solid var(--ah-border);
    border-radius: var(--ah-radius-sm);

    color: var(--ah-text-secondary);

    font-size: 0.92rem;

    transition:
        border-color var(--ah-transition),
        box-shadow var(--ah-transition),
        background-color var(--ah-transition);
}

textarea.form-control {
    min-height: 7rem;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--bb-slatestone-60);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bb-white);
    border-color: var(--ah-secondary);

    box-shadow:
        0 0 0 0.22rem rgba(90, 120, 154, 0.2);

    color: var(--ah-text-secondary);
}

.form-control::placeholder {
    color: #8a94a1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ah-surface-muted);
    color: var(--ah-text-muted);
}

.form-text {
    color: var(--ah-text-muted);
    font-size: 0.8rem;
}

.form-check-input {
    border-color: var(--bb-slatestone-60);
}

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

.form-check-input:focus {
    border-color: var(--ah-secondary);

    box-shadow:
        0 0 0 0.22rem rgba(90, 120, 154, 0.2);
}

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

.table-responsive {
    overflow: hidden;

    background-color: var(--ah-surface);
    border: 1px solid var(--ah-border-light);
    border-radius: var(--ah-radius-md);

    box-shadow: var(--ah-shadow-sm);
}

.table {
    margin-bottom: 0;

    color: var(--ah-text-secondary);

    font-size: 0.9rem;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 0.9rem 1rem;

    background-color: transparent;
    border-bottom-color: var(--ah-border-light);
}

.table thead th {
    background-color: var(--bb-admiral);
    border-bottom: 0;

    color: var(--bb-white);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;

    white-space: nowrap;
}

.table tbody tr {
    transition: background-color var(--ah-transition);
}

.table tbody tr:hover {
    background-color: var(--bb-slatestone-20);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--bb-argent-20);
}

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

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    padding: 0.38rem 0.6rem;

    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.bg-primary {
    background-color: var(--ah-primary) !important;
}

.bg-secondary {
    background-color: var(--ah-secondary) !important;
}

.bg-warning {
    background-color: var(--bb-regalia) !important;
    color: var(--bb-admiral) !important;
}

.bg-light {
    background-color: var(--ah-surface-muted) !important;
    color: var(--ah-primary) !important;
}

/*
|--------------------------------------------------------------------------
| Alerts and messages
|--------------------------------------------------------------------------
*/

.alert {
    padding: 1rem 1.1rem;

    border-width: 1px;
    border-left-width: 4px;
    border-radius: var(--ah-radius-sm);

    font-size: 0.9rem;
}

.alert-primary {
    background-color: var(--bb-slatestone-20);
    border-color: var(--ah-secondary);
    color: var(--ah-primary);
}

.alert-success {
    background-color: #edf8f2;
    border-color: var(--ah-success);
    color: #145c3b;
}

.alert-warning {
    background-color: var(--bb-regalia-20);
    border-color: var(--bb-regalia);
    color: #644d12;
}

.alert-danger {
    background-color: #fff1f0;
    border-color: var(--ah-danger);
    color: #7a1d17;
}

.alert-info {
    background-color: var(--bb-slatestone-20);
    border-color: var(--bb-slatestone);
    color: var(--bb-admiral);
}

/*
|--------------------------------------------------------------------------
| Modal windows
|--------------------------------------------------------------------------
*/

.modal-content {
    border: 0;
    border-radius: var(--ah-radius-md);

    box-shadow: var(--ah-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--ah-border-light);
}

.modal-title {
    color: var(--ah-primary);
    font-weight: 700;
}

.modal-footer {
    background-color: var(--ah-surface-muted);
    border-top: 1px solid var(--ah-border-light);
}

/*
|--------------------------------------------------------------------------
| Dropdown menus
|--------------------------------------------------------------------------
*/

.dropdown-menu {
    padding: 0.4rem;

    border: 1px solid var(--ah-border-light);
    border-radius: var(--ah-radius-sm);

    box-shadow: var(--ah-shadow-md);
}

.dropdown-item {
    padding: 0.55rem 0.7rem;

    border-radius: 0.3rem;

    color: var(--ah-text-secondary);

    font-size: 0.88rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bb-slatestone-20);
    color: var(--ah-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ah-primary);
    color: var(--bb-white);
}

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

.pagination {
    gap: 0.25rem;
}

.page-link {
    min-width: 2.25rem;

    border-color: var(--ah-border);
    border-radius: var(--ah-radius-sm) !important;

    color: var(--ah-primary);

    text-align: center;
}

.page-link:hover {
    background-color: var(--bb-slatestone-20);
    border-color: var(--bb-slatestone-60);

    color: var(--ah-primary);
}

.page-item.active .page-link {
    background-color: var(--ah-primary);
    border-color: var(--ah-primary);

    color: var(--bb-white);
}

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

.breadcrumb {
    margin-bottom: 1rem;

    font-size: 0.84rem;
}

.breadcrumb-item a {
    color: var(--ah-secondary);
}

.breadcrumb-item.active {
    color: var(--ah-text-muted);
}

/*
|--------------------------------------------------------------------------
| Utility component classes
|--------------------------------------------------------------------------
*/

.ah-section {
    margin-bottom: 1.5rem;
}

.ah-section-title {
    margin-bottom: 1rem;

    color: var(--ah-primary);

    font-size: 1.15rem;
    font-weight: 700;
}

.ah-panel {
    padding: 1.25rem;

    background-color: var(--ah-surface);
    border: 1px solid var(--ah-border-light);
    border-radius: var(--ah-radius-md);

    box-shadow: var(--ah-shadow-sm);
}

.ah-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.6rem;
    height: 2.6rem;

    background-color: var(--bb-slatestone-20);
    border-radius: 50%;

    color: var(--ah-primary);

    font-size: 1.15rem;
}