/*
 * Contract Management Design System
 * Consistent styling for cards, badges, statistics, and activity logs
 */

/* ===== Dashboard Header ===== */
.dashboard-header {
    background: var(--brand-gradient);
    color: var(--text-white);
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-xl);
}

.dashboard-header h2 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--font-size-4xl);
}

.dashboard-header p {
    margin: 0;
    opacity: 0.9;
}

/* ===== Status Badges ===== */
.status-badge {
    display: inline-block;
    padding: var(--space-xs) 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.status-active {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-expired {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.status-pending {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-inactive {
    background-color: var(--color-inactive-bg);
    color: var(--color-inactive-text);
}

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

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

.status-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

/* ===== Alerts ===== */
.alert {
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-md);
}

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

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

.alert-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

/* ===== Statistics Cards ===== */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.stat-card {
    background: var(--bg-card);
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.stat-card.success {
    border-left-color: var(--color-success);
}

.stat-card.danger {
    border-left-color: var(--color-danger);
}

.stat-card.warning {
    border-left-color: var(--color-warning);
}

.stat-card.info {
    border-left-color: var(--color-info);
}

.stat-card h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.stat-card .value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card .subtext {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

/* ===== Quick Action Cards ===== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.quick-action-card {
    background: var(--bg-card);
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-action-card h3 {
    margin: 0 0 var(--space-sm) 0;
    color: var(--text-primary);
    font-size: var(--font-size-xl);
}

.quick-action-card p {
    margin: 0 0 var(--space-md) 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ===== Progress Bars ===== */
.progress {
    width: 100%;
    height: 20px;
    background-color: var(--color-gray-200);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-top: var(--space-sm);
}

.progress-bar {
    height: 100%;
    background-color: var(--color-success);
    transition: width var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.progress-bar.warning {
    background-color: var(--color-warning);
}

.progress-bar.danger {
    background-color: var(--color-danger);
}

.progress-bar.info {
    background-color: var(--color-info);
}

/* ===== Section Cards ===== */
.section-card {
    background: var(--bg-card);
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.section-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    border-bottom: 2px solid var(--color-gray-200);
    padding-bottom: var(--space-sm);
}

/* ===== Activity Log ===== */
.activity-log {
    max-height: 500px;
    overflow-y: auto;
}

.activity-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.activity-icon.create {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.activity-icon.update {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.activity-icon.delete {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.activity-icon.payment {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.activity-content {
    flex: 1;
}

.activity-action {
    font-weight: 600;
    color: var(--text-primary);
}

.activity-time {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ===== Container Wrappers ===== */
.container-white {
    background: var(--bg-card);
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: var(--space-md);
}

/* ===== Table Enhancements ===== */
.table-enhanced {
    width: 100%;
    border-collapse: collapse;
}

.table-enhanced thead th {
    background-color: var(--bg-card-alt);
    font-weight: 600;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.table-enhanced tbody tr {
    border-bottom: 1px solid var(--color-gray-200);
}

.table-enhanced tbody tr:hover {
    background-color: var(--bg-card-alt);
}

.table-enhanced tbody td {
    padding: 0.75rem;
}

/* ===== Print Styles ===== */
@media print {
    .btn-primary,
    .btn-secondary,
    .btn-icon,
    button,
    .header-actions a,
    .quick-actions,
    .no-print {
        display: none !important;
    }

    .section-card,
    .stat-card,
    .quick-action-card {
        box-shadow: none;
        border: 1px solid var(--border-color-input);
        page-break-inside: avoid;
    }

    .dashboard-header {
        background: var(--brand-gradient-start);
        color: white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .stat-cards {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        padding: var(--space-lg);
    }

    .dashboard-header h2 {
        font-size: var(--font-size-2xl);
    }

    .dashboard-2col {
        grid-template-columns: 1fr;
    }
}

/* ===== Utility Classes ===== */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--text-muted);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}

.text-warning {
    color: var(--color-warning-text);
}

.text-info {
    color: var(--color-info);
}

.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }

.p-1 { padding: var(--space-sm); }
.p-2 { padding: var(--space-md); }
.p-3 { padding: var(--space-lg); }
.p-4 { padding: var(--space-xl); }

.font-weight-bold {
    font-weight: 700;
}

.font-weight-semibold {
    font-weight: 600;
}

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

.font-size-lg {
    font-size: var(--font-size-xl);
}

/* ===== Loading States ===== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-gray-100);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* Flexbox Utilities */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

/* Spacing Utilities */
.gap-xs {
    gap: var(--space-xs);
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

.gap-xl {
    gap: var(--space-xl);
}

/* Margin Utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-xs); }
.m-2 { margin: var(--space-sm); }
.m-3 { margin: var(--space-md); }
.m-4 { margin: var(--space-lg); }
.m-5 { margin: var(--space-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-xs); }
.ml-2 { margin-left: var(--space-sm); }
.ml-3 { margin-left: var(--space-md); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-xs); }
.mr-2 { margin-right: var(--space-sm); }
.mr-3 { margin-right: var(--space-md); }
.mr-auto { margin-right: auto; }

/* Padding Utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Display Utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer;
    user-select: none;
}

/* Collapsible Section Utilities */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.collapsible-icon {
    display: inline-block;
    transition: transform var(--transition-base);
}

.collapsible-content {
    display: none;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.collapsible-content.expanded {
    display: block;
    max-height: none;
    overflow: visible;
}

/* Grid Utilities */
.grid {
    display: grid;
}

.grid-2-col {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-3-col {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid-4-col {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.dashboard-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* ===== Quick Actions Bar ===== */
.quick-actions-bar {
    background: var(--bg-table-header);
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-md);
    padding: 0.75rem var(--space-md);
    margin-bottom: var(--space-lg);
}

.quick-actions-bar h3 {
    color: var(--text-body);
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: none;
    padding-bottom: 0;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-sm);
}

.quick-action-card {
    background: var(--bg-card);
    padding: var(--space-sm) 0.75rem;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.quick-action-card.type-warning { border-left: 3px solid var(--color-warning); }
.quick-action-card.type-danger { border-left: 3px solid var(--color-danger); }
.quick-action-card.type-info { border-left: 3px solid var(--color-info); }

.quick-action-content { display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.quick-action-icon { font-size: 1.1rem; }
.quick-action-message { font-weight: 600; color: var(--text-body); font-size: 0.85rem; }

.quick-action-btn {
    color: var(--text-white);
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.quick-action-btn:hover { opacity: 0.9; }
.quick-action-btn.type-warning { background: var(--color-warning); }
.quick-action-btn.type-danger { background: var(--color-danger); }
.quick-action-btn.type-info { background: var(--color-info); }

/* Settings Page Utilities */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.card-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.card-title {
    margin: 0 0 var(--space-xs) 0;
}

.card-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0;
}

/* ===== Additional Flex Utilities ===== */
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.inline-flex { display: inline-flex; align-items: center; }

/* ===== Additional Text Utilities ===== */
.text-2xs { font-size: var(--font-size-2xs); }
.text-xs { font-size: var(--font-size-xs); }
.text-primary-color { color: var(--color-primary); }
.text-nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-underline { text-decoration: none; }

/* ===== Icon Sizing ===== */
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 30px; height: 30px; }

/* ===== Vertical Divider ===== */
.divider-v {
    width: 1px;
    background: var(--border-color);
    margin: 0.2rem 0.15rem;
    align-self: stretch;
}

/* ===== Responsive Grid Utilities ===== */
.grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto-260 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ===== Stat Mini — Compact stat boxes with colored left border ===== */
.stat-mini {
    text-align: center;
    padding: 0.35rem 0.4rem;
    background: var(--bg-card-alt);
    border-radius: 3px;
    border-left: 2px solid var(--color-primary);
    flex: 1;
}
.stat-mini.success  { border-left-color: var(--color-success); }
.stat-mini.danger   { border-left-color: var(--color-danger); }
.stat-mini.info     { border-left-color: var(--color-info); }
.stat-mini.warning  { border-left-color: var(--color-warning); }
.stat-mini.muted    { border-left-color: var(--text-muted); }
.stat-mini.neutral  { border-left-color: var(--border-color); }

.stat-mini-label {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.stat-mini-value {
    font-size: 0.85rem;
    font-weight: 600;
}
.stat-mini-value.primary { color: var(--color-primary); }
.stat-mini-value.success { color: var(--color-success); }
.stat-mini-value.danger  { color: var(--color-danger); }
.stat-mini-value.info    { color: var(--color-info); }
.stat-mini-value.warning { color: var(--color-warning-text); }
.stat-mini-value.muted   { color: var(--text-muted); }

/* ===== Stat Box — Larger stat cards with accent border ===== */
.stat-box {
    padding: var(--space-md);
    background: var(--bg-card-alt);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--color-primary);
}
.stat-box.success { border-left-color: var(--color-success); }
.stat-box.danger  { border-left-color: var(--color-danger); }
.stat-box.info    { border-left-color: var(--color-info); }
.stat-box.warning { border-left-color: var(--color-warning); }
.stat-box.bordered { border: 1px solid var(--border-color-light); border-left: 3px solid var(--color-primary); }

.stat-box-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.stat-box-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
}
.stat-box-value.sm { font-size: 1.3rem; }
.stat-box-value.primary { color: var(--color-primary); }
.stat-box-value.success { color: var(--color-success); }
.stat-box-value.danger  { color: var(--color-danger); }

.stat-box-subtext {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* ===== Badge Inline — Small colored inline badges ===== */
.badge-inline {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
    margin-left: var(--space-sm);
}
.badge-inline.primary { background: var(--color-primary); color: var(--text-white); }
.badge-inline.success { background: var(--color-success); color: var(--text-white); }
.badge-inline.danger  { background: var(--color-danger); color: var(--text-white); }
.badge-inline.info    { background: var(--color-info); color: var(--text-white); }
.badge-inline.warning { background: var(--color-warning); color: var(--color-warning-text); }
.badge-inline.muted   { background: var(--color-inactive-bg); color: var(--color-inactive-text); }
.badge-inline.no-ml   { margin-left: 0; }

/* ===== Badge Pill — Round-cornered small badges ===== */
.badge-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.badge-pill.primary { background: var(--color-primary); color: var(--text-white); }
.badge-pill.success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-pill.danger  { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-pill.muted   { background: var(--bg-card-alt); color: var(--text-secondary); border: 1px solid var(--border-color); }
.badge-pill.purple  { background: #6f42c1; color: #fff; }

/* ===== Info Box — Left-bordered alert/info boxes ===== */
.info-box {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--color-warning);
    background: var(--color-warning-bg);
}
.info-box.primary { border-left-color: var(--color-primary); background: var(--color-primary-bg); }
.info-box.success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.info-box.danger  { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
.info-box.info    { border-left-color: var(--color-info); background: var(--color-info-bg); }

/* ===== Filter Bar — Search/filter row for list pages ===== */
.filter-bar {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    align-items: center;
    flex-wrap: wrap;
}

.filter-field {
    flex: 0 0 auto;
}

.filter-field label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.filter-field input,
.filter-field select {
    padding: var(--space-sm);
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
    min-width: 150px;
}

.filter-spacer {
    flex: 1;
    text-align: right;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    align-self: flex-end;
    padding-bottom: var(--space-sm);
}

/* ===== Help Text — Form hint/description text ===== */
.help-text {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

/* ===== Type Badge — Colored inline tag for categories ===== */
.type-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
}
.type-badge.league       { background: #e3f2fd; color: #1976d2; }
.type-badge.cup          { background: #fff3e0; color: #f57c00; }
.type-badge.european     { background: #f3e5f5; color: #7b1fa2; }
.type-badge.international { background: #e8f5e9; color: #388e3c; }
.type-badge.other        { background: var(--bg-card-alt); color: var(--text-secondary); }
.type-badge.ksi          { background: #e3f2fd; color: #1976d2; }
.type-badge.tm           { background: #fff3e0; color: #f57c00; }

:root[data-theme="dark"] .type-badge.league       { background: #1a3050; color: #64b5f6; }
:root[data-theme="dark"] .type-badge.cup          { background: #3d2e10; color: #ffb74d; }
:root[data-theme="dark"] .type-badge.european     { background: #2a1a30; color: #ce93d8; }
:root[data-theme="dark"] .type-badge.international { background: #1a3020; color: #81c784; }
:root[data-theme="dark"] .type-badge.other        { background: var(--bg-card-alt); color: var(--text-secondary); }
:root[data-theme="dark"] .type-badge.ksi          { background: #1a3050; color: #64b5f6; }
:root[data-theme="dark"] .type-badge.tm           { background: #3d2e10; color: #ffb74d; }

/* ===== Sort Link — Clickable table header link ===== */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ===== Pagination — Page navigation controls ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

.page-link {
    padding: var(--space-sm) 0.75rem;
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-body);
}

.page-link:hover {
    background: var(--bg-card-alt);
    border-color: var(--color-gray-350);
}

.page-link.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--text-white);
    font-weight: 500;
}

.page-link.disabled {
    color: var(--color-gray-350);
    cursor: default;
    pointer-events: none;
}

.page-ellipsis {
    padding: var(--space-sm) 0.75rem;
}

/* ===== Action Button — Bare icon button for table rows ===== */
.btn-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    font-size: 1.1rem;
    line-height: 1;
}
.btn-action.success { color: var(--color-success); }
.btn-action.primary { color: var(--color-primary); }
.btn-action.danger  { color: var(--color-danger); }
.btn-action.lg      { font-size: 1.2rem; }

/* ===== Modal Footer — Bottom action bar in modals ===== */
.modal-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color-light);
    text-align: right;
}

.modal-footer .btn-secondary { margin-right: var(--space-sm); }

/* ===== Flag Icon — Country flag in tables ===== */
.flag-sm {
    width: 20px;
    height: 15px;
    margin-right: var(--space-sm);
    vertical-align: middle;
}

/* ===== Readonly Input — Disabled-look form input ===== */
.input-readonly {
    background-color: var(--bg-card-alt);
    color: var(--text-muted);
    cursor: not-allowed;
}

:root[data-theme="dark"] .input-readonly {
    background-color: var(--bg-card-alt);
    color: var(--text-muted);
}

/* ===== Warning Box — Alert box with left border ===== */
.warning-box {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-lg);
}

.warning-box p {
    margin: 0;
    color: var(--color-warning-text);
}

/* ===== Summary Box — Neutral info panel ===== */
.summary-box {
    background: var(--bg-card-alt);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-md);
}

/* ===== Checkbox Label — Flex label with gap for checkbox inputs ===== */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

/* ===== Compact Stat Cards ===== */
.stat-card-compact {
    padding: 0.75rem 1rem;
}

.stat-card-compact h3 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-xs);
}

.stat-card-compact .value {
    font-size: var(--font-size-xl);
}

.stat-card-compact .subtext {
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
}

/* ===== Progress Bar Thin ===== */
.progress-thin {
    background: var(--color-gray-200);
    border-radius: var(--border-radius-md);
    height: 6px;
    overflow: hidden;
}

.progress-thin-bar {
    background: linear-gradient(90deg, var(--color-success), #20c997);
    height: 100%;
    border-radius: var(--border-radius-md);
    transition: width 0.5s ease;
}

/* ===== Translation Filter Grid ===== */
.translations-filter-grid {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-md);
    align-items: end;
}

/* ===== Table Wrapper (overflow) ===== */
.table-responsive {
    overflow-x: auto;
}

.table-full {
    width: 100%;
    border-collapse: collapse;
}

.table-full thead tr {
    background: var(--bg-card-alt);
    border-bottom: 2px solid var(--border-color);
}

.table-full thead th {
    padding: 0.75rem;
    text-align: left;
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-label);
}

.empty-state-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
}

/* ===== Modal Overlay (import dialog style) ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.modal-overlay-content {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    max-width: 450px;
    width: 90%;
}

/* ===== Button Sizes ===== */
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.btn-xs {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-sm);
}

/* ===== Pagination Controls ===== */
.pagination-controls {
    margin-top: var(--space-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

/* ===== Emoji Picker Chip ===== */
.emoji-chip {
    cursor: pointer;
    padding: 2px 4px;
    border: 1px solid var(--border-color-input);
    border-radius: 3px;
    margin: 0 2px;
}

/* ===== Scope Status Badges ===== */
.status-universal {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
}

.status-cup {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.status-european {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-per-event {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

/* ===== Form Grid Layouts ===== */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
}

.form-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

/* ===== Form Divider — styled <hr> for modal/form sections ===== */
.form-divider {
    margin: var(--space-lg) 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* ===== Text Required — red asterisk for required fields ===== */
.text-required {
    color: var(--color-danger);
}

/* ===== Qualification Badges — competition qualification tags ===== */
.qual-badge {
    color: var(--text-white);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: var(--font-size-xs);
    margin: 0 0.1rem;
    display: inline-block;
}

.qual-badge.cl  { background: #003399; }
.qual-badge.el  { background: #ff6600; }
.qual-badge.ecl { background: #009900; }

:root[data-theme="dark"] .qual-badge.cl  { background: #1a4dcc; }
:root[data-theme="dark"] .qual-badge.el  { background: #cc5200; }
:root[data-theme="dark"] .qual-badge.ecl { background: #007a00; }

/* Qualification badge text (for checkbox labels) */
.qual-badge-text.cl  { color: #003399; }
.qual-badge-text.el  { color: #ff6600; }
.qual-badge-text.ecl { color: #009900; }

:root[data-theme="dark"] .qual-badge-text.cl  { color: #6699ff; }
:root[data-theme="dark"] .qual-badge-text.el  { color: #ff8833; }
:root[data-theme="dark"] .qual-badge-text.ecl { color: #33cc33; }

/* ===== Title Badges — trophy/award tags ===== */
.title-badge {
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-block;
}

.title-badge.league { background: #ffd700; color: #000; }
.title-badge.cup    { background: var(--color-success); color: var(--text-white); }

/* ===== Delete Button (compact, for table rows) ===== */
.btn-delete-xs {
    margin: 0;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-white);
}

.btn-delete-xs:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

/* ===== Notes Row — sub-row for table notes ===== */
.notes-row td {
    background: var(--bg-card-alt);
    padding: var(--space-sm) 0.75rem;
    font-size: var(--font-size-sm);
}

/* ===== Empty State Box — centered placeholder with background ===== */
.empty-state-box {
    background: var(--bg-card-alt);
    padding: var(--space-xl);
    text-align: center;
    border-radius: var(--border-radius-lg);
}

/* ===== Legend Card — gradient info card for report legends ===== */
.legend-card {
    background: var(--brand-gradient);
    color: var(--text-white);
}

.legend-card h3 {
    color: var(--text-white);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.legend-item-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.legend-item-desc {
    opacity: 0.9;
    font-size: var(--font-size-sm);
}

/* ===== Detail Expand Row — sub-row with background for table breakdowns ===== */
.detail-expand-row {
    border-bottom: 2px solid var(--border-color);
}

.detail-expand-row td {
    padding: 0.75rem var(--space-md);
    background: var(--bg-card-alt);
}

/* ===== Footer Total Row ===== */
.total-row {
    background: var(--color-gray-200);
    font-weight: bold;
    border-top: 3px solid var(--border-color);
}

/* ===== Modal Inner XL — wider modal for complex forms ===== */
.modal-inner-xl { min-width: 500px; max-width: 800px; max-height: 90vh; overflow-y: auto; }

/* ===== Width Utilities ===== */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-50pct { width: 50%; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.w-100px { width: 100px; }
.w-120 { width: 120px; }
.w-150 { width: 150px; }
.w-200 { width: 200px; }
.w-250 { width: 250px; }
.w-300 { width: 300px; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* ===== Height Utilities ===== */
.h-auto { height: auto; }
.h-full { height: 100%; }

/* ===== Padding Axis Utilities ===== */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-2 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-3 { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-4 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-5 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-2 { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-3 { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-4 { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-5 { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-xs); }
.pt-2 { padding-top: var(--space-sm); }
.pt-3 { padding-top: var(--space-md); }
.pt-4 { padding-top: var(--space-lg); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-xs); }
.pb-2 { padding-bottom: var(--space-sm); }
.pb-3 { padding-bottom: var(--space-md); }
.pb-4 { padding-bottom: var(--space-lg); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--space-xs); }
.pl-2 { padding-left: var(--space-sm); }
.pl-3 { padding-left: var(--space-md); }
.pl-4 { padding-left: var(--space-lg); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--space-xs); }
.pr-2 { padding-right: var(--space-sm); }
.pr-3 { padding-right: var(--space-md); }
.pr-4 { padding-right: var(--space-lg); }

/* ===== Additional Text Color Utilities ===== */
.text-white { color: #fff; }
.text-body { color: var(--text-body); }
.text-secondary-color { color: var(--text-secondary); }
.text-label { color: var(--text-label); }
.text-primary { color: var(--text-primary); }
.text-warning-vivid { color: var(--color-warning); }

/* ===== Border Utilities ===== */
.border-0 { border: 0; }
.border { border: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-left { border-left: 1px solid var(--border-color); }
.border-right { border-right: 1px solid var(--border-color); }

/* ===== Overflow Utilities ===== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ===== Position Utilities ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

/* ===== Vertical Align ===== */
.align-middle { vertical-align: middle; }
.align-top { vertical-align: top; }
.align-bottom { vertical-align: bottom; }

/* ===== White-space Utilities ===== */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.word-break { word-break: break-word; }

/* ===== Opacity Utilities ===== */
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* ===== List Utilities ===== */
.list-none { list-style: none; padding-left: 0; }

/* ===== Separator / Divider ===== */
.separator {
    margin: var(--space-lg) 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* ===== Icon Font Size ===== */
.icon-1x { font-size: 1rem; }
.icon-2x { font-size: 2rem; }
.icon-3x { font-size: 3rem; }
.icon-4x { font-size: 4rem; }

/* ===== Max Height ===== */
.max-h-300 { max-height: 300px; overflow-y: auto; }
.max-h-400 { max-height: 400px; overflow-y: auto; }
.max-h-500 { max-height: 500px; overflow-y: auto; }

/* ===== Min Width Utilities ===== */
.min-w-30 { min-width: 30px; }
.min-w-50 { min-width: 50px; }
.min-w-80 { min-width: 80px; }
.min-w-110 { min-width: 110px; }
.min-w-200 { min-width: 200px; }

/* ===== Min Height Utilities ===== */
.min-h-100 { min-height: 100px; }

/* ===== Max Width Utilities ===== */
.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }
.max-w-900 { max-width: 900px; }

/* ===== Max Height Element Utilities (no overflow) ===== */
.max-h-el-100 { max-height: 100px; }

/* ===== Max Width Element Utilities (no overflow) ===== */
.max-w-el-180 { max-width: 180px; }

/* ===== Margin Auto Utilities ===== */
.mx-auto { margin-left: auto; margin-right: auto; }

/* ===== Object Fit ===== */
.object-contain { object-fit: contain; }

/* ===== Color Swatch Input ===== */
.color-swatch {
    width: 80px;
    height: 40px;
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

/* ===== Background Utilities ===== */
.bg-muted { background: var(--bg-card-alt); }
.bg-white { background: var(--bg-card); }
.bg-info-light { background: #e7f1ff; }
.bg-purple-light { background: #f8f5ff; }
.bg-highlight-yellow { background: #fff3cd; }
.bg-highlight-blue { background: #e3f2fd; }

/* ===== Border Accent Utilities ===== */
.border-left-primary { border-left: 4px solid var(--color-primary); }

/* ===== Rounded Utilities ===== */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }

/* ===== Password Toggle Button ===== */
.btn-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
}

/* ===== Section Divider — border-top separator with spacing ===== */
.section-divider {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

/* ===== Logo Preview Container ===== */
.logo-preview-box {
    border: 2px dashed var(--border-color-input);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    background: var(--bg-card-alt);
    min-width: 200px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Modal Backdrop ===== */
.modal-backdrop {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--overlay-bg);
}

/* ===== Modal Dialog ===== */
.modal-dialog {
    background-color: var(--bg-card);
    margin: 5% auto;
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
}

/* ===== Modal Close Button ===== */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
}

/* ===== Flex None (no grow/shrink) ===== */
.flex-none { flex: 0 0 auto; }

/* ===== Font Size 1.1rem for match scores ===== */
.text-score { font-size: 1.1rem; }

/* ===== Inline Form Input (compact) ===== */
.input-compact {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
}

/* ===== Compact Button ===== */
.btn-compact {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
}

/* ===== Checkbox Auto Width ===== */
.w-auto-input { width: auto; }

/* ===== Form Hint Text (block, muted, small, with left indent) ===== */
.form-hint {
    display: block;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

/* ===== Form Hint Indented (for checkbox labels) ===== */
.form-hint-indented {
    display: block;
    color: var(--text-secondary);
    margin-left: 1.7rem;
}

/* ===== Color Inherit ===== */
.color-inherit { color: inherit; }

/* ===== Width 140px ===== */
.w-140 { width: 140px; }

/* ===== Heading Styles (margin overrides) ===== */
.heading-section {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--text-body);
}

.heading-subsection {
    margin: 1.5rem 0 0.75rem 0;
    font-size: 0.9rem;
}

/* ===== Championship Group Heading ===== */
.heading-championship {
    margin: 1.5rem 0 0.75rem 0;
    font-size: 0.9rem;
    color: #6f42c1;
    border-top: 2px solid #6f42c1;
    padding-top: 1rem;
}

/* ===== Match Detail Panel Styles ===== */
.match-detail-bg {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 6px;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    padding: var(--space-md);
}

/* ===== Match Row Styles ===== */
.match-row {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
}

.match-row-regular { background: var(--bg-card-alt); }
.match-row-championship { background: #f8f5ff; }

/* ===== Table Column Width Utilities ===== */
.col-w-50 { width: 50px; }
.col-w-60 { width: 60px; }
.col-w-70 { width: 70px; }
.col-w-80 { width: 80px; }

/* ===== Report-Specific Utilities ===== */

/* Font family: monospace */
.font-mono { font-family: 'Courier New', monospace; }

/* Grid auto-fit column utilities */
.grid-auto-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* Text color: info-alt (purple #667eea) */
.text-info-alt { color: #667eea; }

/* Text color: accent pink (#f5576c) */
.text-accent-pink { color: #f5576c; }

/* Font size: 1.8rem */
.text-1-8rem { font-size: 1.8rem; }

/* Font size: 1.2rem */
.text-1-2rem { font-size: 1.2rem; }

/* Line height: 2 */
.leading-loose { line-height: 2; }

/* List reset (no margin, standard padding) */
.list-report { margin: 0; padding-left: 1.5rem; }

/* Stat box accent border colors */
.stat-box.accent-success { border-left-color: #28a745; }
.stat-box.accent-warning { border-left-color: #ffc107; }
.stat-box.accent-orange { border-left-color: #ff9800; }
.stat-box.accent-danger { border-left-color: #dc3545; }

/* Alert heading styles */
.alert-heading-danger { margin: 0 0 0.5rem 0; color: #721c24; }
.alert-heading-success { margin: 0 0 0.5rem 0; color: #155724; }
.alert-heading-primary { margin: 0 0 0.5rem 0; color: #0056b3; }

/* Total row variants */
.total-row-danger { background: #f8d7da; font-weight: 700; }
.total-row-warning { background: #fff3cd; font-weight: 700; }

/* Section card with legend gradient */
.section-card.legend-card h3 { color: white; border-bottom-color: rgba(255,255,255,0.3); }

/* Insights box with gradient */
.section-card.insights-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.section-card.insights-gradient h3 {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
}

/* Border-left accent for info cards */
.border-left-accent-blue { border-left: 4px solid #4facfe; }

/* Insight badge label color */
.text-insight-label { color: #f5576c; }

/* ===== Report Window Header Variants ===== */
.window-header-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.window-header-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* Insights gradient — green variant */
.section-card.insights-gradient-green {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}
.section-card.insights-gradient-green h3 {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
}

/* Card subtext (under amounts) */
.card-subtext { margin: 0.5rem 0 0 0; color: #6c757d; font-size: 0.9rem; }

/* Legend color swatches */
.bg-info-alt { background: #667eea; }
.bg-success-swatch { background: #28a745; }
.bg-warning-swatch { background: #ffc107; }

/* ===== Responsive Grid Auto-fit Utilities ===== */
.grid-auto-150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ===== Checkbox Input — Larger checkbox for form labels ===== */
.checkbox-input {
    margin-right: var(--space-sm);
    width: 18px;
    height: 18px;
}

/* ===== Form Readonly — Disabled-looking input ===== */
.form-readonly {
    background: var(--bg-card-alt);
    cursor: not-allowed;
}

:root[data-theme="dark"] .form-readonly {
    background: var(--bg-card-alt);
}

/* ===== Milestone Badges — Status pills for milestone progress ===== */
.milestone-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
    border-radius: 12px;
}

.milestone-badge-met {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    font-weight: 600;
    border: 1px solid var(--color-success-border);
}

.milestone-badge-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.milestone-badge-info {
    background: var(--bg-card-alt);
    color: var(--text-body);
    border: 1px solid var(--border-color);
}

/* ===== Progress Bar Micro — 8px thin progress bar ===== */
.progress-micro {
    background: var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    height: 8px;
    overflow: hidden;
}

.progress-micro-bar {
    height: 100%;
    border-radius: var(--border-radius-lg);
    transition: width 0.3s;
}

/* ===== Info Highlight — Pre-wrap text block with left border ===== */
.info-highlight {
    white-space: pre-wrap;
    background: var(--bg-card-alt);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--color-primary);
}

/* ===== Text Pre-wrap ===== */
.text-pre-wrap { white-space: pre-wrap; }

/* ===== Verification Box — Info-themed section card ===== */
.verification-box {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
}

:root[data-theme="dark"] .verification-box {
    background: var(--color-info-bg);
    border-left-color: var(--color-info);
}

/* ===== Detail Label — Small muted label above a value ===== */
.detail-label {
    margin: 0;
    color: var(--text-label);
    font-size: 0.9rem;
}

/* ===== Detail Value — Value text below a detail label ===== */
.detail-value {
    margin: var(--space-xs) 0 0 0;
    font-weight: 500;
}

/* ===== Button Danger Background — Red bg on secondary button ===== */
.btn-danger-bg {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

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

/* ===== Textarea Full — Full-width textarea with standard border ===== */
.textarea-full {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
}

/* ===== Max Width Utilities (additional) ===== */
.max-w-120 { max-width: 120px; }
.max-w-200 { max-width: 200px; }

/* ===== Font Style ===== */
.font-italic { font-style: italic; }

/* ===== Object Fit ===== */
.object-cover { object-fit: cover; }

/* ===== Font Family Inherit ===== */
.font-inherit { font-family: inherit; }

/* ===== Action Button Bare — icon button with no background/border ===== */
.btn-action-bare {
    background: none;
    border: none;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* ===== Border Input — standard form-like border ===== */
.border-input {
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
}

/* ===== Width Utilities (additional) ===== */
.w-40 { width: 40px; }
.w-180 { width: 180px; }

/* ===== Height Utilities (additional) ===== */
.h-225 { height: 225px; }

/* ===== Sticky Column — for table headers that stick left ===== */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
}

/* ===== Min Width Utilities (additional) ===== */
.min-w-100 { min-width: 100px; }

/* ===== Grid Layout: 2fr 1fr ===== */
.grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}

/* ===== Text Placeholder Colors ===== */
.text-placeholder { color: #ccc; }
.text-placeholder-light { color: #ddd; }

/* ===== Matrix Assigned Button — green checkmark in assignment matrix ===== */
.btn-matrix-assigned {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

/* ===== Legend Section — muted background info card ===== */
.legend-section {
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
}

/* ===== Legend Heading ===== */
.legend-heading {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-sm);
}

/* ===== Vertical Text (rotated) ===== */
.writing-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ===== Bulk Actions Background — blue info background ===== */
.bg-bulk-info {
    background: #e7f3ff;
    border-radius: var(--border-radius-lg);
}

/* ===== Bulk Actions Gradient — purple gradient background ===== */
.bg-bulk-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===== Button Variants for Bulk Actions ===== */
.btn-bulk-white {
    background: white;
    color: #667eea;
    border: none;
}

.btn-bulk-white-soft {
    background: rgba(255,255,255,0.9);
    color: #667eea;
    border: none;
}

.btn-bulk-clear {
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    border-radius: 4px;
}

/* ===== Flex Half — flex basis 50% minus gap ===== */
.flex-half {
    flex: 0 0 calc(50% - 0.75rem);
}

/* ===== Year Button (tab-like) ===== */
.year-btn {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background: var(--bg-card);
    color: var(--text-body);
}

.year-btn.active {
    background: var(--color-primary);
    color: var(--text-white);
    font-weight: 600;
}

/* ===== Button Padding Variants ===== */
.btn-pad-sm { padding: 0.5rem 1rem; }
.btn-pad-xs { padding: 0.25rem 0.75rem; }

/* ===== Info Box Blue — blue-left-bordered info panel ===== */
.info-box-blue {
    padding: 1rem;
    background: #e7f3ff;
    border-left: 4px solid #2196F3;
}

/* ===== One-off Summary Text ===== */
.text-info-blue { color: #1976D2; }

/* ===== Form Label Color ===== */
.text-form-label { color: #495057; }

/* ===== Notes Row Background ===== */
.notes-cell {
    padding: 0.5rem 0.75rem;
    background: var(--bg-card-alt);
}

/* ===== Table Cell Padding (detail rows) ===== */
.td-pad-y { padding: 0.5rem 0; }

/* ===== Experimental Badge ===== */
.experimental-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: 0.5rem;
}

/* ===== Create Instance Form Background ===== */
.bg-form-section {
    background: var(--bg-card-alt);
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
}

/* ===== Icon Large (1.2rem with margin) ===== */
.icon-emoji-lg {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* ===== Checkbox Auto Width ===== */
.checkbox-auto { width: auto; }

/* ===== Additional Table Column Width Utilities ===== */
.col-w-90 { width: 90px; }
.col-w-100 { width: 100px; }
.col-w-120 { width: 120px; }
.col-w-150 { width: 150px; }
.col-w-180 { width: 180px; }

/* ===== Additional Min Width Utilities ===== */
.min-w-90 { min-width: 90px; }
.min-w-160 { min-width: 160px; }
.min-w-180 { min-width: 180px; }

/* ===== Additional Font Size Utilities ===== */
.text-3xl { font-size: var(--font-size-3xl); }

/* ===== Grid Form Layout — Auto-fit form fields ===== */
.grid-form-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

/* ===== Fixed Payment Table Utilities ===== */
.fp-player-cell {
    font-weight: 500;
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 9;
    border-right: 2px solid #dee2e6;
}

.fp-total-header {
    text-align: right;
    font-weight: bold;
    background-color: var(--primary-dark);
    min-width: 100px;
}

.fp-total-cell {
    text-align: right;
    font-weight: bold;
    color: var(--primary-color);
    background-color: #e7f3ff;
}

.fp-totals-row {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

.fp-totals-sticky {
    position: sticky;
    left: 0;
    background-color: var(--primary-color);
    z-index: 10;
}

.fp-grand-total {
    text-align: right;
    background-color: var(--primary-dark);
    font-size: 1.1rem;
}

.fp-empty-cell {
    padding: 3rem;
    text-align: center;
    color: #6c757d;
}

.fp-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.fp-empty-text {
    font-size: 1.125rem;
    margin: 0;
}

.fp-scroll-hint {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.fp-info-badge {
    font-size: 0.85rem;
}

.fp-player-team {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: normal;
}

/* ===== Translation Table Utilities ===== */
.cell-pad {
    padding: 0.75rem;
    vertical-align: top;
}

.cell-pad-center {
    padding: 0.75rem;
    text-align: center;
}

.cell-context {
    padding: 0.75rem;
    vertical-align: top;
    font-size: 0.75rem;
    color: #666;
}

.trans-length-hint {
    font-size: 0.7rem;
    color: #999;
    margin-top: 2px;
}

.trans-display-cell {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    min-height: 2rem;
}

.trans-display-untranslated {
    background: #fff3cd;
    border: 1px dashed #ffc107;
}

.trans-display-translated {
    background: #f8f9fa;
}

.trans-placeholder {
    color: #999;
    font-style: italic;
}

.trans-edit-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.trans-edit-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.trans-save-status {
    font-size: 0.8rem;
}

.trans-row {
    border-bottom: 1px solid #dee2e6;
}

.trans-msgid {
    font-weight: 500;
    word-wrap: break-word;
}

/* ===== Button Gradient Variants ===== */
.btn-gradient-bulk {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
}

.btn-gradient-reports {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border: none;
}

/* ===== Callout Boxes — Left-bordered alert panels ===== */
.callout-warning {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
}

.callout-info {
    background: #e7f3ff;
    border-left: 4px solid var(--color-primary);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
}

:root[data-theme="dark"] .callout-warning {
    background: var(--color-warning-bg);
}

:root[data-theme="dark"] .callout-info {
    background: var(--color-primary-bg);
}

/* ===== Tab Navigation Container ===== */
.tab-nav {
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--space-xl);
}

/* ===== Styled Form Input (amount/currency fields) ===== */
.form-input-styled {
    padding: var(--space-sm);
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
}

/* ===== Max Width Utilities (additional) ===== */
.max-w-500 { max-width: 500px; }
.max-w-800 { max-width: 800px; }

/* ===== Scrollable Container ===== */
.scrollable-300 { max-height: 300px; overflow-y: auto; }

/* ===== Margin Left Utilities ===== */
.ml-4 { margin-left: var(--space-lg); }
.ml-5 { margin-left: var(--space-xl); }

/* ===== Empty State Box — Dashed border placeholder ===== */
.empty-state-box {
    background: var(--bg-card-alt);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl);
}

:root[data-theme="dark"] .empty-state-box {
    background: var(--bg-card-alt);
}

/* ===== Text Tertiary — Lighter muted text ===== */
.text-tertiary { color: #999; }

:root[data-theme="dark"] .text-tertiary {
    color: var(--text-muted);
}

/* ===== Stat Value Compact — Smaller stat value ===== */
.stat-value-compact { font-size: var(--font-size-2xl); }

/* ===== Border Top Separator — Light top border with padding ===== */
.border-top-separator {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color-light);
}

/* ===== Icon Sizes ===== */
.icon-3xl { font-size: 3rem; }

/* ===== Note Box — Muted background info block ===== */
.note-box {
    background: var(--bg-card-alt);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
}

:root[data-theme="dark"] .note-box {
    background: var(--bg-card-alt);
}

/* ===== Callout List — Indented list in callouts ===== */
.callout-list {
    margin: var(--space-sm) 0 0 var(--space-lg);
}

/* ===== Button Sync — Sync button with brand color ===== */
.btn-sync {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

/* ===== Spinner Centered ===== */
.spinner-centered { margin: var(--space-xl) auto; }

/* ===== Inline Display ===== */
.inline-display { display: inline; }

/* ===== Form Section Card — White card with shadow ===== */
.form-section-card {
    background: var(--bg-card);
    padding: var(--space-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .form-section-card {
    background: var(--bg-card);
}

/* ===== Application Rules Section Header ===== */
.section-heading-spaced {
    margin: var(--space-lg) 0 var(--space-md) 0;
}

/* ===== Preview Container — Muted background preview block ===== */
.preview-container {
    background: var(--bg-card-alt);
    padding: var(--space-md);
    border-radius: var(--border-radius-lg);
    margin: var(--space-lg) 0;
}

:root[data-theme="dark"] .preview-container {
    background: var(--bg-card-alt);
}

/* ===== Text Decoration ===== */
.text-decoration-none { text-decoration: none; }

/* ===== Button Icon Action — borderless icon button for table actions ===== */
.btn-icon-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
}

/* ===== Width: 50px ===== */
.w-50 { width: 50px; }

/* ===== Max Width: 300px ===== */
.max-w-300 { max-width: 300px; }

/* ===== Competition Type Colors ===== */
.color-cl { color: #003399; }
.color-el { color: #ff6600; }
.color-ecl { color: #009900; }

/* ===== Pre-formatted Code Block ===== */
.pre-code {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

/* ===== Authentication Page Components ===== */
.auth-container {
    max-width: 500px;
    margin: 4rem auto;
    padding: 2rem;
}

.auth-card {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.auth-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
}

.auth-subtitle {
    color: #666;
    margin: 0;
}

.auth-error-banner {
    background: #dc3545;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-form-group {
    margin-bottom: 1.5rem;
}

.auth-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.auth-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}

.auth-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
    border-radius: 8px;
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-back-link {
    color: #666;
    text-decoration: none;
    font-size: 0.875rem;
}

/* ===== Color: Primary Blue ===== */
.text-primary-blue { color: #007bff; }

/* ===== Table Cell Center + Padding ===== */
.td-center-padded {
    text-align: center;
    padding: 0.5rem;
}

/* ===== Width Utilities (additional) ===== */
.w-160 { width: 160px; }

/* ===== Min Width Utilities (additional) ===== */
.min-w-40 { min-width: 40px; }

/* ===== Filter Form — Background box for filter controls ===== */
.filter-form {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-card-alt);
    border-radius: var(--border-radius-lg);
}

/* ===== Filter Grid — Auto-fit grid for filter fields ===== */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

/* ===== Form Label — Block label with spacing and weight ===== */
.form-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

/* ===== Pagination Footer — Bottom bar with border-top ===== */
.pagination-footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Display Inline ===== */
.d-inline { display: inline; }

/* ===== Inline Toast — Fixed-position success/error toast ===== */
.toast-inline-success {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10000;
}

/* ===== Inline Style Replacement Utilities ===== */

.checkbox-size-lg { width: 18px; height: 18px; }
.flag-inline { width: 20px; height: 14px; margin-right: 0.4rem; vertical-align: middle; }
.form-card { background: #fff; padding: 2rem; border-radius: 8px; margin-top: 1rem; max-width: 800px; }
.form-textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; line-height: 1.6; }
.resize-y { resize: vertical; font-family: inherit; }
.text-6xl { font-size: 6rem; }
.login-link { color: #8B0000; font-size: 0.9rem; }
.form-actions-separator { padding-top: 1.5rem; border-top: 1px solid #ddd; }
.min-w-300 { min-width: 300px; }
.btn-sm-action { font-size: 0.85rem; padding: 0.35rem 0.75rem; }
.btn-xs-action { font-size: 0.8rem; padding: 0.3rem 0.75rem; }
.btn-xxs-action { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
.modal-dialog-lg { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); min-width: 500px; max-width: 800px; max-height: 90vh; overflow-y: auto; }
.modal-dialog-md { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); min-width: 500px; max-width: 600px; }
.modal-close-inline { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; }
.modal-error-box { background: #f8d7da; color: #721c24; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.perm-description { margin: 0.25rem 0 0.75rem; }
.inline-form { display: inline; }
.euro-stat-primary { color: #007bff; }
.euro-stat-success { color: #28a745; }
.euro-stat-warning { color: #ffc107; }
.euro-stat-danger { color: #dc3545; }
.euro-winner-icon { color: #ffd700; font-size: 1.1rem; }
.euro-winner-text { font-weight: bold; color: #ffd700; }
.empty-state-dashed { text-align: center; padding: 3rem; color: #6c757d; border: 2px dashed #dee2e6; border-radius: 8px; }
.empty-state-dashed-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state-dashed-text { font-size: 1.1rem; }
.loading-placeholder { text-align: center; color: #adb5bd; padding: 1rem; }
.empty-placeholder { text-align: center; color: #adb5bd; font-size: 0.85rem; padding: 0.5rem; }
.section-icon-lg { font-size: 1.3rem; }
.scrape-label { font-size: 0.75rem; color: #6c757d; display: block; margin-bottom: 0.15rem; }
.scrape-hint { font-size: 0.7rem; color: #adb5bd; margin-top: 0.25rem; }
.bench-label { color: #adb5bd; }
.match-count-label { font-weight: normal; font-size: 0.8rem; color: #6c757d; }
.gap-075 { gap: 0.75rem; }
.docs-sidebar-separator { border-top: 1px solid #e9ecef; margin-top: 1rem; padding-top: 1rem; }
.opacity-half { opacity: 0.5; }
.mt-15px { margin-top: 15px; }

/* ===== Stat Card Gradient Variants ===== */
.stat-card-gradient-brand { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.stat-card-gradient-brand h3 { color: #fff; }
.stat-card-gradient-pink { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: #fff; }
.stat-card-gradient-pink h3 { color: #fff; }
.stat-card-gradient-green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: #fff; }
.stat-card-gradient-green h3 { color: #fff; }
.stat-card-gradient-warm { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #fff; }
.stat-card-gradient-warm h3 { color: #fff; }

/* ===== Badge Gradient Brand ===== */
.badge-gradient-brand {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* ===== Solid Badge Variants — White text on solid color ===== */
.badge-solid-success { background: var(--color-success); color: #fff; }
.badge-solid-warning { background: var(--color-warning); color: #000; }
.badge-solid-danger { background: var(--color-danger); color: #fff; }

/* ===== Percentage Width Utilities ===== */
.w-24pct { width: 24%; }
.w-38pct { width: 38%; }

/* ===== Page Info Padding ===== */
.px-page-info { padding: 0 1rem; }

/* ===== Additional Max Width Utilities ===== */
.max-w-700 { max-width: 700px; }
.max-w-1000 { max-width: 1000px; }

/* ===== Additional Margin Utilities ===== */
.my-4 { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

/* ===== Player Photo Styles ===== */
.photo-img {
    width: 200px;
    height: 250px;
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-lg);
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 250px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--border-radius-lg);
}

/* ===== Loading Overlay ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

/* ===== Crop Container ===== */
.crop-container {
    max-height: 400px;
    overflow: hidden;
}

/* ===== Photo Search Results Grid ===== */
.photo-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-md);
}

/* ===== Link Primary (no underline, primary color) ===== */
.link-primary {
    text-decoration: none;
    color: var(--color-primary);
}

.link-primary:hover {
    text-decoration: underline;
}

/* ===== Grid 2 Equal Columns ===== */
.grid-2-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

/* ===== Table Border Accent (right separator) ===== */
.border-right-accent {
    border-right: 2px solid var(--border-color);
}

/* ===== Table Header Gradient (purple - home club) ===== */
.th-gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* ===== Table Header Gradient (green - totals) ===== */
.th-gradient-green {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    color: white;
}

/* ===== Form Description Text ===== */
.form-desc {
    margin: 0.25rem 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== Input Value Display (right-aligned number input) ===== */
.input-value-display {
    width: 200px;
    padding: var(--space-sm);
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    text-align: right;
}

/* ===== Preview Box ===== */
.preview-box {
    margin-top: var(--space-sm);
    padding: 0.75rem;
    background: var(--bg-card-alt);
    border-radius: var(--border-radius-sm);
}

/* ===== Backdate Details Box ===== */
.backdate-details {
    background: var(--color-warning-bg);
    padding: var(--space-md);
    border-radius: var(--border-radius-sm);
    margin: var(--space-md) 0;
}

/* ===== Player Edit Grid ===== */
.player-edit-grid {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: var(--space-xl);
    max-width: 1000px;
}

/* ===== Gap 0.75rem ===== */
.gap-sm-md { gap: 0.75rem; }

/* ===== Separator Styled (with light border) ===== */
.separator-light {
    margin: var(--space-lg) 0;
    border: 0;
    border-top: 1px solid var(--border-color-light);
}

/* ===== Button Padding Large ===== */
.btn-pad-lg { padding: 0.75rem 1.5rem; }