/* ====================================================================================================
   CREP SHARED STYLES - Zajednički stilovi za izvestaje i tabele
   ====================================================================================================
   Ovaj fajl sadrži zajedničke CSS stilove koji se koriste u više Blazor komponenti.
   Linkuj ga globalno u App.razor ili specifično u komponentama koje ga koriste.
   ==================================================================================================== */

/* ====================================================================================================
   1. PAGE HEADERS
   ==================================================================================================== */

.page-header {
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.15);
}

    .page-header h1 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

/* ====================================================================================================
   2. CARDS & CONTAINERS
   ==================================================================================================== */

.search-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.grid-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

/* ====================================================================================================
   3. SEARCH COMPONENTS
   ==================================================================================================== */

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s;
}

    .search-input:focus {
        outline: none;
        border-color: #2c5aa0;
        box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
    }

.search-button {
    padding: 0.75rem 2rem;
    background: #2c5aa0;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

    .search-button:hover {
        background: #1e3a5f;
    }

/* ====================================================================================================
   4. BUTTONS
   ==================================================================================================== */

.btn-export {
    padding: 0.625rem 1.25rem;
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-export:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.btn-excel:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.btn-pdf:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.action-button {
    padding: 0.5rem 1rem;
    background: #0891b2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

    .action-button:hover {
        background: #0e7490;
        transform: translateY(-1px);
    }

/* ====================================================================================================
   5. STATUS BADGES
   ==================================================================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .status-badge.primary {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-badge.warning {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.info {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-badge.success {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.danger {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-badge.secondary {
        background: #f1f5f9;
        color: #475569;
    }

.code-badge {
    background: #f1f5f9;
    color: #2c5aa0;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ====================================================================================================
   6. TELERIK GRID STYLES
   ==================================================================================================== */

.export-skin {
    border: none;
    font-size: 0.875rem;
}

    .export-skin .k-grid-header {
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
    }

        .export-skin .k-grid-header th {
            padding: 1rem 1.25rem;
            text-align: left;
            font-size: 0.8125rem;
            font-weight: 600;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border: none;
        }

    .export-skin .k-grid-content td {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.875rem;
        color: #1e293b;
        vertical-align: middle;
    }

    .export-skin tbody tr {
        transition: background-color 0.2s;
    }

        .export-skin tbody tr:hover {
            background-color: #f8fafc;
        }

.k-grid-toolbar {
    padding: 1.25rem 1.5rem;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.k-pager {
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

/* ====================================================================================================
   7. LOADING STATES
   ==================================================================================================== */

.loading-container {
    text-align: center;
    padding: 4rem 2rem;
}

.spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid #e2e8f0;
    border-top-color: #2c5aa0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

.loading-text {
    color: #64748b;
    font-size: 0.875rem;
}

/* ====================================================================================================
   8. ALERTS
   ==================================================================================================== */

.alert {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

    .alert i {
        font-size: 1.125rem;
        flex-shrink: 0;
    }

.alert-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0c4a6e;
}

    .alert-info i {
        color: #0891b2;
    }

.alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

    .alert-danger i {
        color: #dc2626;
    }

.alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

    .alert-warning i {
        color: #f59e0b;
    }

.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

    .alert-success i {
        color: #059669;
    }

/* ====================================================================================================
   9. TYPOGRAPHY & UTILITIES
   ==================================================================================================== */

.text-muted {
    color: #64748b;
    font-size: 0.875rem;
}

.ms-auto {
    margin-left: auto;
}

.ellipsis-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .ellipsis-cell:hover {
        overflow: visible;
        white-space: normal;
        word-break: break-word;
    }

/* ====================================================================================================
   10. STATISTICS CARDS
   ==================================================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .stat-card.primary {
        border-left-color: #2c5aa0;
    }

    .stat-card.warning {
        border-left-color: #f59e0b;
    }

    .stat-card.success {
        border-left-color: #059669;
    }

    .stat-card.info {
        border-left-color: #0891b2;
    }

.stat-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stat-card-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

    .stat-card.primary .stat-card-value {
        color: #2c5aa0;
    }

    .stat-card.warning .stat-card-value {
        color: #f59e0b;
    }

    .stat-card.success .stat-card-value {
        color: #059669;
    }

    .stat-card.info .stat-card-value {
        color: #0891b2;
    }

/* ====================================================================================================
   11. RESPONSIVE DESIGN
   ==================================================================================================== */

@media (max-width: 768px) {
    .page-header {
        padding: 1.25rem 1.5rem;
    }

        .page-header h1 {
            font-size: 1.25rem;
        }

    .stat-card-value {
        font-size: 2rem;
    }

    .search-button {
        width: 100%;
        justify-content: center;
    }

    .k-grid-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-export {
        width: 100%;
        justify-content: center;
    }

    .ms-auto {
        margin-left: 0;
        text-align: center;
    }
}