/**
 * com_direktori - frontend directory (trombinoscope) styles
 */

.direktori {
	font-family: var(--direktori-font, inherit);
	--direktori-cols: 3;
	--direktori-accent: #1a4f8b;
	--direktori-accent-dark: #14406f;
	--direktori-border: #e3e7ee;
	--direktori-muted: #64748b;
	--direktori-bg-soft: #f6f8fb;
	--direktori-head-bg: #1a4f8b;
	--direktori-band-from: #14406f;
	--direktori-band-to: #3f7cbd;
	margin: 0 auto;
}

.direktori *,
.direktori *::before,
.direktori *::after {
	box-sizing: border-box;
}

.is-hidden {
	display: none !important;
}

/* ---------- Toolbar ---------- */
.direktori-toolbar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fff;
	padding: 1rem 0 .75rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--direktori-border);
}

/* Keyword input shares the select styling (see .direktori-select). */
.direktori-search-input {
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.direktori-search-input:focus {
	border-color: var(--direktori-accent);
	box-shadow: 0 0 0 3px rgba(26, 79, 139, .12);
}

/* ---------- Category tabs (unused when the cascade filter is shown) ---------- */
.direktori-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .75rem;
}

.direktori-tab {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .85rem;
	border: 1px solid var(--direktori-border);
	border-radius: 2rem;
	background: #fff;
	color: #334155;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: none;
	transition: all .15s ease;
}

.direktori-tab:hover {
	border-color: var(--direktori-accent);
	color: var(--direktori-accent);
}

.direktori-tab.is-active {
	background: var(--direktori-accent);
	border-color: var(--direktori-accent);
	color: #fff;
}

.direktori-tab-count {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 .35em;
	border-radius: 1rem;
	background: rgba(0, 0, 0, .08);
	font-size: .75rem;
	line-height: 1.5;
	text-align: center;
}

.direktori-tab.is-active .direktori-tab-count {
	background: rgba(255, 255, 255, .25);
}

/* ---------- Filter bar: cascading selects + keyword, side by side ---------- */
.direktori-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem 1rem;
	margin-bottom: 1rem;
	padding: 1rem;
	background: var(--direktori-bg-soft);
	border: 1px solid var(--direktori-border);
	border-radius: .6rem;
}

.direktori-field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	flex: 1 1 190px;
	min-width: 0;
}

.direktori-field-search {
	flex: 1 1 200px;
}

.direktori-actions {
	flex: 0 0 auto;
	flex-direction: row;
	gap: .5rem;
	align-self: flex-end;
}

.direktori-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .6rem 1.4rem;
	border: 0;
	border-radius: .4rem;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease;
}

.direktori-btn-primary {
	background: var(--direktori-accent);
	color: #fff;
}

.direktori-btn-primary:hover {
	background: var(--direktori-accent-dark);
	color: #fff;
}

.direktori-btn-secondary {
	background: #64748b;
	color: #fff;
}

.direktori-btn-secondary:hover {
	background: #475569;
	color: #fff;
}

.direktori-select:disabled {
	background: #eef1f5;
	color: var(--direktori-muted);
	cursor: not-allowed;
}

.direktori-label {
	font-size: .78rem;
	font-weight: 600;
	color: var(--direktori-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.direktori-select {
	padding: .55rem .75rem;
	border: 1px solid var(--direktori-border);
	border-radius: .5rem;
	background: #fff;
	font-size: .95rem;
	max-width: 100%;
}

.direktori-select:focus {
	outline: none;
	border-color: var(--direktori-accent);
	box-shadow: 0 0 0 3px rgba(26, 79, 139, .12);
}

/* ---------- Selected department heading + description ---------- */
.direktori-heading {
	margin: 0 0 1.25rem;
}

.direktori-heading-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 .5rem;
}

.direktori-heading-desc {
	color: #334155;
	line-height: 1.6;
}

.direktori-heading-desc p {
	margin: 0 0 .35rem;
}

/* ---------- Table view ---------- */
.direktori-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--direktori-border);
	border-radius: .6rem;
}

.direktori-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--direktori-font-size, .9rem);
	background: #fff;
}

.direktori-table thead th {
	background: var(--direktori-head-bg);
	color: #fff;
	text-align: left;
	font-weight: 600;
	font-size: var(--direktori-font-size, .9rem);
	padding: var(--direktori-pad-y, .7rem) var(--direktori-pad-x, .9rem);
	vertical-align: middle;
	position: sticky;
	top: 0;
	z-index: 2;
}

.direktori-table tbody td {
	padding: var(--direktori-pad-y, .7rem) var(--direktori-pad-x, .9rem);
	border-top: 1px solid var(--direktori-border);
	vertical-align: middle;
}

.direktori-table tbody tr:hover:not(.direktori-deptrow) td {
	background: var(--direktori-bg-soft);
}

/* Full-width department band */
.direktori-deptrow td {
	background: linear-gradient(90deg, var(--direktori-band-from), var(--direktori-band-to));
	color: #fff;
	padding: var(--direktori-pad-y, .6rem) var(--direktori-pad-x, .9rem);
	border-top: 0;
}

.direktori-deptrow-cat {
	display: block;
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .85;
}

.direktori-deptrow-title {
	font-weight: 700;
	font-size: 1rem;
}

.dt-no {
	width: 1%;
	color: var(--direktori-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Photo + name in a single column */
.direktori-person {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.direktori-thumb {
	flex: 0 0 auto;
	width: var(--direktori-thumb-w, 58px);
	height: var(--direktori-thumb-h, 68px);
	object-fit: cover;
	object-position: top center;
	border-radius: .25rem;
	background: #fff;
	border: 1px solid var(--direktori-border);
	display: block;
}

.dt-name {
	min-width: 240px;
}

.dt-name .direktori-name {
	font-weight: 600;
	color: #0f172a;
	line-height: 1.35;
}

.dt-loc {
	min-width: 200px;
	font-size: .875rem;
	color: #475569;
}

.dt-locline {
	display: block;
	line-height: 1.45;
}

.dt-locline:first-child {
	color: var(--direktori-muted);
	font-size: .82rem;
}

.dt-pos {
	min-width: 180px;
}

.dt-tel,
.dt-fax {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dt-sub {
	display: block;
	font-size: .78rem;
	color: var(--direktori-muted);
}

.direktori-emailtext {
	word-break: break-word;
}

.dt-empty {
	color: #cbd5e1;
}

/* ---------- Result count / reset ---------- */
.direktori-resultcount {
	margin: 0;
	font-size: .85rem;
	color: var(--direktori-muted);
}

.direktori-reset {
	margin-left: .6rem;
	font-size: .85rem;
	color: var(--direktori-muted);
	white-space: nowrap;
}

/* ---------- Department labels on cards ---------- */
.direktori-dept {
	margin: 0 0 .7rem;
	font-size: .78rem;
	line-height: 1.35;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.direktori-cat-label {
	font-weight: 700;
	color: var(--direktori-accent);
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: .72rem;
}

.direktori-dept-label {
	color: #475569;
	font-weight: 600;
}

.direktori-unit {
	color: var(--direktori-muted);
}

/* ---------- Pagination ---------- */
.direktori-pagination {
	margin-top: 2rem;
	text-align: center;
}

/* Result count + "Display #" sit together, directly under the filter bar. */
.direktori-resultbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-top: .75rem;
}

.direktori-limitform {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.direktori-limitlabel {
	font-size: .82rem;
	color: var(--direktori-muted);
	white-space: nowrap;
}

.direktori-limitselect {
	padding: .35rem .6rem;
	border: 1px solid var(--direktori-border);
	border-radius: .35rem;
	background: #fff;
	font-size: .85rem;
}

.direktori-pagination .pagination {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .25rem;
	justify-content: center;
	padding: 0;
	list-style: none;
}

.direktori-pagination .pagination a,
.direktori-pagination .pagination span {
	display: inline-block;
	padding: .35rem .7rem;
	border: 1px solid var(--direktori-border);
	border-radius: .35rem;
	color: var(--direktori-accent);
	text-decoration: none;
	font-size: .875rem;
}

.direktori-pagination .pagination .active span,
.direktori-pagination .pagination a:hover {
	background: var(--direktori-accent);
	border-color: var(--direktori-accent);
	color: #fff;
}

.direktori-pagecounter {
	margin-top: .6rem;
	font-size: .82rem;
	color: var(--direktori-muted);
}

/* ---------- Card view: department / unit section headings ---------- */
.direktori-cat {
	margin-bottom: 2.25rem;
}

.direktori-cat-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	background: linear-gradient(90deg, var(--direktori-band-from), var(--direktori-band-to));
	padding: .5rem .9rem;
	border-radius: .4rem;
	margin: 0 0 1.5rem;
}

.direktori-cat-title .direktori-deptrow-cat {
	display: block;
	font-size: .68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .85;
}

/* ---------- Card grid ---------- */
.direktori-grid {
	display: grid;
	grid-template-columns: repeat(var(--direktori-cols), minmax(0, 1fr));
	gap: 1.25rem;
}

.direktori-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--direktori-border);
	border-radius: .75rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: box-shadow .2s ease, transform .2s ease;
}

.direktori-card:hover {
	box-shadow: 0 10px 28px rgba(15, 23, 42, .13);
	transform: translateY(-3px);
}

.direktori-photo {
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, #eef2f7, #dde6f1);
	overflow: hidden;
}

.direktori-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.direktori-body {
	padding: var(--direktori-card-pad, 1rem);
	text-align: center;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.direktori-name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 .2rem;
	color: #0f172a;
	line-height: 1.25;
}

.direktori-position {
	font-size: .88rem;
	color: var(--direktori-accent);
	font-weight: 600;
	margin: 0 0 .75rem;
}

.direktori-contact {
	list-style: none;
	margin: auto 0 0;
	padding: .75rem 0 0;
	width: 100%;
	border-top: 1px dashed var(--direktori-border);
	font-size: .85rem;
	color: var(--direktori-muted);
	text-align: left;
}

.direktori-contact li {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: .3rem 0;
	word-break: break-word;
}

.direktori-contact a {
	color: inherit;
	text-decoration: none;
}

.direktori-contact a:hover {
	color: var(--direktori-accent);
	text-decoration: underline;
}

.direktori-ico {
	flex: 0 0 auto;
	width: 1.1rem;
	text-align: center;
	color: var(--direktori-accent);
}

.direktori-ext {
	color: var(--direktori-muted);
	font-size: .8em;
}

.direktori-noresults {
	color: var(--direktori-muted);
	font-style: italic;
	padding: 1rem 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
	.direktori { --direktori-cols: 2 !important; }
}

@media (max-width: 576px) {
	.direktori { --direktori-cols: 1 !important; }
	.direktori-search { max-width: none; }
	.direktori-toolbar { position: static; }
}