/*
Pages Common Styling - Design System Overhaul (SPEC-026)
Applies design tokens to all Bootstrap/common page elements
*/

/* ============================================================================
   PAGE TRANSITIONS
   Triggered via JS by adding/removing .page-entering on article or .user-page
   on every Blazor enhanced navigation (enhancedload).
   ============================================================================ */

.page-entering {
    animation: page-enter var(--duration-normal) var(--ease-out) both;
}

.user-page.page-entering {
    animation: page-enter var(--duration-normal) var(--ease-out) both;
}

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */

/* Container styling */
.container,
.container-fluid {
    font-family: var(--font-body);
    color: hsl(var(--c-text));
}

/* Page titles */
.container h1,
.container-fluid h1 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    color: hsl(var(--c-text));
    margin-bottom: var(--space-2);
}

.container h2,
.container-fluid h2 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--c-text));
}

.container h3,
.container-fluid h3,
.container h4,
.container-fluid h4,
.container h5,
.container-fluid h5,
.container h6,
.container-fluid h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--c-text));
}

/* Text utilities */
.text-muted {
    color: hsl(var(--c-text-muted)) !important;
}

.text-secondary {
    color: hsl(var(--c-text-subtle)) !important;
}

.text-primary {
    color: hsl(var(--c-primary)) !important;
}

.text-success {
    color: hsl(var(--c-success)) !important;
}

.text-danger {
    color: hsl(var(--c-danger)) !important;
}

.text-warning {
    color: hsl(var(--c-warning)) !important;
}

.text-info {
    color: hsl(var(--c-info)) !important;
}

/* ============================================================================
   CARD COMPONENTS
   ============================================================================ */

.card {
    background: hsl(var(--card-bg));
    border: 1px solid hsl(var(--card-border));
    border-radius: var(--card-border-radius);
    transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.card:hover {
    border-color: hsl(var(--c-border-strong));
}

.card-header {
    background: hsl(var(--c-surface-2) / 0.5);
    border-bottom: 1px solid hsl(var(--c-border));
    padding: var(--space-4) var(--space-5);
}

.card-header h5,
.card-header .card-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: hsl(var(--c-text));
    margin: 0;
}

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

.card-footer {
    background: hsl(var(--c-surface-2) / 0.3);
    border-top: 1px solid hsl(var(--c-border));
    padding: var(--space-4) var(--space-5);
}

/* ============================================================================
   TABLE COMPONENTS
   ============================================================================ */

.table {
    color: hsl(var(--c-text));
    font-family: var(--font-body);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: hsl(var(--c-surface-2) / 0.3);
    --bs-table-hover-bg: hsl(var(--c-surface-2) / 0.5);
    border-color: hsl(var(--c-border));
}

.table thead th {
    background: hsl(var(--c-surface-2) / 0.5);
    border-bottom: 1px solid hsl(var(--c-border));
    color: hsl(var(--c-text-muted));
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-4);
}

.table tbody td {
    border-bottom: 1px solid hsl(var(--c-border) / 0.5);
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: hsl(var(--c-surface-2) / 0.3);
}

.table-responsive {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ============================================================================
   FORM COMPONENTS
   ============================================================================ */

.form-label {
    color: hsl(var(--c-text));
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}

.form-control,
.form-select {
    background: hsl(var(--input-bg));
    border: 1px solid hsl(var(--input-border));
    border-radius: var(--input-border-radius);
    color: hsl(var(--c-text));
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.form-control:focus,
.form-select:focus {
    border-color: hsl(var(--input-border-focus));
    box-shadow: 0 0 0 3px hsl(var(--input-glow) / 0.4);
    outline: none;
    background: hsl(var(--input-bg));
    color: hsl(var(--c-text));
}

.form-control::placeholder {
    color: hsl(var(--c-text-muted));
}

.form-text {
    color: hsl(var(--c-text-subtle));
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    background: hsl(var(--input-bg));
    border: 1px solid hsl(var(--input-border));
    border-radius: var(--radius-sm);
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 3px hsl(var(--input-glow) / 0.4);
    border-color: hsl(var(--input-border-focus));
}

.form-check-label {
    color: hsl(var(--c-text));
    font-size: var(--font-size-sm);
}

/* Validation states */
.is-invalid {
    border-color: hsl(var(--c-danger)) !important;
}

.is-invalid:focus {
    box-shadow: 0 0 0 3px hsl(var(--c-danger) / 0.3) !important;
}

.invalid-feedback {
    color: hsl(var(--c-danger));
    font-size: var(--font-size-xs);
}

.is-valid {
    border-color: hsl(var(--c-success)) !important;
}

.is-valid:focus {
    box-shadow: 0 0 0 3px hsl(var(--c-success) / 0.3) !important;
}

.valid-feedback {
    color: hsl(var(--c-success));
    font-size: var(--font-size-xs);
}

/* ============================================================================
   BUTTON COMPONENTS
   ============================================================================ */

.btn {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    border-radius: var(--btn-border-radius);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--font-size-sm);
    transition: all 150ms ease-out;
}

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

.btn-primary:hover {
    background: hsl(var(--btn-bg-hover));
    border-color: hsl(var(--btn-bg-hover));
    color: hsl(var(--btn-text));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:focus-visible {
    outline: 2px solid hsl(var(--c-primary));
    outline-offset: 2px;
}

.btn-secondary {
    background: hsl(var(--c-surface-2));
    border-color: hsl(var(--c-border));
    color: hsl(var(--c-text));
}

.btn-secondary:hover {
    background: hsl(var(--c-surface-3));
    border-color: hsl(var(--c-border-strong));
    color: hsl(var(--c-text));
}

.btn-outline-primary {
    color: hsl(var(--c-primary));
    border-color: hsl(var(--c-primary));
    background: transparent;
}

.btn-outline-primary:hover {
    background: hsl(var(--c-primary));
    border-color: hsl(var(--c-primary));
    color: hsl(var(--c-primary-contrast));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-secondary {
    color: hsl(var(--c-text-muted));
    border-color: hsl(var(--c-border));
    background: transparent;
}

.btn-outline-secondary:hover {
    background: hsl(var(--c-surface-2));
    border-color: hsl(var(--c-border-strong));
    color: hsl(var(--c-text));
}

.btn-outline-danger {
    color: hsl(var(--c-danger));
    border-color: hsl(var(--c-danger) / 0.5);
    background: transparent;
}

.btn-outline-danger:hover {
    background: hsl(var(--c-danger) / 0.1);
    border-color: hsl(var(--c-danger));
    color: hsl(var(--c-danger));
}

.btn-outline-info {
    color: hsl(var(--c-info));
    border-color: hsl(var(--c-info) / 0.5);
    background: transparent;
}

.btn-outline-info:hover {
    background: hsl(var(--c-info));
    border-color: hsl(var(--c-info));
    color: hsl(var(--c-text-inverse));
}

.btn-danger {
    background: hsl(var(--c-danger));
    border-color: hsl(var(--c-danger));
    color: hsl(var(--c-text-inverse));
}

.btn-danger:hover {
    background: hsl(var(--c-danger) / 0.9);
    border-color: hsl(var(--c-danger) / 0.9);
    color: hsl(var(--c-text-inverse));
}

.btn-success {
    background: hsl(var(--c-success));
    border-color: hsl(var(--c-success));
    color: hsl(var(--c-text-inverse));
}

.btn-success:hover {
    background: hsl(var(--c-success) / 0.9);
    border-color: hsl(var(--c-success) / 0.9);
    color: hsl(var(--c-text-inverse));
}

.btn-link {
    color: hsl(var(--c-primary));
    text-decoration: none;
}

.btn-link:hover {
    color: hsl(var(--c-primary-hover));
    text-decoration: underline;
}

/* Button sizes */
.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
}

/* ============================================================================
   BADGE COMPONENTS
   ============================================================================ */

.badge {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.badge.bg-primary {
    background: hsl(var(--c-primary)) !important;
    color: hsl(var(--c-primary-contrast));
}

.badge.bg-secondary {
    background: hsl(var(--c-surface-3)) !important;
    color: hsl(var(--c-text-muted));
}

.badge.bg-success {
    background: hsl(var(--c-success)) !important;
    color: hsl(var(--c-text-inverse));
}

.badge.bg-danger {
    background: hsl(var(--c-danger)) !important;
    color: hsl(var(--c-text-inverse));
}

.badge.bg-warning {
    background: hsl(var(--c-warning)) !important;
    color: hsl(220 15% 10%);
}

.badge.bg-info {
    background: hsl(var(--c-info)) !important;
    color: hsl(var(--c-text-inverse));
}

/* ============================================================================
   ALERT COMPONENTS
   ============================================================================ */

.alert {
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    border-width: 1px;
    animation: alert-enter var(--duration-normal) var(--ease-out) both;
}

.alert-primary {
    background: hsl(var(--c-primary) / 0.1);
    border-color: hsl(var(--c-primary) / 0.3);
    color: hsl(var(--c-primary));
}

.alert-success {
    background: hsl(var(--c-success) / 0.1);
    border-color: hsl(var(--c-success) / 0.3);
    color: hsl(var(--c-success));
}

.alert-danger {
    background: hsl(var(--c-danger) / 0.1);
    border-color: hsl(var(--c-danger) / 0.3);
    color: hsl(var(--c-danger));
}

.alert-warning {
    background: hsl(var(--c-warning) / 0.1);
    border-color: hsl(var(--c-warning) / 0.3);
    color: hsl(var(--c-warning));
}

.alert-info {
    background: hsl(var(--c-info) / 0.1);
    border-color: hsl(var(--c-info) / 0.3);
    color: hsl(var(--c-info));
}

/* ============================================================================
   LIST GROUP COMPONENTS
   ============================================================================ */

.list-group {
    border-radius: var(--radius-md);
}

.list-group-item {
    background: hsl(var(--c-surface));
    border-color: hsl(var(--c-border));
    color: hsl(var(--c-text));
    padding: var(--space-3) var(--space-4);
    transition: background 150ms ease-out;
}

.list-group-item:first-child {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.list-group-item:hover {
    background: hsl(var(--c-surface-2) / 0.5);
}

.list-group-item.active {
    background: hsl(var(--c-primary));
    border-color: hsl(var(--c-primary));
    color: hsl(var(--c-primary-contrast));
}

/* ============================================================================
   NAV TABS & PILLS
   ============================================================================ */

.nav-tabs {
    border-bottom: 1px solid hsl(var(--c-border));
}

.nav-tabs .nav-link {
    color: hsl(var(--c-text-muted));
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-medium);
    transition: all 150ms ease-out;
}

.nav-tabs .nav-link:hover {
    color: hsl(var(--c-text));
    border-bottom-color: hsl(var(--c-border-strong));
}

.nav-tabs .nav-link.active {
    color: hsl(var(--c-primary));
    background: transparent;
    border-bottom-color: hsl(var(--c-primary));
}

.nav-pills .nav-link {
    color: hsl(var(--c-text-muted));
    background: transparent;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-medium);
    transition: all 150ms ease-out;
}

.nav-pills .nav-link:hover {
    background: hsl(var(--c-surface-2));
    color: hsl(var(--c-text));
}

.nav-pills .nav-link.active {
    background: hsl(var(--c-primary));
    color: hsl(var(--c-primary-contrast));
}

/* ============================================================================
   SPINNER COMPONENTS
   ============================================================================ */

.spinner-border {
    color: hsl(var(--c-primary));
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* ============================================================================
   MODAL BOOTSTRAP OVERRIDES
   ============================================================================ */

.modal-content {
    background: hsl(var(--modal-bg));
    border: 1px solid hsl(var(--c-border));
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    animation: modal-in var(--modal-animation-duration) var(--ease-out) both;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
    border-bottom: 1px solid hsl(var(--c-border));
    padding: var(--modal-padding);
}

.modal-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: hsl(var(--c-text));
}

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

.modal-footer {
    border-top: 1px solid hsl(var(--c-border));
    padding: var(--modal-padding);
}

.modal-backdrop {
    background: hsl(var(--modal-backdrop) / 0.8);
}

@supports (backdrop-filter: blur(1px)) {
    .modal-backdrop.show {
        backdrop-filter: blur(var(--modal-backdrop-blur));
    }
}

.btn-close {
    color: hsl(var(--c-text-muted));
    opacity: 1;
    transition: color 150ms ease-out;
}

.btn-close:hover {
    color: hsl(var(--c-text));
}

/* ============================================================================
   HR & DIVIDERS
   ============================================================================ */

hr {
    border-color: hsl(var(--c-border));
    opacity: 0.5;
}

/* ============================================================================
   INPUT GROUP
   ============================================================================ */

.input-group-text {
    background: hsl(var(--c-surface-2));
    border: 1px solid hsl(var(--input-border));
    color: hsl(var(--c-text-muted));
    font-size: var(--font-size-sm);
}

/* ============================================================================
   DROPDOWN COMPONENTS
   ============================================================================ */

.dropdown-menu {
    background: hsl(var(--c-surface));
    border: 1px solid hsl(var(--c-border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    transform-origin: top center;
    animation: dropdown-enter var(--duration-fast) var(--ease-out) both;
}

.dropdown-item {
    color: hsl(var(--c-text));
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    transition: background 150ms ease-out;
}

.dropdown-item:hover {
    background: hsl(var(--c-surface-2));
    color: hsl(var(--c-text));
}

.dropdown-item.active,
.dropdown-item:active {
    background: hsl(var(--c-primary));
    color: hsl(var(--c-primary-contrast));
}

.dropdown-divider {
    border-color: hsl(var(--c-border));
}

/* ============================================================================
   TOOLTIP & POPOVER
   ============================================================================ */

.tooltip-inner {
    background: hsl(var(--c-surface-3));
    color: hsl(var(--c-text));
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
}

.popover {
    background: hsl(var(--c-surface));
    border: 1px solid hsl(var(--c-border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.popover-header {
    background: hsl(var(--c-surface-2));
    border-bottom: 1px solid hsl(var(--c-border));
    font-weight: var(--font-weight-semibold);
}

.popover-body {
    color: hsl(var(--c-text));
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-4);
}

.breadcrumb-item {
    font-size: var(--font-size-sm);
}

.breadcrumb-item a {
    color: hsl(var(--c-primary));
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: hsl(var(--c-primary-hover));
    text-decoration: underline;
}

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

.breadcrumb-item + .breadcrumb-item::before {
    color: hsl(var(--c-text-subtle));
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination {
    gap: var(--space-1);
}

.page-link {
    background: hsl(var(--c-surface));
    border: 1px solid hsl(var(--c-border));
    color: hsl(var(--c-text));
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    transition: all 150ms ease-out;
}

.page-link:hover {
    background: hsl(var(--c-surface-2));
    border-color: hsl(var(--c-border-strong));
    color: hsl(var(--c-text));
}

.page-item.active .page-link {
    background: hsl(var(--c-primary));
    border-color: hsl(var(--c-primary));
    color: hsl(var(--c-primary-contrast));
}

.page-item.disabled .page-link {
    background: hsl(var(--c-surface));
    border-color: hsl(var(--c-border));
    color: hsl(var(--c-text-subtle));
    opacity: 0.5;
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */

.progress {
    background: hsl(var(--c-surface-2));
    border-radius: var(--radius-full);
    height: 0.5rem;
}

.progress-bar {
    background: hsl(var(--c-primary));
    border-radius: var(--radius-full);
}