/** Custom global variables/document styles */

html[data-bs-theme="light"] {
    --aloha-color-header: #0D427E;
    --aloha-color-on-header: #F9FAFB;
    --aloha-color-on-sidebar: #F9FAFB;
    --aloha-color-screen: #E5E7EB;
    --aloha-color-sidebar: #0D427E;
    --aloha-color-surface: #F9FAFB;
    --bs-border-color: #4B5563;
}

html[data-bs-theme="dark"] {
    --aloha-color-header: #111827;
    --aloha-color-on-header: #F9FAFB;
    --aloha-color-on-sidebar: #F9FAFB;
    --aloha-color-screen: #1F2937;
    --aloha-color-sidebar: #111827;
    --aloha-color-surface: #111827;
    --bs-border-color: #A7ADB9;
}

html {
    --aloha-color-table-row: var(--aloha-color-surface);
    --aloha-size-lg: 1.5rem;
    --aloha-size-md: 1rem;
    --aloha-size-sm: 0.5rem;
    --aloha-table-row-border-radius: var(--bs-border-radius-lg);
}

body {
    background-color: var(--aloha-color-screen);
}

/** 
 * Additional Bootstrap overrides
 * These primarily serve to provide additional contrast using our surface color for form inputs/cards.
 */

.accordion-item {
    --bs-accordion-bg: var(--aloha-color-surface);
}

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-bg: var(--aloha-color-surface);
}

.form-select {
    background-color: var(--aloha-color-surface);
}

.form-control {
    background-color: var(--aloha-color-surface);
}

.form-control:disabled {
    opacity: 70%;
}

.form-select:disabled {
    opacity: 70%;
}

.list-group-item {
    --bs-list-group-bg: var(--aloha-color-surface);
}

/** 
 * Overrides for BlazorBootstrap (component library used in website)
 * View full sheet here: https://github.com/vikramlearning/blazorbootstrap/blob/main/blazorbootstrap/wwwroot/blazor.bootstrap.css
 * We are mostly overriding button property sizes, as well as appearance of tables. Most other things are left alone.
 */

.btn-sm {
    --bs-btn-padding-y: var(--aloha-size-sm);
    --bs-btn-padding-x: var(--aloha-size-md);
    --bs-btn-font-size: var(--aloha-size-md);
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-md {
    --bs-btn-padding-y: 0.675rem;
    --bs-btn-padding-x: 1.875rem;
    --bs-btn-font-size: var(--aloha-size-md);
    --bs-btn-border-radius: var(--bs-border-radius);
}

.btn-lg {
    --bs-btn-padding-y: var(--aloha-size-md);
    --bs-btn-padding-x: 2.5rem;
    --bs-btn-font-size: var(--aloha-size-md);
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.bb-table {
    padding: 0 var(--aloha-size-md);
    border-collapse: separate;
    border-spacing: 0 0.675rem;
}

.bb-table td {
    position: relative;
    padding: var(--aloha-size-md) 0;
    background-color: var(--aloha-color-table-row);
    border-right: 0 solid transparent;
    border-left: 0 solid transparent;
}

.bb-table th {
    border-right: 0 solid transparent;
    border-left: 0 solid transparent;
    padding: 0;
}

.bb-table td:first-child:before {
    background-color: var(--aloha-color-table-row);
    border-bottom-left-radius: var(--aloha-table-row-border-radius);
    border-top-left-radius: var(--aloha-table-row-border-radius);
    content: '';
    height: 100%;
    left: calc(var(--aloha-size-md) * -1);
    position: absolute;
    top: 0;
    width: var(--aloha-size-md);
}

.bb-table td:last-child:after {
    background-color: var(--aloha-color-table-row);
    border-bottom-right-radius: var(--aloha-table-row-border-radius);
    border-top-right-radius: var(--aloha-table-row-border-radius);
    content: '';
    height: 100%;
    position: absolute;
    right: calc(var(--aloha-size-md) * -1);
    top: 0;
    width: var(--aloha-size-md);
}