/* ==========================================================================
   ClubHub Enterprise Design System & Visual Theme
   Tailored for Sports Clubs, Academies & ERP Integration
   ========================================================================== */

:root {
    /* Color Palette */
    --ch-primary: #4f46e5;         /* Indigo primary accent */
    --ch-primary-hover: #4338ca;
    --ch-primary-light: #eeef2;
    --ch-primary-bg: #eef2ff;
    
    --ch-sidebar-bg: #2c7cd6;         /* Friendly SaaS blue sidebar */
    --ch-sidebar-bg-deep: #2568bd;    /* subtle bottom gradient stop */
    --ch-sidebar-active: rgba(255, 255, 255, 0.18);
    --ch-sidebar-hover: rgba(255, 255, 255, 0.10);
    --ch-sidebar-text: rgba(255, 255, 255, 0.85);
    --ch-sidebar-text-active: #ffffff;
    --ch-sidebar-border: rgba(255, 255, 255, 0.16);
    --ch-topbar-bg: #ffffff;
    
    --ch-bg: #f8fafc;
    --ch-surface: #ffffff;
    --ch-border: #e2e8f0;
    --ch-border-light: #f1f5f9;
    
    --ch-text-primary: #0f172a;
    --ch-text-secondary: #475569;
    --ch-text-muted: #94a3b8;
    
    /* State Colors */
    --ch-success-bg: #ecfdf5;
    --ch-success-text: #047857;
    --ch-success-border: #a7f3d0;
    
    --ch-warning-bg: #fffbeb;
    --ch-warning-text: #b45309;
    --ch-warning-border: #fde68a;
    
    --ch-danger-bg: #fef2f2;
    --ch-danger-text: #b91c1c;
    --ch-danger-border: #fecaca;
    
    --ch-info-bg: #f0f9ff;
    --ch-info-text: #0369a1;
    --ch-info-border: #bae6fd;
    
    --ch-purple-bg: #faf5ff;
    --ch-purple-text: #6b21a8;
    --ch-purple-border: #e9d5ff;

    /* Radii & Shadows */
    --ch-radius-sm: 6px;
    --ch-radius-md: 10px;
    --ch-radius-lg: 14px;
    --ch-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --ch-shadow-md: 0 4px 10px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --ch-shadow-lg: 0 12px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--ch-bg);
    color: var(--ch-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   Shell & Layout Structure
   ========================================================================== */

.ch-app-shell {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* Main Content Area */
.ch-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Hamburger + slide-out navigation */
.ch-hamburger-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--ch-radius-md);
    background: transparent;
    color: var(--ch-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.ch-hamburger-btn:hover {
    background-color: #f1f5f9;
    color: var(--ch-primary);
}

.ch-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 40;
    animation: ch-fade-in 0.18s ease;
}

.ch-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 88vw;
    background-color: var(--ch-sidebar-bg);
    background-image: linear-gradient(180deg, var(--ch-sidebar-bg) 0%, var(--ch-sidebar-bg-deep) 100%);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: none;
    padding: 0;
}

.ch-nav-drawer.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.35);
}

/* Desktop: постојана странична лента (како во ERP) — дел од layout-от, не overlay преку содржината. */
@media (min-width: 992px) {
    .ch-hamburger-btn {
        display: none;
    }

    .ch-nav-drawer {
        position: relative;
        flex-shrink: 0;
        transform: none;
        box-shadow: none;
    }

    .ch-nav-drawer.is-open {
        box-shadow: none;
    }

    .ch-nav-close-btn {
        display: none;
    }

    /* Backdrop-от е за mobile toggle-overlay — на desktop менито е постојан push-елемент
       од flex layout-от (не overlay), значи никогаш не смее да го затемни/блокира остатокот. */
    .ch-nav-backdrop {
        display: none;
    }
}

.ch-nav-drawer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1rem 1.1rem 1.15rem;
    border-bottom: 1px solid var(--ch-sidebar-border);
}

.ch-sidebar-logo {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: var(--ch-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-bottom: 0;
}

.ch-nav-drawer-brand {
    flex: 1;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.ch-nav-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ch-radius-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
}

.ch-nav-close-btn:hover {
    background: var(--ch-sidebar-hover);
    color: #fff;
}

.ch-nav-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    flex: 1;
    overflow-y: auto;
}

.ch-nav-drawer-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    color: var(--ch-sidebar-text);
    text-decoration: none;
    border-radius: var(--ch-radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.ch-nav-drawer-link i {
    font-size: 1.15rem;
    width: 1.25rem;
    text-align: center;
}

.ch-nav-drawer-link:hover {
    color: var(--ch-sidebar-text-active);
    background-color: var(--ch-sidebar-hover);
}

.ch-nav-drawer-link.active {
    color: var(--ch-sidebar-text-active);
    background-color: var(--ch-sidebar-active);
    box-shadow: none;
}

.ch-nav-drawer-bottom {
    padding: 0.75rem;
    border-top: 1px solid var(--ch-sidebar-border);
    margin-top: auto;
}

@keyframes ch-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Икона што се врти додека трае вчитување (копчиња „Освежи" на /billing). */
.ch-spin {
    display: inline-block;
    animation: ch-spin 0.9s linear infinite;
}

@keyframes ch-spin {
    to { transform: rotate(360deg); }
}

/* Top Header Bar */
.ch-topbar {
    height: 64px;
    background-color: var(--ch-topbar-bg);
    border-bottom: 1px solid var(--ch-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem 0 0.85rem;
    z-index: 10;
    box-shadow: var(--ch-shadow-sm);
    gap: 1rem;
}

.ch-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.ch-topbar-brand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ch-topbar-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.ch-topbar-brand-text {
    font-weight: 800;
    font-size: 1rem;
    color: var(--ch-text-primary);
    letter-spacing: -0.02em;
}

@media (min-width: 900px) {
    .ch-topbar-brand {
        display: inline-flex;
    }
}

.ch-search-box {
    position: relative;
    width: 360px;
    max-width: 100%;
}

.ch-search-box input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid var(--ch-border);
    border-radius: 20px;
    background-color: #f8fafc;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s ease;
}

.ch-search-box input:focus {
    background-color: #ffffff;
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.ch-search-box .bi-search {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ch-text-muted);
}

.ch-club-chip {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ch-text-muted);
    padding: 0.25rem 0.6rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.ch-club-chip span {
    color: var(--ch-primary);
}

.ch-erp-sim-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
    padding: 0.25rem 0.55rem;
    background: #fffbeb;
    border-radius: 6px;
    border: 1px solid #fde68a;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ch-erp-live-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #047857;
    padding: 0.25rem 0.55rem;
    background: #ecfdf5;
    border-radius: 6px;
    border: 1px solid #a7f3d0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

@media (max-width: 720px) {
    .ch-search-box {
        display: none;
    }

    .ch-club-chip {
        display: none;
    }
}

.ch-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ch-topbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ch-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ch-topbar-icon-btn:hover {
    background-color: #f1f5f9;
    color: var(--ch-text-primary);
}

.ch-notif-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--ch-danger-text);
    border-radius: 50%;
}

.ch-user-profile-menu {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background-color: #f8fafc;
    border: 1px solid var(--ch-border);
}

.ch-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ch-user-meta {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.ch-user-name {
    font-weight: 700;
    font-size: 0.85rem;
}

.ch-user-role {
    font-size: 0.725rem;
    color: #64748b;
}

.ch-user-chevron {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 0.25rem;
}

@media (max-width: 560px) {
    .ch-user-meta,
    .ch-user-chevron {
        display: none;
    }
}

/* Page Content Body */
.ch-content-body {
    flex: 1;
    padding: 1.75rem 2rem;
    overflow-y: auto;
}


/* ==========================================================================
   ClubHub Modern Member Profile Header Banner
   ========================================================================== */

.ch-profile-banner {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    border-radius: var(--ch-radius-lg);
    padding: 1.75rem 2rem 1.25rem 2rem;
    color: #ffffff;
    box-shadow: var(--ch-shadow-md);
    margin-bottom: 1.75rem;
    position: relative;
}

.ch-banner-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ch-banner-avatar-wrapper {
    position: relative;
}

.ch-banner-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--ch-shadow-lg);
}

.ch-banner-online-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background-color: #10b981;
    border: 3px solid #ffffff;
    border-radius: 50%;
}

.ch-banner-details {
    flex: 1;
    min-width: 260px;
}

.ch-banner-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.ch-banner-name {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.ch-banner-meta {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: #c7d2fe;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.ch-banner-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ch-banner-actions {
    display: flex;
    gap: 0.6rem;
    align-self: flex-start;
}

.ch-banner-nav {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 0.75rem;
    overflow-x: auto;
}

.ch-banner-nav-link {
    color: #c7d2fe;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: var(--ch-radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ch-banner-nav-link:hover,
.ch-banner-nav-link.active {
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* ==========================================================================
   Widgets Grid & Card Components
   ========================================================================== */

.ch-widgets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .ch-widgets-grid {
        grid-template-columns: 1fr;
    }
}

.ch-card {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    box-shadow: var(--ch-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.ch-card:hover {
    box-shadow: var(--ch-shadow-md);
}

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

.ch-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ch-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ch-card-title-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--ch-primary-bg);
    color: var(--ch-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.ch-card-body {
    padding: 1.25rem;
    flex: 1;
}

.ch-card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f8fafc;
    border-top: 1px solid var(--ch-border-light);
    display: flex;
    justify-content: flex-end;
}

/* Badges & Status Pills */
.ch-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

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

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

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

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

.ch-badge-purple {
    background-color: var(--ch-purple-bg);
    color: var(--ch-purple-text);
    border: 1px solid var(--ch-purple-border);
}

/* Alert Banner Component */
.ch-alert-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ch-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--ch-radius-md);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
}

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

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

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

.ch-alert-icon {
    font-size: 1.1rem;
    margin-top: 2px;
}

.ch-alert-body {
    flex: 1;
}

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

.ch-guardian-picked {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--ch-info-bg);
    color: var(--ch-info-text);
    border: 1px solid var(--ch-info-border);
    border-radius: var(--ch-radius-md);
    font-size: 0.85rem;
}

.ch-guardian-hit {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.15rem 0;
}

.ch-guardian-hit-meta {
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

/* Key-Value Details Grid */
.ch-details-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.875rem;
}

.ch-details-label {
    color: var(--ch-text-secondary);
    font-weight: 600;
}

.ch-details-value {
    color: var(--ch-text-primary);
}

.ch-group-sub-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.ch-group-sub-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ch-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ch-group-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    border: 1px solid var(--ch-border-light, #e2e8f0);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
}

.ch-group-sub-meta {
    font-size: 0.8rem;
    color: var(--ch-text-muted, #64748b);
    margin-top: 0.15rem;
}

.ch-group-sub-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Family Members List */
.ch-family-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--ch-border-light);
}

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

.ch-family-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #cbd5e1;
}

.ch-family-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ch-family-name {
    font-weight: 600;
    color: var(--ch-text-primary);
}

.ch-family-contact {
    font-size: 0.8rem;
    color: var(--ch-text-muted);
}

/* Progress Bar Component */
.ch-progress-container {
    width: 100%;
    background-color: #e2e8f0;
    border-radius: 10px;
    height: 10px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.ch-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #4f46e5);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Activity Tab Component */
.ch-tab-header {
    display: flex;
    border-bottom: 2px solid var(--ch-border);
    gap: 1rem;
    margin-bottom: 1rem;
}

.ch-tab-button {
    background: none;
    border: none;
    padding: 0.6rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ch-text-secondary);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ch-tab-button.active {
    color: var(--ch-primary);
}

.ch-tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--ch-primary);
}

.ch-tab-count {
    background-color: var(--ch-primary-bg);
    color: var(--ch-primary);
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

/* Note Activity Feed */
.ch-note-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ch-border-light);
}

.ch-note-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.ch-note-content {
    flex: 1;
}

.ch-note-author {
    font-weight: 600;
    font-size: 0.85rem;
}

.ch-note-date {
    font-size: 0.75rem;
    color: var(--ch-text-muted);
    margin-left: 0.5rem;
}

.ch-note-text {
    font-size: 0.85rem;
    color: var(--ch-text-secondary);
    margin-top: 0.25rem;
}

/* Buttons & Links */
.ch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--ch-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}

.ch-btn-primary {
    background-color: var(--ch-primary);
    color: #ffffff;
}

.ch-btn-primary:hover {
    background-color: var(--ch-primary-hover);
}

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

.ch-btn-outline:hover {
    background-color: #f8fafc;
    border-color: var(--ch-text-muted);
}

.ch-btn-outline.active {
    background-color: var(--ch-primary-bg);
    border-color: var(--ch-primary);
    color: var(--ch-primary);
}

.ch-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.ch-link {
    color: var(--ch-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

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

.ch-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    font-size: 0.875rem;
    background: #fff;
    color: var(--ch-text-primary);
}

.ch-form-input:focus {
    outline: none;
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.ch-validation-summary {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--ch-radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.ch-validation-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* ── Login ───────────────────────────────────────────────── */
.ch-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(79, 70, 229, 0.12), transparent),
        radial-gradient(ellipse 60% 40% at 90% 100%, rgba(14, 165, 233, 0.1), transparent),
        #f8fafc;
}

.ch-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
}

.ch-login-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ch-login-brand i {
    font-size: 2rem;
    color: var(--ch-primary);
}

.ch-login-brand h1 {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.5rem;
}

.ch-login-brand p {
    margin: 0;
    color: #64748b;
    font-size: 0.875rem;
}

.ch-login-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.ch-login-links {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ch-border);
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
}

.ch-login-links span {
    display: block;
    margin-bottom: 0.35rem;
}

.ch-login-links a {
    color: var(--ch-primary);
    text-decoration: none;
    font-weight: 600;
}

.ch-login-links a:hover {
    text-decoration: underline;
}

.ch-login-links-sep {
    display: inline !important;
    margin: 0 0.35rem;
    color: #94a3b8;
}

/* Goran G3 member workspace: list next to the nav, detail on the right */
.ch-content-body:has(.ch-workspace) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ch-workspace {
    --g3-primary: #0d6efd;
    --g3-primary-hover: #0b5ed7;
    --g3-primary-soft: #e7f1ff;
    --g3-border: #e3e8ef;
    --g3-bg: #f3f6fb;
    --g3-text: #212529;
    --g3-muted: #6c757d;
    --g3-radius: 4px;
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 64px);
    background: var(--g3-bg);
    color: var(--g3-text);
}

.ch-workspace-frame {
    order: 2;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.15rem 1.35rem 2rem;
    background: #fff;
}

.ch-workspace-list {
    order: 1;
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--g3-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ch-workspace-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem 0.45rem;
}

.ch-workspace-list-title {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.ch-workspace-list-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--g3-text);
}

.ch-workspace-list-title span {
    font-size: 0.75rem;
    color: var(--g3-muted);
}

.ch-workspace-list-actions {
    display: flex;
    gap: 0.3rem;
}

.ch-workspace-list-actions .ch-btn-sm {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--g3-radius);
}

.ch-workspace-list-actions .ch-btn-primary {
    background: var(--g3-primary);
}

.ch-workspace-list-actions .ch-btn-primary:hover {
    background: var(--g3-primary-hover);
}

.ch-workspace-search {
    position: relative;
    margin: 0 0.75rem 0.45rem;
}

.ch-workspace-search i {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g3-muted);
    font-size: 0.8rem;
}

.ch-workspace-search input {
    width: 100%;
    border: 1px solid var(--g3-border);
    border-radius: var(--g3-radius);
    padding: 0.38rem 0.55rem 0.38rem 1.85rem;
    font: inherit;
    font-size: 0.82rem;
    background: #fff;
    color: var(--g3-text);
}

.ch-workspace-search input:focus {
    outline: none;
    border-color: var(--g3-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* ── Тренерско присуство (мобилно) ── */
.ch-att-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 5rem;
}

.ch-att-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: #fff;
    border: 1px solid var(--g3-border, #e2e8f0);
    border-radius: 10px;
}

.ch-att-ava {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ch-att-ava-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #475569;
    font-weight: 700;
    font-size: 0.8rem;
}

.ch-att-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.92rem;
}

.ch-att-toggles {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.ch-att-toggle {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--g3-border, #e2e8f0);
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

.ch-att-toggle.is-on.is-present { background: #16a34a; border-color: #16a34a; color: #fff; }
.ch-att-toggle.is-on.is-absent  { background: #dc2626; border-color: #dc2626; color: #fff; }
.ch-att-toggle.is-on.is-excused { background: #d97706; border-color: #d97706; color: #fff; }

.ch-att-save {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 0;
    background: linear-gradient(to top, var(--g3-bg, #f8fafc) 70%, transparent);
}

.ch-workspace-groupfilter {
    margin: 0 0.75rem 0.5rem;
}

.ch-workspace-groupfilter .rz-dropdown {
    width: 100%;
    font-size: 0.82rem;
    border-radius: var(--g3-radius);
}

.ch-workspace-filters {
    display: flex;
    gap: 0.15rem;
    padding: 0 0.75rem 0.55rem;
    flex-wrap: wrap;
}

.ch-workspace-filters button {
    border: 0;
    background: transparent;
    color: var(--g3-muted);
    border-radius: var(--g3-radius);
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.ch-workspace-filters button:hover {
    background: #f1f3f5;
    color: var(--g3-text);
}

.ch-workspace-filters button.is-on {
    background: var(--g3-primary-soft);
    color: var(--g3-primary);
    font-weight: 600;
}

.ch-workspace-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.35rem 0.75rem;
}

.ch-workspace-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0;
    cursor: pointer;
    color: inherit;
}

.ch-workspace-item:hover {
    background: #f8f9fa;
}

.ch-workspace-item.is-selected {
    background: var(--g3-primary-soft);
    box-shadow: inset 3px 0 0 var(--g3-primary);
}

.ch-workspace-item img,
.ch-workspace-ava {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ch-workspace-ava {
    display: grid;
    place-items: center;
    background: var(--g3-primary-soft);
    color: var(--g3-primary);
    font-size: 0.68rem;
    font-weight: 700;
}

.ch-workspace-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ch-workspace-item-text strong {
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-workspace-item-text small {
    color: var(--g3-muted);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-workspace-muted {
    margin: 0.75rem;
    color: var(--g3-muted);
    font-size: 0.85rem;
}

.ch-workspace-empty {
    color: var(--g3-muted);
    padding: 2rem;
}

.ch-workspace-empty-card {
    max-width: 420px;
    margin: 3rem auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--g3-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
}

.ch-workspace-empty-card i {
    font-size: 2rem;
    color: var(--g3-primary);
}

.ch-workspace-empty-card h2 {
    margin: 0.75rem 0 0.35rem;
}

.ch-workspace-empty-card p {
    color: var(--g3-muted);
    margin: 0 0 1rem;
}

.ch-workspace .ch-widgets-grid {
    gap: 1rem;
}

.ch-workspace .ch-card {
    border-radius: 6px;
    box-shadow: none;
}

.ch-workspace .ch-card:hover {
    box-shadow: none;
}

.ch-workspace .ch-card-title-icon {
    background: var(--g3-primary-soft);
    color: var(--g3-primary);
    border-radius: var(--g3-radius);
}

.ch-workspace .ch-details-label {
    color: var(--g3-muted);
    font-weight: 500;
}

/* Goran employee header */
.ch-g3-person {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--g3-border, #e3e8ef);
}

.ch-g3-person-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.ch-g3-person-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ch-g3-person-initials {
    display: grid;
    place-items: center;
    background: #e7f1ff;
    color: #0d6efd;
    font-weight: 700;
    font-size: 1.25rem;
}

.ch-g3-person-copy {
    min-width: 0;
}

.ch-g3-person-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ch-g3-person-title h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #212529;
}

.ch-g3-person-role {
    margin: 0.15rem 0 0.35rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.ch-g3-person-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    color: #6c757d;
    font-size: 0.8rem;
}

.ch-g3-person-meta i {
    margin-right: 0.25rem;
}

.ch-g3-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.ch-g3-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
}

.ch-g3-metric small {
    display: block;
    color: #6c757d;
    font-size: 0.72rem;
}

.ch-g3-metric strong {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
}

.ch-g3-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.ch-g3-metric-icon.is-blue {
    background: #e7f1ff;
    color: #0d6efd;
}

.ch-g3-metric-icon.is-green {
    background: #e8f6ee;
    color: #198754;
}

.ch-g3-metric-icon.is-orange {
    background: #fff3e8;
    color: #fd7e14;
}

.ch-g3-tabs .rz-tabview {
    margin-top: 0.15rem;
}

.ch-g3-tabs .rz-tabview-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.3rem;
    border: 1px solid #e3e8ef !important;
    border-bottom: 1px solid #e3e8ef !important;
    border-radius: 8px;
    background: #e8eef5 !important;
    overflow-x: auto;
    height: auto !important;
}

.ch-g3-tabs .rz-tabview-nav li {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    border: 0 !important;
}

.ch-g3-tabs .rz-tabview-nav li a {
    display: inline-flex !important;
    align-items: center;
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 0.5rem 0.9rem !important;
    white-space: nowrap !important;
}

.ch-g3-tabs .rz-tabview-nav li a:hover {
    background: #e2e8f0 !important;
    color: #334155 !important;
}

.ch-g3-tabs .rz-tabview-title {
    white-space: nowrap !important;
}

.ch-g3-tabs .rz-tabview-nav li.rz-tabview-selected a {
    background: #fff !important;
    color: #0d6efd !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.ch-g3-tabs .rz-tabview-panels {
    padding: 1rem 0 0 !important;
    background: transparent !important;
    border: 0 !important;
}

@media (max-width: 900px) {
    .ch-workspace {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 64px);
    }

    .ch-workspace-frame {
        order: 2;
    }

    .ch-workspace-list {
        order: 1;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--g3-border);
        max-height: 280px;
    }

    .ch-g3-metrics {
        grid-template-columns: 1fr;
    }
}


/* ── Финансиски (бројчани) колони — ERP „Картица на коминтент" ──────────────
   Radzen порамнува десно преку `th.rz-text-align-right`, но `TextAlign` во 5.9.9
   му става само inline стил на ќелијата со податок — заглавието останува лево и
   колоната изгледа искривено. `.rz-column-title` е `display:inline-flex; width:100%`,
   па се води по `justify-content`, не по `text-align`. `ch-num` ги фаќа сите три
   реда на колоната (заглавие / податок / подножје) за да читаат како една колона.
   `tabular-nums` ги држи цифрите со еднаква ширина за да се порамнат вертикално. */
.rz-grid-table thead th.ch-num .rz-column-title {
    justify-content: right;
    /* `th` има `padding: 0` — целото хоризонтално растојание го носи `.rz-column-title`,
       кое стандардно е `padding-inline: 1rem 0`, значи ДЕСНО 0. Ќелијата со податок пак
       има `padding: 0.625rem 1rem`, значи десно 1rem. Затоа заглавието стоеше точно 1rem
       подесно од бројот под него. Го изедначуваме десното растојание со тоа на ќелијата. */
    padding-inline-end: 1rem;
}

/* Истото за compact густина, каде Radzen ја намалува ќелијата на `0.25rem 0.5rem`. */
.rz-data-grid.rz-density-compact .rz-grid-table thead th.ch-num .rz-column-title {
    padding-inline-end: 0.5rem;
}

.rz-grid-table th.ch-num,
.rz-grid-table td.ch-num,
.ch-num .rz-cell-data {
    text-align: right;
}

/* Цифрите се поставуваат на ниво на целата картица, па се наследуваат од секоја
   ќелија — заглавие, податоци И редот „Вкупно" — без да зависат од тоа до кој
   елемент стигнуваат `CssClass`/`FooterCssClass` во оваа верзија на Radzen.
   Без ова подножјето рендерира со пропорционални цифри, па „2.000,00" во
   „Вкупно" не се поклопува со „2.000,00" во редот над него иако двата се
   порамнети десно. */
.ch-erp-card-grid {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Подножјето го дели истиот `padding` со ќелиите со податоци (двете се `td`),
   па десното растојание веќе се совпаѓа — треба само истото порамнување. */
.ch-erp-card-grid .rz-grid-table tfoot td.ch-num {
    text-align: right;
}

/* ==========================================================================
   Календар на тренинзи (RadzenScheduler)
   ========================================================================== */
.ch-cal-wrap {
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    padding: 0.5rem;
}

.ch-cal-appt {
    line-height: 1.25;
    overflow: hidden;
}

.ch-cal-appt-title {
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-cal-appt-meta {
    font-size: 0.72rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Месечен поглед: Radzen ја фиксира висината на 1.5em и го реди истиот чекор (inset-block-start).
   Поголем font-size на .rz-event ги зголемува и висината и растојанието (и двете се em),
   па насловот и времето се читаат, а соседните термини не се преклопуваат. */
.rz-scheduler .rz-month-view .rz-week {
    min-height: 8.5rem;
    overflow: hidden;
}

.rz-scheduler .rz-month-view .rz-event {
    font-size: 1.65rem;
}

.rz-scheduler .rz-month-view .rz-event-content {
    overflow: hidden;
    padding: 1px 6px;
}

.rz-scheduler .rz-month-view .ch-cal-appt {
    height: 100%;
    line-height: 1.15;
}

.rz-scheduler .rz-month-view .ch-cal-appt-title {
    font-size: 0.85rem;
}

.rz-scheduler .rz-month-view .ch-cal-appt-meta {
    font-size: 0.74rem;
}

.rz-scheduler .rz-month-view .rz-event-list-btn {
    top: auto !important;
    bottom: 2px;
    font-size: 0.72rem;
    z-index: 3;
}

.ch-cal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

.ch-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.75rem 0.25rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--ch-border-light);
}

.ch-cal-legend-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.ch-cal-legend-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ch-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ch-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--ch-text-secondary);
}

.ch-cal-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
}

/* ==========================================================================
   Staff Dashboard (Home.razor) — KPI tiles, alert strips, compact widgets
   ========================================================================== */

.ch-dash-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.ch-dash-head h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ch-dash-head-sub {
    margin: 0;
    color: var(--ch-text-secondary);
    font-size: 0.875rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ch-dash-head-sub i { color: var(--ch-text-muted); margin-right: 0.3rem; }

.ch-dash-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Alert strips (pending applications, ERP failures) */
.ch-dash-strips {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.ch-dash-strip {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-radius: var(--ch-radius-md);
    border: 1px solid;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ch-dash-strip:hover { box-shadow: var(--ch-shadow-md); transform: translateY(-1px); }

.ch-dash-strip-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ch-dash-strip-body { flex: 1; min-width: 0; }
.ch-dash-strip-body strong { display: block; font-size: 0.925rem; }
.ch-dash-strip-body span { font-size: 0.8rem; opacity: 0.85; }
.ch-dash-strip-cta { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

.ch-dash-strip-warning {
    background: var(--ch-warning-bg);
    border-color: var(--ch-warning-border);
    color: var(--ch-warning-text);
}
.ch-dash-strip-warning .ch-dash-strip-icon { background: #fde68a; color: #92400e; }

.ch-dash-strip-danger {
    background: var(--ch-danger-bg);
    border-color: var(--ch-danger-border);
    color: var(--ch-danger-text);
}
.ch-dash-strip-danger .ch-dash-strip-icon { background: #fecaca; color: #991b1b; }

/* KPI tiles */
.ch-dash-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ch-dash-kpi {
    position: relative;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    box-shadow: var(--ch-shadow-sm);
    padding: 1.05rem 3.75rem 1rem 1.15rem;
    min-height: 112px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.ch-dash-kpi:hover { box-shadow: var(--ch-shadow-md); transform: translateY(-2px); }

.ch-dash-kpi-icon {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 6px 12px -4px rgba(67, 56, 202, 0.45);
}

.ch-dash-kpi-label {
    font-size: 0.72rem;
    color: var(--ch-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0 0 0.45rem;
}

.ch-dash-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0;
    color: var(--ch-text-primary);
}

.ch-dash-kpi-value small { font-size: 0.85rem; font-weight: 600; color: var(--ch-text-muted); margin-left: 0.25rem; letter-spacing: 0; }

.ch-dash-kpi-sub {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--ch-text-muted);
}

.ch-dash-kpi.is-ok .ch-dash-kpi-icon { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 6px 12px -4px rgba(5, 150, 105, 0.45); }
.ch-dash-kpi.is-warn .ch-dash-kpi-icon { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 12px -4px rgba(217, 119, 6, 0.45); }
.ch-dash-kpi.is-alert .ch-dash-kpi-icon { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 6px 12px -4px rgba(220, 38, 38, 0.45); }
.ch-dash-kpi.is-info .ch-dash-kpi-icon { background: linear-gradient(135deg, #38bdf8, #0284c7); box-shadow: 0 6px 12px -4px rgba(2, 132, 199, 0.45); }
.ch-dash-kpi.is-alert .ch-dash-kpi-value { color: var(--ch-danger-text); }
.ch-dash-kpi.is-warn .ch-dash-kpi-value { color: var(--ch-warning-text); }

/* Widget grid */
.ch-dash-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.ch-dash-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Compact list rows inside cards */
.ch-dash-list { display: flex; flex-direction: column; }

.ch-dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--ch-border-light);
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
}

.ch-dash-row:last-child { border-bottom: none; }
a.ch-dash-row:hover { background: #f8fafc; }

.ch-dash-row-main { flex: 1; min-width: 0; }
.ch-dash-row-main strong { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-dash-row-meta { font-size: 0.78rem; color: var(--ch-text-secondary); }
.ch-dash-row-aside { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; font-size: 0.82rem; }

.ch-dash-time {
    min-width: 52px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    background: var(--ch-primary-bg);
    color: var(--ch-primary);
    flex-shrink: 0;
}

.ch-dash-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ch-primary);
}

.ch-dash-amount { font-weight: 700; white-space: nowrap; }
.ch-dash-amount.is-alert { color: var(--ch-danger-text); }

/* Mini stat cells (organization etc.) */
.ch-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.ch-dash-stat {
    background: #f8fafc;
    border: 1px solid var(--ch-border-light);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    text-decoration: none;
    color: inherit;
}

a.ch-dash-stat:hover { border-color: var(--ch-border); background: #f1f5f9; }
.ch-dash-stat b { display: block; font-size: 1.2rem; letter-spacing: -0.03em; font-weight: 800; }
.ch-dash-stat small { color: var(--ch-text-secondary); font-size: 0.72rem; }

/* Progress bar (collected share) */
.ch-dash-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--ch-border-light);
    overflow: hidden;
    margin-top: 0.9rem;
}

.ch-dash-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #059669);
}

.ch-dash-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ch-text-secondary);
    margin-top: 0.35rem;
}

.ch-dash-empty { color: var(--ch-text-muted); margin: 0; font-size: 0.875rem; }

@media (max-width: 1400px) {
    .ch-dash-kpis { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .ch-dash-grid, .ch-dash-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ch-dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .ch-dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Radzen дијалози (23.09.2026) ───────────────────────────────────────────
   Долго име на клуб („ОДБОЈКАРСКИ КЛУБ ФЛАМИНГО ВОЛЕЈ СПОРТСКО ЗДРУЖЕНИЕ…")
   го растегнуваше `.rz-dropdown` преку ширината на дијалогот → хоризонтален
   скрол и отсечени копчиња. Radzen ги остава контролите со сопствен min-width,
   па flex/grid децата не се собираат. Ова важи за СИТЕ дијалози, не само за
   ценовникот — истиот проблем го имаат и другите со dropdown на клуб. */
.rz-dialog {
    max-width: calc(100vw - 2rem);
}

.rz-dialog-content {
    overflow-x: hidden;
}

.rz-dialog-content .rz-dropdown,
.rz-dialog-content .rz-textbox,
.rz-dialog-content .rz-numeric,
.rz-dialog-content .rz-datepicker,
.rz-dialog-content .rz-autocomplete {
    max-width: 100%;
    min-width: 0;
}

/* Текстот во затворен dropdown се скратува со „…", не го турка полето. */
.rz-dialog-content .rz-dropdown-label,
.rz-dialog-content .rz-inputtext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Отворената листа може да е поширока од полето — таму целото име е читливо. */
.rz-dropdown-panel .rz-dropdown-item {
    white-space: normal;
    word-break: break-word;
}

/* Blazor Server – overlay кога падне SignalR врската (стопиран dev сервер, rebuild, sleep…).
   Без ова е нестилизиран, на англиски (види src/MD/2026-09-25-blazor-reconnect-ui.md). */
#components-reconnect-modal {
    z-index: 2147483000 !important;
    box-sizing: border-box;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-rejoining,
#components-reconnect-modal.show {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(3px);
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-dialog,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-dialog,
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-dialog,
#components-reconnect-modal.components-rejoining .components-reconnect-dialog,
#components-reconnect-modal.components-reconnect-show > div,
#components-reconnect-modal.components-reconnect-failed > div,
#components-reconnect-modal .components-rejoining,
#components-reconnect-modal .components-reconnect-failed {
    max-width: 24rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px;
    background: #fff !important;
    color: var(--ch-text-primary) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: center;
}

#components-reconnect-modal button,
#components-reconnect-modal a.btn {
    font-weight: 600;
    color: var(--ch-primary) !important;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--ch-primary);
    background: #fff;
    cursor: pointer;
}

#components-reconnect-modal button:hover,
#components-reconnect-modal a.btn:hover {
    background: var(--ch-primary-bg);
}

.landing-guide {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0.5rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
}

.landing-guide summary {
    cursor: pointer;
    font-weight: 600;
    color: #0f172a;
}

.landing-guide p { margin: 0.45rem 0 0.2rem; }

.landing-guide ul {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
}

.landing-guide-tokens { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.landing-guide code {
    font-size: 0.72rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0 0.25rem;
}