[hidden] { display: none !important; }
.loading-card { text-align: center; padding: 32px 20px; }
.loading-spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid var(--color-border, #dbe3ef); border-top-color: var(--color-primary, #3b82f6); border-radius: 50%; animation: loading-spin .8s linear infinite; margin-bottom: 12px; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.loading-skeleton { height: 52px; max-width: 600px; margin: 14px auto; border-radius: 8px; background: linear-gradient(90deg, var(--color-background, #eef2f7), var(--color-border, #dbe3ef), var(--color-background, #eef2f7)); background-size: 200% 100%; animation: loading-shimmer 1.6s ease-in-out infinite; }
.loading-skeleton-short { max-width: 420px; height: 20px; }
@keyframes loading-shimmer { to { background-position: -200% 0; } }
.navigation-loading { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 20, 35, .5); display: flex; justify-content: center; align-items: center; padding: 20px; }
.navigation-loading-box { width: 100%; max-width: 400px; padding: 28px; border-radius: 12px; background: var(--color-surface, white); color: var(--color-text-main, #1f2937); text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.reports-toolbar { text-align: right; margin: 16px 0; }
.loading-error { text-align: center; }
@media (prefers-reduced-motion: reduce) { .loading-spinner, .loading-skeleton { animation: none; } }

/* Compact employee cabinet */
.app .app-header { flex-direction: row; flex-wrap: nowrap; gap: 12px; margin-bottom: 24px; padding: 12px 16px; }
.app .app-nav { flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; width: auto; margin: 0; gap: 10px; }
.cabinet-welcome { margin-bottom: 28px; }
.cabinet-welcome .page-title { font-size: clamp(22px, 4vw, 28px); line-height: 1.35; margin: 0 0 8px; overflow-wrap: anywhere; }
.cabinet-welcome .page-subtitle { margin: 0; }
.reports-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.reports-heading .section-title { margin: 0; font-size: 20px; }
.reports-heading .btn { padding: 8px 12px; min-height: 44px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.report-card, .report-placeholder { border: 1px solid var(--color-border); border-radius: 12px; padding: 24px; background: var(--color-surface); }
.report-month { font-size: 24px; line-height: 1.3; margin: 0 0 12px; }
.report-project { margin: 0 0 22px; overflow-wrap: anywhere; }
.report-currency { color: var(--color-text-secondary); font-size: 13px; margin-left: 8px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.report-actions .btn { text-transform: none; min-height: 44px; }
.report-archive { margin-top: 28px; }
.loading-card { text-align: left; padding: 0; border: none; background: transparent; box-shadow: none; }
.loading-heading { display: flex; align-items: center; gap: 10px; }
.loading-heading .loading-spinner { width: 22px; height: 22px; margin: 0; flex-shrink: 0; }
.loading-heading .section-title { font-size: 16px; margin: 0; }
#reports-loading-message { color: var(--color-text-secondary); font-size: 14px; margin: 8px 0 16px; }
.report-placeholder { min-height: 200px; }
.report-placeholder .loading-skeleton { margin: 0 0 18px; }
.skeleton-month { width: 60%; height: 28px; }
.skeleton-project { width: 42%; height: 20px; }
.skeleton-button { width: 180px; max-width: 100%; height: 44px; }
@media (max-width: 600px) {
    .app { padding: 16px; }
    .report-card, .report-placeholder { padding: 20px; }
    .report-actions { flex-direction: column; }
    .report-actions .btn { width: 100%; text-align: center; }
}

.brand-logo { display: block; width: 72px; height: auto; border-radius: 8px; }