/*
 * Modern look for all pages: lists, report views, statistics, users, calendar, login.
 * The report forms (.form_page) refine these rules in form-modern.css.
 */
body {
	background: var(--fb-bg);
	color: var(--fb-text);
	font: 14px/1.5 var(--fb-font);
}
a { color: var(--fb-blue); }
a:hover { color: var(--fb-navy); }
/* headings as on fairbroker.de: Abel in the brand blue */
h1 {
	font: 400 30px/1.2 var(--fb-font-heading);
	letter-spacing: 0;
	color: var(--fb-blue);
}
h2 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fb-muted); }
h3 { font: 400 19px/1.3 var(--fb-font-heading); color: var(--fb-blue); }

/* ---------- cards ---------- */
.leftbox, .rightbox, .whitebox, .loginbox {
	margin-top: 24px;
	background: var(--fb-surface);
	border: 1px solid var(--fb-border-soft);
	border-radius: var(--fb-radius-card);
	box-shadow: 0 1px 2px rgba(30, 32, 36, .04), 0 2px 8px rgba(30, 32, 36, .03);
}
.leftbox, .rightbox { overflow: hidden; }
.rightbox .pad { padding: 18px; }
.leftbox hr, .rightbox hr, .whitebox hr, .report hr { border: 0; border-top: 1px solid var(--fb-line); margin: 0; }
.meta { background: var(--fb-blue-tint); border-color: var(--fb-blue-border); }
.meta h3 { color: var(--fb-blue); }

/* ---------- inputs and buttons ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=search], input[type=date], input[type=time], input:not([type]), select, textarea {
	box-sizing: border-box;
	max-width: 100%;
	padding: 6px 10px;
	font: 400 14px/1.4 var(--fb-font);
	color: var(--fb-text);
	background: var(--fb-surface);
	border: 1px solid var(--fb-border);
	border-radius: var(--fb-radius);
	transition: border-color .15s, box-shadow .15s;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=search], input[type=date], input[type=time], input:not([type]), select { height: 34px; }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--fb-blue);
	box-shadow: 0 0 0 3px rgba(54, 116, 152, .16);
}
input[type=radio], input[type=checkbox] { accent-color: var(--fb-blue); }
input[type=submit], input[type=button]:not(.ui-datepicker-trigger) {
	padding: 7px 16px;
	font: 600 13.5px var(--fb-font);
	color: #fff;
	background: var(--fb-accent);
	border: 0;
	border-radius: var(--fb-radius);
	cursor: pointer;
	transition: background-color .15s, transform .1s;
}
input[type=submit]:hover { background: var(--fb-blue-dark); }
input[type=submit]:active { transform: translateY(1px); }
div.error {
	padding: 10px 14px; border-radius: var(--fb-radius); font-size: 13px;
	color: #9b2c2c; background: #fdeeee; border: 1px solid #f5cccc;
}
div.notice {
	padding: 10px 14px; border-radius: var(--fb-radius); font-size: 13px;
	color: #1e6b3a; background: #eaf8ef; border: 1px solid #c9ecd6;
}
span.error, .delete { color: #e5484d; }

/* ---------- tables ---------- */
.report_list, table.statistics { border-collapse: separate; border-spacing: 0; width: 100%; }
.report_list th, table.statistics th {
	padding: 10px !important;
	font-size: 11px;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fb-muted);
	border-bottom: 1px solid var(--fb-border-soft);
}
.report_list td { padding: 11px 10px !important; border-bottom: 1px solid var(--fb-line); }
.report_list tr:last-child td { border-bottom: 0; }
.report_list tr.clickable { transition: background-color .12s; }
.report_list tr.clickable:hover { background: var(--fb-blue-tint); }
.report_list tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--fb-blue); }
.report_list input, .report_list select { width: 100%; height: 32px; font-size: 13px; }
table.statistics td { padding: 8px 10px; border: 0; border-bottom: 1px solid var(--fb-line); }
table.statistics tr.total td { border-bottom: 2px solid var(--fb-text); font-weight: 600; }
table.statistics tr:hover td { background: var(--fb-subtle); }

/* ---------- list toolbar and pagination ---------- */
.sorting_options { display: flex; align-items: center; gap: 8px; width: auto; color: var(--fb-muted); font-size: 13px; }
.sorting_options label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--fb-text); }
.pagination { display: flex; justify-content: flex-end; gap: 4px; width: auto; margin: 0; }
.pagination * { padding: 0; }
.pagination a, .pagination strong {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 30px; height: 30px; padding: 0 8px !important;
	border-radius: var(--fb-radius); font-size: 13px; text-decoration: none;
}
.pagination a { color: var(--fb-text-2); border: 1px solid var(--fb-border-soft); background: var(--fb-surface); }
.pagination a:hover { border-color: var(--fb-blue); color: var(--fb-blue-dark); text-decoration: none; }
.pagination strong { color: #fff; background: var(--fb-accent); }

/* ---------- report view: tabs ---------- */
#report_tabs { background: var(--fb-surface); border-bottom: 1px solid var(--fb-border-soft); padding: 8px 12px 0; }
#report_tabs ul li { padding: 0; margin: 0 4px 0 0; font-size: 14px; background: none; }
#report_tabs ul li a {
	display: block; padding: 10px 16px; font-weight: 500; color: var(--fb-muted);
	border-bottom: 2px solid transparent; text-decoration: none;
}
#report_tabs ul li a:hover { color: var(--fb-text); text-decoration: none; }
#report_tabs ul li.active { background: none; }
#report_tabs ul li.active a { color: var(--fb-blue-dark); border-bottom-color: var(--fb-blue); }
.report th { font-size: 12px; font-weight: 500; color: var(--fb-muted); }
/* report view: "<strong>Label</strong><br/>value" pairs read as label + value */
.pagecenter:not(.form_page) .report td > strong,
.pagecenter:not(.form_page) .report p > strong {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fb-muted);
}
.pagecenter:not(.form_page) .report td { padding: 6px 8px 6px 0; vertical-align: top; }
.pagecenter:not(.form_page) .report .pad h3 { margin-top: 4px; }

/* ---------- statistics side menu ---------- */
.right_menu { padding: 6px 8px 10px; }
.right_menu a {
	display: block; padding: 8px 12px; margin: 1px 0;
	border: 0; border-radius: var(--fb-radius);
	font-size: 13.5px; color: var(--fb-text-2); text-decoration: none;
	transition: background-color .12s, color .12s;
}
.right_menu a:hover { background: var(--fb-hover); color: var(--fb-text); text-decoration: none; }
.right_menu a.is-active { background: var(--fb-blue-soft); color: var(--fb-blue-dark); font-weight: 600; }

/* ---------- start page tiles ---------- */
.frontnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.frontnav .clear { display: none; }
.frontnav a {
	float: none; width: auto;
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	padding: 22px; border: 1px solid var(--fb-border-soft); border-radius: var(--fb-radius-card);
	font: 400 23px/1.2 var(--fb-font-heading); text-align: left; color: var(--fb-blue); text-decoration: none;
	background: var(--fb-surface);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.frontnav a:hover {
	background: var(--fb-surface); border-color: var(--fb-blue-border); color: var(--fb-blue-dark); text-decoration: none;
	transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30, 32, 36, .1);
}
.frontnav a:before {
	content: ""; width: 44px; height: 44px; border-radius: var(--fb-radius-card);
	background: var(--tile-icon) center / 22px no-repeat, var(--fb-blue);
}
.frontnav a:after { content: "Öffnen →"; font: 400 13px var(--fb-font); color: var(--fb-muted); }
.frontnav a[href="/kalender/"] { --tile-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z'/></svg>"); }
.frontnav a[href="/kfz-schaden/"] { --tile-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/></svg>"); }
.frontnav a[href="/transportschaden/"] { --tile-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/></svg>"); }

/* ---------- calendar ---------- */
.header { display: flex; align-items: center; justify-content: center; gap: 12px; font: 400 24px var(--fb-font-heading); color: var(--fb-blue); margin-bottom: 14px; }
.header a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border-radius: 50%;
	color: var(--fb-text-2); border: 1px solid var(--fb-border-soft); background: var(--fb-surface); text-decoration: none;
}
.header a:hover { color: var(--fb-blue-dark); border-color: var(--fb-blue); text-decoration: none; }
/* every column must stay 87px wide (content + padding + 2px border + 1px margin) */
.day_name {
	width: 80px; padding-left: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fb-faint);
}
/* same outer width as before (84px) so the 7-column float grid still fits */
.day, .offset { width: 72px; height: 70px; padding: 6px; }
.day {
	border: 1px solid var(--fb-line); border-radius: var(--fb-radius); background: var(--fb-subtle);
	font-size: 12px; font-weight: 600; color: var(--fb-text-2);
	transition: border-color .15s, background-color .15s;
}
.day:hover { background: var(--fb-surface); border-color: var(--fb-blue-border); }
.day:has(.day_content > div) { background: var(--fb-blue-tint); border-color: var(--fb-blue-border); }
.day_content { height: 50px; margin-top: 2px; font-weight: 400; }
.day_content a { color: var(--fb-blue-dark); }

/* ---------- login ---------- */
.loginbox { max-width: 420px; margin: 80px auto; }
.loginbox .pad { padding: 30px 32px; }
.loginbox .pad:before {
	content: "";
	display: block;
	height: 72px;
	margin-bottom: 24px;
	background: url(/images/fairbroker-logo-72.png) left center / contain no-repeat;
	background-image: -webkit-image-set(url(/images/fairbroker-logo-72.png) 1x, url(/images/fairbroker-logo-144.png) 2x);
	background-image: image-set(url(/images/fairbroker-logo-72.png) 1x, url(/images/fairbroker-logo-144.png) 2x);
}
.loginbox fieldset { border: 0; padding: 0; margin: 0; }
.loginbox legend { border: 0; margin-bottom: 4px; font: 400 30px/1.2 var(--fb-font-heading); color: var(--fb-blue); }
.loginbox .login_product { margin: 0 0 16px; font-size: 14px; color: var(--fb-muted); }
.loginbox table, .loginbox tbody, .loginbox tr, .loginbox th, .loginbox td { display: block; width: 100%; }
.loginbox th label { margin: 10px 0 4px; font-size: 12.5px; font-weight: 500; color: var(--fb-muted); }
.loginbox input[type=email], .loginbox input[type=password] { width: 100%; height: 40px; }
.loginbox input[type=submit] { width: 100%; height: 42px; margin-top: 18px; font-size: 14.5px; }

/* ---------- footer ---------- */
#footer { margin: 28px auto 12px; font-size: 12px; text-align: center; color: var(--fb-faint); }
#footer .footer_links a { margin: 0 7px; }
#footer a { color: var(--fb-blue); }

/* ---------- two-factor login ---------- */
.loginbox input.twofa_code { width: 100%; height: 48px; font: 600 22px/1 var(--fb-font); letter-spacing: .3em; text-align: center; }
.twofa_setup { max-width: 480px; }
.twofa_steps { padding-left: 20px; margin: 12px 0 4px; color: var(--fb-text-2); }
.twofa_steps li { margin: 8px 0; }
.twofa_qr { width: 200px; height: 200px; margin: 8px 0; padding: 6px; background: #fff; border: 1px solid var(--fb-border-soft); border-radius: var(--fb-radius); }
.twofa_qr svg { display: block; width: 100%; height: 100%; }
.twofa_secret { display: inline-block; margin-top: 4px; padding: 4px 8px; font: 600 14px/1.4 Consolas, monospace; letter-spacing: .06em; background: var(--fb-hover); border-radius: var(--fb-radius); }
.twofa_hint { margin: 16px 0 0; font-size: 13px; color: var(--fb-muted); }
.recovery_codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 16px 0; padding: 14px 18px; list-style: none; font: 600 15px/1.4 Consolas, monospace; letter-spacing: .05em; background: var(--fb-hover); border-radius: var(--fb-radius); }
.twofa_actions { display: flex; align-items: center; gap: 16px; }
.twofa_admin { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--fb-line); }