body { font-family: Verdana, Arial, sans-serif; font-size: 12px; background: #fff; color: #000; margin: 0; padding: 0; }
a { color: #0000cc; }
a:hover { color: #cc0000; }

.navbar { background: #eee; border-bottom: 1px solid #999; padding: 6px 0; font-size: 12px; text-align: center; }
.navbar a { color: #000; text-decoration: none; }
.navbar a:hover { text-decoration: underline; }
.nav-logout { color: #cc0000 !important; }

.container { max-width: 900px; margin: 10px auto; padding: 0 10px; }

.alert { border: 1px solid; padding: 6px 10px; margin-bottom: 10px; font-size: 12px; }
.alert-success { background: #dfd; border-color: #090; }
.alert-error { background: #fdd; border-color: #900; }
.alert-info { background: #def; border-color: #069; }

h1 { font-size: 16px; margin: 10px 0 8px; }
h2 { font-size: 14px; margin: 8px 0 6px; }

.card { border: 1px solid #ccc; padding: 8px 10px; margin-bottom: 10px; background: #fafafa; }
.detail-wrap { text-align: center; }
.card-narrow { display: inline-block; min-width: 350px; text-align: left; }

.login-wrapper { text-align: center; margin-top: 80px; }
.login-box { display: inline-block; text-align: left; width: 300px; }
.login-box h1 { text-align: center; }

.form-group { margin-bottom: 6px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 2px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 3px 4px; border: 1px solid #999; font-size: 12px; font-family: Verdana, Arial, sans-serif; }
.form-group textarea { height: 50px; resize: vertical; }

.btn { display: inline-block; padding: 3px 10px; border: 1px solid #666; background: #e0e0e0; color: #000; font-size: 11px; cursor: pointer; text-decoration: none; font-family: Verdana, Arial, sans-serif; }
.btn:hover { background: #ccc; }
.btn-primary { background: #dde; border-color: #669; }
.btn-success { background: #ded; border-color: #696; }
.btn-danger { background: #edd; border-color: #966; color: #600; }
.btn-block { display: block; width: 100%; text-align: center; }

table { border-collapse: collapse; font-size: 12px; }
th, td { padding: 3px 6px; text-align: left; border: 1px solid #ccc; white-space: nowrap; }
th { background: #e8e8e8; font-weight: bold; }
table.wide { width: 100%; }
table.wide td, table.wide th { white-space: normal; }

.badge { font-size: 10px; padding: 1px 5px; border: 1px solid; }
.badge-success { background: #dfd; border-color: #090; color: #060; }
.badge-danger { background: #fdd; border-color: #900; color: #600; }
.badge-info { background: #def; border-color: #069; color: #036; }

.sip-info { font-family: "Courier New", monospace; background: #f0f0f0; padding: 1px 4px; }

.sip-password { color: transparent; text-shadow: 0 0 6px #000; user-select: none; }
.sip-password:after { content: " [zobrazit]"; font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #069; text-shadow: none; }
.sip-password.revealed { color: inherit; text-shadow: none; user-select: auto; }
.sip-password.revealed:after { content: " [skrýt]"; }

.grid-2 { display: flex; gap: 10px; }
.grid-2 > * { flex: 1; }
.grid-3 { display: flex; gap: 10px; }
.grid-3 > * { flex: 1; }

.mb-1 { margin-bottom: 8px; }
.mt-1 { margin-top: 8px; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.pagination { text-align: center; margin-top: 8px; }
.pagination a, .pagination span { padding: 2px 6px; border: 1px solid #ccc; margin: 0 1px; text-decoration: none; font-size: 11px; }
.pagination .active { background: #069; color: #fff; border-color: #069; }

.footer { text-align: center; padding: 10px; color: #999; font-size: 10px; border-top: 1px solid #ddd; margin-top: 20px; }

@media (max-width: 600px) {
    .grid-2, .grid-3 { flex-direction: column; }
}