/**
 * Verleihverwaltung - Custom Styles
 */

:root {
    --brand-primary: #1e87f0;
    --brand-secondary: #32d296;
    --brand-accent: #faa05a;
    --brand-danger: #f0506e;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Navigation */
.uk-navbar-container { position: sticky; top: 0; z-index: 980; }
.uk-navbar-nav > li.uk-active > a { color: var(--brand-primary); border-bottom: 2px solid var(--brand-primary); }

/* Stats */
.stat-card { text-align: center; padding: 30px 20px; }
.stat-card .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--brand-primary); line-height: 1; margin-bottom: 10px; }
.stat-card .stat-label { font-size: 0.875rem; color: #666; text-transform: uppercase; }
.stat-card.warning .stat-value { color: var(--brand-accent); }
.stat-card.danger .stat-value { color: var(--brand-danger); }
.stat-card.success .stat-value { color: var(--brand-secondary); }

/* Status Badges */
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 3px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.status-badge.active { background: rgba(50,210,150,.15); color: #32d296; }
.status-badge.reserved { background: rgba(30,135,240,.15); color: #1e87f0; }
.status-badge.overdue { background: rgba(240,80,110,.15); color: #f0506e; }
.status-badge.returned { background: rgba(102,102,102,.15); color: #666; }

/* Forms */
.uk-form-label { font-weight: 500; margin-bottom: 5px; }
.uk-form-label.required::after { content: ' *'; color: var(--brand-danger); }
.error-message { color: var(--brand-danger); font-size: 0.8rem; margin-top: 5px; }

/* Buttons */
.uk-button { border-radius: 3px; font-weight: 500; }
.uk-button-primary { background: var(--brand-primary); }
.uk-button-secondary { background: var(--brand-secondary); color: #fff; }

/* Responsive */
@media (max-width: 639px) {
    .stat-card .stat-value { font-size: 1.5rem; }
}

/* Print */
@media print {
    .uk-navbar-container, footer, .no-print { display: none !important; }
}

/* Loading */
.loading { display: inline-block; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid var(--brand-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }