/* Handball Kaderverwaltung - Frontend */

.hbk-frontend { max-width: 900px; margin: 0 auto; }
.hbk-frontend * { box-sizing: border-box; }

.hbk-card {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	padding: 20px 22px;
	margin-bottom: 22px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 );
}
.hbk-card h3 { margin-top: 0; }
.hbk-card h4 { margin: 26px 0 8px; }

.hbk-muted { color: #6b7280; font-size: .9em; }
.hbk-required { color: #b32d2e; }

.hbk-notice { padding: 12px 16px; border-radius: 5px; margin-bottom: 18px; border-left: 4px solid; }
.hbk-notice-success { background: #edfaef; border-color: #00a32a; }
.hbk-notice-error { background: #fcf0f1; border-color: #d63638; }
.hbk-notice-warning { background: #fcf9e8; border-color: #dba617; }

.hbk-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	vertical-align: -1px;
	margin-right: 6px;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .15 );
}

.hbk-team-head h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hbk-team-head .hbk-muted { font-weight: 400; font-size: .7em; }
.hbk-status-line { margin: 4px 0 16px; }

.hbk-team-list { list-style: none; margin: 0 0 16px; padding: 0; }
.hbk-team-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f1; }

.hbk-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.hbk-form input[type="text"],
.hbk-form input[type="email"],
.hbk-form input[type="password"],
.hbk-form textarea { width: 100%; padding: 9px 11px; border: 1px solid #c3c4c7; border-radius: 4px; }
.hbk-checkbox label { font-weight: 400; }
.hbk-checkbox input { margin-right: 6px; }

.hbk-login label { display: block; font-weight: 600; margin-bottom: 4px; }
.hbk-login input[type="text"],
.hbk-login input[type="password"] {
	width: 100%;
	max-width: 320px;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 12px;
	display: block;
}
.hbk-login input[type="text"] { text-transform: uppercase; letter-spacing: 2px; }
.hbk-inline-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f1; }
.hbk-inline-form input[type="text"] { padding: 8px 10px; border: 1px solid #c3c4c7; border-radius: 4px; margin-right: 6px; }

.hbk-button {
	display: inline-block;
	background: #1d4ed8;
	border: 1px solid #1d4ed8;
	color: #fff;
	padding: 9px 18px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
	text-decoration: none;
}
.hbk-button:hover { background: #1e40af; border-color: #1e40af; color: #fff; }
.hbk-button-secondary { background: #fff; color: #1d4ed8; }
.hbk-button-secondary:hover { background: #f3f4f6; color: #1e40af; }
.hbk-button-link { background: none; border: 0; color: #6b7280; text-decoration: underline; padding: 9px 6px; }

/* Grid */
.hbk-grid { margin: 10px 0 22px; }
.hbk-grid-scroll { overflow-x: auto; border: 1px solid #e2e4e7; background: #fff; border-radius: 5px; }
.hbk-grid-inner { position: relative; }
.hbk-grid-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 520px; user-select: none; }
.hbk-grid-table th,
.hbk-grid-table td { border-bottom: 1px solid #e9eaec; border-right: 1px solid #f2f3f4; }
.hbk-grid-table th {
	background: #f8f9fa;
	text-align: left;
	padding: 8px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #4b5563;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 4;
}

.hbk-grid-table th.hbk-sortable { cursor: pointer; user-select: none; }
.hbk-grid-table th.hbk-sortable:hover { color: #1d4ed8; }
.hbk-grid-table th.hbk-sortable:focus { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.hbk-grid-table th.is-sorted { color: #1d4ed8; }
.hbk-sort-arrow { font-size: 9px; letter-spacing: 0; }

td.hbk-cell {
	padding: 0 10px;
	height: 34px;
	vertical-align: middle;
	min-width: 90px;
	cursor: cell;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	background: #fff;
}
td.hbk-cell.is-selected { background: #e6edfd; }
td.hbk-cell.is-active { background: #fff; }
td.hbk-cell.is-editing { padding: 0; overflow: visible; }

.hbk-cell-input {
	width: 100%;
	height: 32px;
	border: 0;
	padding: 0 10px;
	margin: 0;
	background: #fff;
	box-shadow: none;
	border-radius: 0;
	font: inherit;
	outline: 2px solid #1d4ed8;
	outline-offset: -2px;
}

.hbk-col-index { width: 38px; text-align: center; color: #9ca3af; font-size: 12px; background: #f8f9fa; }
.hbk-col-actions { width: 96px; white-space: nowrap; text-align: center; }

/* Auswahlrahmen */
.hbk-selection-overlay {
	position: absolute;
	border: 2px solid #1d4ed8;
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
}
.hbk-selection-overlay.is-blurred { border-color: #9ca3af; }
.hbk-selection-overlay.is-dragging { pointer-events: none; }
.hbk-selection-overlay.is-dragging .hbk-sel-edge,
.hbk-selection-overlay.is-dragging .hbk-fill-handle { pointer-events: none; }
.hbk-sel-edge { position: absolute; pointer-events: auto; cursor: move; }
.hbk-sel-edge-top { left: -3px; right: -3px; top: -5px; height: 8px; }
.hbk-sel-edge-bottom { left: -3px; right: -3px; bottom: -5px; height: 8px; }
.hbk-sel-edge-left { top: -3px; bottom: -3px; left: -5px; width: 8px; }
.hbk-sel-edge-right { top: -3px; bottom: -3px; right: -5px; width: 8px; }
.hbk-fill-handle {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 8px;
	height: 8px;
	background: #1d4ed8;
	border: 1px solid #fff;
	pointer-events: auto;
	cursor: crosshair;
	z-index: 5;
}
.hbk-drop-outline {
	position: absolute;
	border: 2px dashed #1d4ed8;
	background: rgba( 0, 0, 0, .03 );
	pointer-events: none;
	z-index: 4;
	box-sizing: border-box;
}
.hbk-clipboard {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	resize: none;
	overflow: hidden;
	z-index: 1;
}

.hbk-icon-button {
	border: 1px solid #e2e4e7;
	background: #f8f9fa;
	border-radius: 3px;
	cursor: pointer;
	width: 24px;
	height: 24px;
	line-height: 1;
	font-size: 11px;
	margin: 0 1px;
	color: #4b5563;
}
.hbk-icon-button:hover { background: #fff; border-color: #1d4ed8; color: #1d4ed8; }
.hbk-icon-danger:hover { border-color: #d63638; color: #d63638; }

.hbk-grid-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.hbk-copy-option { font-size: 12px; color: #4b5563; }
.hbk-grid-hint { margin: 6px 0 0; font-size: 12px; color: #9ca3af; line-height: 1.6; }

.hbk-paste-panel { margin-top: 10px; padding: 12px; background: #f8f9fa; border: 1px solid #e2e4e7; border-radius: 5px; }
.hbk-paste-panel textarea { width: 100%; font-family: monospace; font-size: 12px; }
.hbk-paste-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hbk-copy-fallback { position: fixed; left: -9999px; top: 0; }

.hbk-photo { max-width: 100%; height: auto; border-radius: 5px; border: 1px solid #e2e4e7; }
.hbk-actions { margin-top: 22px; }
.hbk-secondary-actions { padding: 14px 22px; }

@media ( max-width: 600px ) {
	.hbk-card { padding: 16px; }
	.hbk-grid-toolbar .hbk-button { flex: 1 1 auto; }
}

/* Übersicht */
.hbk-overview-stats { margin: 4px 0 16px; }
.hbk-overview-stats .hbk-count { display: inline-block; margin-left: 16px; white-space: nowrap; }
.hbk-overview-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.hbk-overview-table th,
.hbk-overview-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.hbk-overview-table th {
	background: #f8f9fa;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #4b5563;
}
.hbk-overview-table tr:hover td { background: #fafbfc; }
.hbk-legend { margin: 14px 0 0; font-size: .85em; color: #6b7280; }
.hbk-legend-item { display: block; margin-bottom: 3px; }
.hbk-season-links { margin: 0 0 14px; }
.hbk-season-links a { margin-right: 10px; }
.hbk-current-season { font-weight: 700; text-decoration: none; }

/* Login im internen Bereich */
.hbk-frontend .login-username,
.hbk-frontend .login-password { margin-bottom: 10px; }
.hbk-frontend .login-username label,
.hbk-frontend .login-password label { display: block; font-weight: 600; margin-bottom: 4px; }
.hbk-frontend .login-username input,
.hbk-frontend .login-password input { width: 100%; max-width: 320px; padding: 9px 11px; border: 1px solid #c3c4c7; border-radius: 4px; }
.hbk-frontend .login-submit input {
	background: #1d4ed8;
	border: 1px solid #1d4ed8;
	color: #fff;
	padding: 9px 18px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
}
.hbk-frontend .login-remember { margin: 6px 0 10px; }

.hbk-link-field { width: 100%; font-family: monospace; font-size: 11px; padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; }

/* Mannschaftsauswahl */
.hbk-team-list { list-style: none; margin: 0 0 18px; padding: 0; }
.hbk-team-list li { border-bottom: 1px solid #f0f0f1; }
.hbk-team-choice { margin: 0; }

.hbk-team-button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 12px;
	background: none;
	border: 0;
	border-radius: 5px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: inherit;
}
.hbk-team-button:hover,
.hbk-team-button:focus { background: #eff6ff; outline: none; }
.hbk-team-button .hbk-team-name { font-weight: 600; font-size: 1.05em; }
.hbk-team-button .hbk-team-arrow { margin-left: auto; color: #1d4ed8; font-size: 1.2em; }

.hbk-team-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hbk-team-switch form { margin: 0; }
.hbk-switch-label { margin: 0 0 6px; font-weight: 600; }
.hbk-switch-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	background: #fff;
	font: inherit;
	font-size: .95em;
	cursor: pointer;
	color: #1f2937;
}
.hbk-switch-button:hover { border-color: #1d4ed8; color: #1d4ed8; }
.hbk-switch-button.is-current { background: #eff6ff; border-color: #1d4ed8; color: #1d4ed8; font-weight: 600; cursor: default; }

.hbk-logout-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hbk-logout-row form { margin: 0; }

/* Übersicht: Mannschaft öffnen */
.hbk-view-form { margin: 0; }
.hbk-row-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: #1d4ed8;
	text-decoration: underline;
	cursor: pointer;
}
.hbk-row-button:hover { color: #1e40af; }
.hbk-edit-form { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Öffentliche Ausgabe auf den Mannschaftsseiten */
.hbk-public { margin: 0 0 24px; }
.hbk-public-title { margin: 0 0 12px; }
.hbk-public-photo img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin-bottom: 16px; }

.hbk-public-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.hbk-public-table th,
.hbk-public-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #e5e7eb; }
.hbk-public-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #6b7280;
	border-bottom-width: 2px;
	white-space: nowrap;
}
.hbk-public-table tbody tr:hover td { background: #f9fafb; }
.hbk-public-table .hbk-col-nummer { width: 70px; font-weight: 700; }
.hbk-public-table a { text-decoration: none; }

.hbk-public-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hbk-public-card { border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px 16px; background: #fff; }
.hbk-public-card-title { font-weight: 700; font-size: 1.05em; margin-bottom: 6px; }
.hbk-public-card-row { font-size: .92em; margin-bottom: 2px; }
.hbk-public-card-row .hbk-public-label { color: #6b7280; }

.hbk-public-list { list-style: none; margin: 0; padding: 0; }
.hbk-public-list li { padding: 7px 0; border-bottom: 1px solid #f0f0f1; }
.hbk-public-sep { color: #9ca3af; margin: 0 2px; }

.hbk-public-empty { color: #6b7280; font-style: italic; }
.hbk-public-hint { background: #fcf9e8; border-left: 4px solid #dba617; padding: 10px 14px; }

@media ( max-width: 600px ) {
	.hbk-public-table thead { display: none; }
	.hbk-public-table tr { display: block; padding: 8px 0; border-bottom: 2px solid #e5e7eb; }
	.hbk-public-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; }
	.hbk-public-table td:empty { display: none; }
	.hbk-public-table .hbk-col-nummer { width: auto; }
	.hbk-public-table td::before {
		content: attr( data-label );
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .4px;
		color: #6b7280;
	}
}

.hbk-public-card-role { color: #6b7280; font-size: .92em; margin: -2px 0 6px; }
.hbk-public-table.has-head-color th { border-bottom-color: rgba( 0, 0, 0, .12 ); font-weight: 700; }