/* ============================================
   MatrixComponents - Main Stylesheet
   Include this in your consuming application
   ============================================ */

/* CSS Variables - Override these in your app */
:root {
    /* Primary Colors */
    --matrix-primary: #0073ea;
    --matrix-primary-dark: #005bb5;
    --matrix-primary-light: #4dabf7;
    --matrix-secondary: #6c757d;
    --matrix-success: #00c875;
    --matrix-warning: #ffb800;
    --matrix-danger: #ff3838;
    --matrix-info: #00d2ff;
    
    /* Background Colors */
    --matrix-bg-primary: #ffffff;
    --matrix-bg-secondary: #f8f9fa;
    --matrix-bg-tertiary: #f1f3f4;
    --matrix-bg-hover: #f5f6f8;
    --matrix-bg-active: #e3f2fd;
    
    /* Text Colors */
    --matrix-text-primary: #323338;
    --matrix-text-secondary: #676879;
    --matrix-text-tertiary: #9ca3af;
    --matrix-text-white: #ffffff;
    
    /* Border Colors */
    --matrix-border-light: #e1e5e9;
    --matrix-border-medium: #c1c7d0;
    --matrix-border-dark: #a1a7b0;
    
    /* Shadows */
    --matrix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --matrix-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --matrix-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* Border Radius */
    --matrix-radius-sm: 4px;
    --matrix-radius-md: 8px;
    --matrix-radius-lg: 12px;
    
    /* Transitions */
    --matrix-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Button Styles
   ============================================ */

.matrix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--matrix-radius-sm);
    cursor: pointer;
    transition: var(--matrix-transition);
    text-decoration: none;
    white-space: nowrap;
}

.matrix-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

.matrix-btn-primary:hover:not(:disabled) {
    background-color: var(--matrix-primary-dark);
    border-color: var(--matrix-primary-dark);
}

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

.matrix-btn-success {
    background-color: var(--matrix-success);
    border-color: var(--matrix-success);
    color: var(--matrix-text-white);
}

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

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

.matrix-btn-info {
    background-color: var(--matrix-info);
    border-color: var(--matrix-info);
    color: var(--matrix-text-white);
}

.matrix-btn-outline {
    background-color: transparent;
    border-color: var(--matrix-border-medium);
    color: var(--matrix-text-primary);
}

.matrix-btn-outline:hover:not(:disabled) {
    background-color: var(--matrix-bg-hover);
    border-color: var(--matrix-primary);
    color: var(--matrix-primary);
}

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

.matrix-btn-text:hover:not(:disabled) {
    background-color: var(--matrix-bg-hover);
}

.matrix-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.matrix-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.matrix-btn-add {
    background-color: var(--matrix-success);
    border-color: var(--matrix-success);
    color: var(--matrix-text-white);
}

.matrix-btn-add:hover:not(:disabled) {
    background-color: #00a65a;
    border-color: #00a65a;
}

/* ============================================
   Search Bar Styles
   ============================================ */

.linkooc-toolbar__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--matrix-bg-primary);
    border: 1px solid var(--matrix-border-light);
    border-radius: 20px;
    min-width: 250px;
    transition: var(--matrix-transition);
}

.linkooc-toolbar__search:focus-within {
    border-color: var(--matrix-primary);
    box-shadow: 0 0 0 2px rgba(0, 115, 234, 0.1);
}

.linkooc-toolbar__search i {
    color: var(--matrix-text-tertiary);
}

.linkooc-toolbar__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--matrix-text-primary);
}

.linkooc-toolbar__search input::placeholder {
    color: var(--matrix-text-tertiary);
}

.linkooc-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--matrix-text-tertiary);
    padding: 0;
    transition: var(--matrix-transition);
}

.linkooc-search-clear:hover {
    color: var(--matrix-danger);
}

.linkooc-search-clear.hidden {
    display: none;
}

/* ============================================
   Status Badge Styles
   ============================================ */

.Matrix_Status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 12px;
    white-space: nowrap;
}

/* ============================================
   Grid Section Styles
   ============================================ */

.matrix-grid-section {
    background-color: var(--matrix-bg-primary);
    border-radius: var(--matrix-radius-md);
    padding: 1rem;
}

/* When using Linkooc toolbar, remove default padding - parent handles it */
.matrix-grid-section:has(.linkooc-grid-toolbar) {
    padding: 0;
    background-color: transparent;
}

.matrix-section-header {
    margin-bottom: 1rem;
}

.matrix-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
    margin: 0;
}

.matrix-section-subtitle {
    font-size: 0.875rem;
    color: var(--matrix-text-secondary);
    margin: 0.25rem 0 0 0;
}

/* ============================================
   Card Styles - Linkooc Visual Identity
   Clean shadow, hover effect, status indicator
   ============================================ */

.matrix-record-card {
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    /* Rounded top, subtle bottom - avoids "stacked" look */
    border-radius: 12px 12px 4px 4px !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background-color: var(--matrix-bg-primary, #ffffff);
    overflow: hidden !important;
    position: relative !important;
    /* No extra margin - Bootstrap g-4 gutters handle spacing */
}

.matrix-record-card:hover {
    background-color: var(--linkooc-hover-second-bg, #f8f9fa);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--matrix-border-light, #e1e5e9);
}

/* Bottom bar turns green on hover */
.matrix-record-card:hover::after {
    background-color: var(--linkooc-success, #08781B);
}

/* Selected card state */
.matrix-record-card.selected,
.matrix-record-card.border-primary {
    border-color: var(--linkooc-primary, #08781B);
    box-shadow: 0 4px 12px rgba(8, 120, 27, 0.15);
}

/* Bottom status indicator bar - subtle gray by default */
.matrix-record-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--matrix-border-light, #e1e5e9);
    transition: background-color 0.2s ease;
}

/* Bottom bar turns green on selected (not hover) */
.matrix-record-card.selected::after {
    background-color: var(--linkooc-success, #08781B) !important;
}

/* Status variants - for future use if needed */
.matrix-record-card[data-status="active"]::after,
.matrix-record-card.status-active::after {
    background-color: var(--linkooc-success, #08781B);
}

.matrix-record-card[data-status="warning"]::after,
.matrix-record-card.status-warning::after {
    background-color: var(--linkooc-warning, #FFA500);
}

.matrix-record-card[data-status="danger"]::after,
.matrix-record-card.status-danger::after {
    background-color: var(--linkooc-danger, #dc3545);
}

.matrix-record-card[data-status="draft"]::after,
.matrix-record-card.status-draft::after {
    background-color: var(--matrix-border-light, #e1e5e9);
}

/* Card grid - Flexbox 3-column layout with gap */
.matrix-record-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
}

/* Each card takes ~31% width (3 per row with gap) */
.matrix-record-cards > .card,
.matrix-record-cards > .matrix-record-card {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
}

/* 2 columns on tablet */
@media (max-width: 991.98px) {
    .matrix-record-cards > .card,
    .matrix-record-cards > .matrix-record-card {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }
}

/* 1 column on mobile */
@media (max-width: 767.98px) {
    .matrix-record-cards > .card,
    .matrix-record-cards > .matrix-record-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.matrix-card-body {
    padding: 1rem;
}

.matrix-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
    margin: 0;
}

.matrix-card-description {
    font-size: 0.875rem;
    color: var(--matrix-text-secondary);
    margin: 0;
}

/* ============================================
   Breadcrumb Styles
   ============================================ */

.matrix-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.matrix-breadcrumb-item {
    color: var(--matrix-text-secondary);
}

.matrix-breadcrumb-link {
    color: var(--matrix-primary);
    text-decoration: none;
    transition: var(--matrix-transition);
}

.matrix-breadcrumb-link:hover {
    color: var(--matrix-primary-dark);
    text-decoration: underline;
}

.matrix-breadcrumb-active {
    color: var(--matrix-text-primary);
    font-weight: 500;
}

.matrix-breadcrumb-separator {
    color: var(--matrix-text-tertiary);
}

/* ============================================
   Modal Styles
   ============================================ */

.matrix-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--matrix-transition);
}

.matrix-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.matrix-modal-content {
    background: var(--matrix-bg-primary);
    border-radius: var(--matrix-radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--matrix-shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.matrix-modal-overlay.show .matrix-modal-content {
    transform: scale(1);
}

.matrix-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--matrix-border-light);
}

.matrix-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
}

.matrix-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.matrix-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--matrix-border-light);
    background-color: var(--matrix-bg-secondary);
}

.matrix-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--matrix-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: var(--matrix-transition);
}

.matrix-close-btn:hover {
    color: var(--matrix-text-primary);
}

/* ============================================
   Utility Classes
   ============================================ */

.cursor-pointer {
    cursor: pointer;
}

.sortable-header {
    user-select: none;
}

.sortable-header.sorted {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ============================================
   Matrix Grid Table Header Styles
   Light, clean header matching modern design
   ============================================ */

.matrix-grid-header {
    background-color: var(--matrix-bg-primary, #ffffff);
    border-bottom: 1px solid var(--matrix-border-light, #e1e5e9);
}

.matrix-grid-header th {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--matrix-text-secondary, #676879);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--matrix-border-light, #e1e5e9);
    background-color: transparent;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}

.matrix-grid-header th:hover {
    color: var(--matrix-text-primary, #323338);
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}

.matrix-grid-header th.sortable-header.sorted {
    color: var(--matrix-text-primary, #323338);
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}

.matrix-sort-icon {
    font-size: 0.625rem;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.matrix-grid-header th:hover .matrix-sort-icon,
.matrix-grid-header th.sorted .matrix-sort-icon {
    opacity: 1;
}

/* Table body rows */
.matrix-record-grid tbody tr {
    border-bottom: 1px solid var(--matrix-border-light, #e1e5e9);
}

.matrix-record-grid tbody tr:hover {
    background-color: var(--matrix-bg-hover, #f5f6f8);
}

.matrix-record-grid tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--matrix-text-primary, #323338);
    vertical-align: middle;
}

/* ============================================
   Matrix_DropDownList Styles
   ============================================ */

/* Arrondi des coins pour Matrix_DropDownList (identique à Matrix_TextBox) */
.Matrix_DropDownList .k-input,
.Matrix_DropDownList .k-input-solid,
.Matrix_DropDownList .k-picker,
.Matrix_DropDownList .k-dropdown,
.Matrix_DropDownList .k-dropdown-wrap {
    border-radius: 0.375rem !important;
}

/* Conteneur principal */
.Matrix_DropDownList.k-dropdown,
.Matrix_DropDownList.k-picker {
    border-radius: 0.375rem !important;
}

/* Zone de saisie */
.Matrix_DropDownList .k-input-inner,
.Matrix_DropDownList .k-input-value-text {
    border-radius: 0.375rem !important;
}

/* Bouton de sélection (flèche) */
.Matrix_DropDownList .k-select,
.Matrix_DropDownList .k-picker-toggle {
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* État ouvert */
.Matrix_DropDownList.k-expanded .k-input,
.Matrix_DropDownList.k-expanded .k-input-solid {
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

/* Popup de la liste déroulante - arrondi complet sur tous les côtés */
.k-animation-container .k-popup.k-list-container,
.k-animation-container .k-list-container,
.k-popup.k-list-container,
.k-animation-container .k-popup,
div.k-animation-container > div.k-popup {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
}

/* Liste des éléments - conteneur avec arrondi */
.k-animation-container .k-list,
.k-popup .k-list,
.k-animation-container .k-list-container .k-list,
.k-list-container .k-list,
div.k-popup > .k-list {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
}

/* Tous les éléments de la liste - pas d'arrondi par défaut */
.k-animation-container .k-list-item,
.k-popup .k-list-item,
.k-list-item,
.k-list-container .k-list-item {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Premier élément de la liste - arrondi en haut uniquement */
.k-animation-container .k-list-item:first-child,
.k-popup .k-list-item:first-child,
.k-list-item:first-child,
.k-list-container .k-list-item:first-child {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Dernier élément de la liste - arrondi en bas uniquement */
.k-animation-container .k-list-item:last-child,
.k-popup .k-list-item:last-child,
.k-list-item:last-child,
.k-list-container .k-list-item:last-child {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Cas où il n'y a qu'un seul élément - arrondi complet */
.k-animation-container .k-list-item:only-child,
.k-popup .k-list-item:only-child,
.k-list-item:only-child,
.k-list-container .k-list-item:only-child {
    border-radius: 0.375rem !important;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* ============================================
   Linkooc Visual Identity Toolbar
   Used when Options.UseLinkoocToolbar = true
   
   MATCHING Master/Detail ItemList.razor layout:
   - Same height as .linkooc-panel-header (56px)
   - Same padding pattern
   - Same search box styling
   ============================================ */

.linkooc-grid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* Match .linkooc-panel-header from ItemList.razor */
    height: var(--linkooc-panel-header-height, 56px);
    padding: 0.75rem var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
}

.linkooc-grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 600px;
}

.linkooc-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Search box styling - matches ItemList.razor pattern */
.linkooc-grid-toolbar .linkooc-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.linkooc-grid-toolbar .linkooc-search-icon {
    position: absolute;
    left: 12px;
    color: var(--matrix-text-secondary, #676879);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.linkooc-grid-toolbar .linkooc-search-input {
    padding-left: 36px;
    padding-right: 36px;
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    border-radius: var(--matrix-radius-md, 8px);
    font-size: 0.875rem;
    height: 38px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.linkooc-grid-toolbar .linkooc-search-input:focus {
    border-color: var(--matrix-primary, #0073ea);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.1);
    outline: none;
}

.linkooc-grid-toolbar .linkooc-search-input::placeholder {
    color: var(--matrix-text-tertiary, #9ca3af);
}

.linkooc-grid-toolbar .linkooc-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--matrix-text-secondary, #676879);
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.linkooc-grid-toolbar .linkooc-search-clear:hover {
    background-color: var(--matrix-bg-hover, #f5f6f8);
    color: var(--matrix-text-primary, #323338);
}

/* Filter badge */
.linkooc-grid-toolbar .linkooc-filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    background-color: var(--matrix-primary, #0073ea);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Subtle refresh button - icon only */
.linkooc-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--matrix-radius-sm, 4px);
    cursor: pointer;
    color: var(--matrix-text-secondary, #676879);
    transition: all 0.2s ease;
}

.linkooc-refresh-btn:hover {
    background-color: var(--matrix-bg-hover, #f5f6f8);
    color: var(--matrix-text-primary, #323338);
    border-color: var(--matrix-border-light, #e1e5e9);
}

.linkooc-refresh-btn:active {
    background-color: var(--matrix-bg-tertiary, #f1f3f4);
}

.linkooc-refresh-btn i {
    font-size: 1rem;
}

/* ============================================
   View Toggle - Better contrast
   ============================================ */

.linkooc-grid-toolbar .btn-group .btn-outline-secondary {
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    background-color: var(--linkooc-bg, #fff);
    color: var(--linkooc-text-secondary, #6c757d);
}

.linkooc-grid-toolbar .btn-group .btn-outline-secondary:hover {
    background-color: var(--linkooc-hover-bg, #f5f6f8);
    color: var(--linkooc-text, #212529);
}

.linkooc-grid-toolbar .btn-group .btn-outline-secondary.active {
    /* HIGH CONTRAST - Green background with white icon */
    background-color: var(--linkooc-green-var-3, #08781B);
    border-color: var(--linkooc-green-var-2, #0a9421);
    color: var(--linkooc-reverse-text, #fff);
}

.linkooc-grid-toolbar .btn-group .btn-outline-secondary.active:hover {
    background-color: var(--linkooc-green-var-2, #0a9421);
}

/* ============================================
   Inline Filter Panel (for Linkooc toolbar)
   Matches ItemList.razor .linkooc-filters-panel pattern
   ============================================ */

.linkooc-grid-toolbar + .linkooc-filters-panel-wrapper,
.matrix-grid-section .linkooc-filters-panel-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.linkooc-grid-toolbar + .linkooc-filters-panel-wrapper.show,
.matrix-grid-section .linkooc-filters-panel-wrapper.show {
    max-height: 400px;
    opacity: 1;
    transition: max-height 0.35s ease-in, opacity 0.25s ease-in 0.05s;
}

.linkooc-filters-panel {
    padding: var(--linkooc-spacing-md, 1rem);
    border-bottom: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #F7F7F8);
    max-height: 400px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Filter panel labels - match ItemList.razor styling */
.linkooc-filters-panel .Matrix_FormField label.form-label,
.linkooc-filters-panel .matrix-form-label,
.linkooc-filters-panel label.form-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: var(--linkooc-text-secondary, #495057) !important;
    font-weight: 600;
}

/* ============================================
   Linkooc Pagination Footer
   Enhanced footer with count and page-size
   Matches ItemList.razor bottom bar pattern
   ============================================ */

.linkooc-pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Match sticky bar height from ItemList.razor */
    height: var(--linkooc-sticky-bar-height, 48px);
    padding: 0 var(--linkooc-spacing-md, 1rem);
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-bg, #fff);
}

.linkooc-pagination-count {
    color: var(--matrix-text-secondary, #676879);
    font-size: 0.875rem;
    font-weight: 500;
}

.linkooc-pagination-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.linkooc-pagination-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.linkooc-pagination-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    border-radius: var(--matrix-radius-sm, 4px);
    cursor: pointer;
    color: var(--matrix-text-primary, #323338);
    transition: all 0.2s ease;
}

.linkooc-pagination-nav button:hover:not(:disabled) {
    background-color: var(--matrix-bg-hover, #f5f6f8);
    border-color: var(--matrix-border-medium, #c1c7d0);
}

.linkooc-pagination-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.linkooc-pagination-info {
    color: var(--matrix-text-secondary, #676879);
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

.linkooc-pagination-pagesize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--matrix-text-secondary, #676879);
    font-size: 0.875rem;
}

.linkooc-pagination-pagesize select {
    width: auto;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--matrix-border-light, #e1e5e9);
    border-radius: var(--matrix-radius-sm, 4px);
    background-color: white;
}

.linkooc-pagination-pagesize select:focus {
    border-color: var(--matrix-primary, #0073ea);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.1);
    outline: none;
}