/*
	planner.css — mobile-first stylesheet for the locking-plan planner,
	styled to match ideja.hr (black / white, teal accent, no custom font
	licensing dependency — system sans-serif stack).

	The grid (doors x keys) is a fluid CSS Grid/flex matrix: every column has
	a floor (minmax()/min-width) and a share of extra space (fr / flex-grow),
	so the whole table actually shrinks and grows with the viewport instead
	of staying a fixed pixel width. Horizontal scroll on .lp-planner__scroll
	is only a fallback for when a plan has enough doors/keys that even the
	column floors don't fit. Unprefixed rules below are the mobile baseline;
	min-width queries only add enhancements for wider viewports.
*/

:root {
	--lp-black: #000000;
	--lp-white: #ffffff;
	--lp-accent: #41b5d2;
	--lp-grey: #777777;
	--lp-border: #000000;
	--lp-muted-bg: #f2f2f2;

	/*
		The grid is a real matrix: every door is a row, every key is a column,
		and a checkbox marks where they intersect. For that to line up, the
		single-line column-label bar, the per-key header block (edit/number/
		name/qty), and every data row (door row, checkbox cell, door-edit
		button) must all be the same fixed height across the three parallel
		columns (doors / keys / key-controls) that make up the grid.
	*/
	--lp-top-h: 54px;
	--lp-key-header-h: 92px;
	--lp-row-h: 44px;

	/*
		Fluid column template for the doors table, shared by the header row
		and every door row so their cells always line up. Each column has a
		floor (never gets smaller/less usable than this) and a share of any
		extra space (the fr part) — the table actually shrinks and grows with
		the viewport instead of staying a fixed pixel width. Each is its own
		variable so dragging a column's resize handle can pin just that one
		column to a fixed px width while the rest keep sharing space fluidly.
	*/
	--lp-col-position: minmax(26px, 0.4fr);
	--lp-col-door: minmax(70px, 2fr);
	--lp-col-type: minmax(40px, 1fr);
	--lp-col-length: minmax(100px, 1.6fr);
	--lp-col-qty: minmax(52px, 0.8fr);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--lp-black);
	background: var(--lp-white);
}

button {
	font-family: inherit;
}


.lp-container {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 12px;
}
@media (min-width: 768px) {
	.lp-container { padding: 0 24px; }
}

/* ---------- brand bar ---------- */

.lp-brandbar {
	background: var(--lp-white);
	border-bottom: 3px solid var(--lp-accent);
	padding: 10px 0;
}
.lp-brandbar__logo {
	display: block;
	height: 34px;
	width: auto;
}
@media (min-width: 576px) {
	.lp-brandbar__logo { height: 46px; }
}

/* ---------- toolbar ---------- */

.lp-toolbar {
	background: var(--lp-black);
	padding: 10px 0;
}
.lp-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.lp-toolbar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: var(--lp-white);
	color: var(--lp-black);
	border: 0;
	border-radius: 4px;
	padding: 10px;
	cursor: pointer;
}
.lp-toolbar__btn:hover {
	background: var(--lp-accent);
	color: var(--lp-white);
}
.lp-toolbar__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}
@media (min-width: 768px) {
	.lp-toolbar__btn {
		padding: 11px;
	}
	.lp-toolbar__btn svg {
		width: 20px;
		height: 20px;
	}
}

/* ---------- planner ---------- */

.lp-planner {
	background: var(--lp-muted-bg);
	padding: 16px 0 36px;
}

.lp-planner__name-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--lp-white);
	border: 1px solid var(--lp-border);
	border-radius: 4px;
	padding: 8px 12px;
	margin-bottom: 14px;
	max-width: 420px;
}
.lp-planner__name-icon img {
	width: 16px;
	height: 16px;
	display: block;
}
.lp-planner__name-input {
	border: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	outline: none;
	background: transparent;
}

.lp-planner__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}

.lp-grid {
	display: flex;
	border: 1px solid var(--lp-border);
	background: var(--lp-white);
}

/* -- doors (left side) -- */

.lp-grid__doors {
	display: flex;
	flex-direction: column;
	flex: 1 1 380px;
	min-width: 0;
}
.lp-grid__headers {
	display: grid;
	grid-template-columns: var(--lp-col-position) var(--lp-col-door) var(--lp-col-type) var(--lp-col-length) var(--lp-col-qty);
	min-height: var(--lp-top-h);
	background: var(--lp-accent);
	color: var(--lp-white);
}
.lp-grid__key-header-spacer {
	height: var(--lp-key-header-h);
	flex: 0 0 auto;
}
.lp-grid__header {
	padding: 8px 6px;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}
.lp-grid__header--length { flex-direction: column; gap: 2px; }
.lp-grid__header--qty { border-right: 0; }

.lp-grid__header-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.lp-col-resize {
	position: absolute;
	top: 0;
	right: -4px;
	width: 8px;
	height: 100%;
	cursor: col-resize;
	touch-action: none;
	z-index: 6;
}
.lp-col-resize:hover,
.lp-col-resize.is-resizing {
	background: rgba(255, 255, 255, 0.35);
}
.lp-key__header .lp-col-resize:hover,
.lp-key__header .lp-col-resize.is-resizing {
	background: rgba(0, 0, 0, 0.15);
}

.lp-grid__length-hint {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--lp-white);
	color: var(--lp-black);
	border: 1px solid var(--lp-border);
	padding: 6px;
	font-size: 10px;
	font-weight: 400;
	text-transform: none;
	z-index: 5;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.lp-grid__header--length:hover .lp-grid__length-hint {
	display: flex;
}
.lp-grid__length-hint-img img {
	width: 56px;
	display: block;
}

.lp-doors {
	display: flex;
	flex-direction: column;
}
.lp-door {
	display: grid;
	grid-template-columns: var(--lp-col-position) var(--lp-col-door) var(--lp-col-type) var(--lp-col-length) var(--lp-col-qty);
	align-items: center;
	border-top: 1px solid var(--lp-border);
	min-height: var(--lp-row-h);
	background: var(--lp-white);
}
.lp-door.is-dragging {
	opacity: 0.5;
}
.lp-door__no {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	font-size: 13px;
	min-width: 0;
}
.lp-door__drag-handle {
	border: 0;
	background: transparent;
	cursor: grab;
	padding: 0;
	color: var(--lp-grey);
	touch-action: none;
}
.lp-door__drag-handle svg {
	width: 12px;
	height: 12px;
	display: block;
}
.lp-door__name {
	min-width: 0;
	padding: 4px;
}
.lp-door__name-input {
	width: 100%;
	border: 1px solid #ccc;
	padding: 6px;
	font-size: 13px;
}
.lp-door__type-row {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px;
}
.lp-door__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}
.lp-door__type-select {
	/* The icon already says which cylinder type is set, so the select's own
	   text label is dropped everywhere — it stays fully functional (tapping
	   the icon opens it), it's just invisible, overlaid on the icon. */
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.lp-door__icon {
	cursor: pointer;
}
.lp-door__lengths {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px;
}
.lp-door__length {
	flex: 1 1 0;
	min-width: 38px;
	max-width: 44px;
	border: 1px solid #ccc;
	padding: 6px 2px;
	font-size: 13px;
	text-align: center;
}
.lp-door__length-sep {
	width: 1px;
	height: 20px;
	background: var(--lp-border);
	flex: 0 0 auto;
}
.lp-door__qty {
	min-width: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 2px;
	padding: 4px;
}
.lp-door__qty-arrows {
	display: flex;
	flex-direction: column;
}
.lp-door__qty-btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0;
	width: 14px;
	height: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lp-accent);
}
.lp-door__qty-btn svg {
	width: 12px;
	height: 12px;
	display: block;
}
.lp-door__qty-input {
	width: 32px;
	border: 1px solid #ccc;
	text-align: center;
	font-size: 13px;
}

/* -- keys (right side) -- */

.lp-grid__keys {
	flex: 0 0 auto;
	border-left: 1px solid var(--lp-border);
}
.lp-grid__keys-inner {
	display: flex;
	min-width: 0;
}
.lp-grid__keys-panel {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}
.lp-grid__keys-heading {
	min-height: var(--lp-top-h);
	background: var(--lp-accent);
	color: var(--lp-white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
.lp-grid__keys-heading-icon img {
	width: 15px;
	height: 15px;
	display: block;
}
.lp-grid__keys-scroll {
	position: relative;
	min-width: 0;
}
.lp-keys {
	display: flex;
	min-width: 0;
}

.lp-key {
	/* Fixed width, not fluid-shrinking: with many key columns possible, letting
	   them shrink independently of their scroll container risked the last
	   columns overflowing past it (visually overlapping the controls next to
	   it) rather than being clipped/scrolled. Fixed width + the single outer
	   .lp-planner__scroll handling overflow is simpler and can't misbehave
	   that way. Column resize (drag handle) still overrides this per-column. */
	flex: 0 0 48px;
	border-left: 1px solid var(--lp-border);
	background: var(--lp-white);
}
.lp-key:first-child {
	border-left: 0;
}
.lp-key.is-dragging {
	opacity: 0.5;
}
.lp-key__header-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.lp-key__drag-handle {
	border: 0;
	background: transparent;
	cursor: grab;
	padding: 0;
	color: var(--lp-grey);
	touch-action: none;
}
.lp-key__drag-handle svg {
	width: 13px;
	height: 13px;
	display: block;
}
.lp-key__header {
	min-height: var(--lp-key-header-h);
	padding: 6px 4px;
	border-bottom: 1px solid var(--lp-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	position: relative;
}
.lp-key__select-all {
	width: 13px;
	height: 13px;
	cursor: pointer;
	background: url(../../img/check-square-empty.svg) center / contain no-repeat;
}
.lp-key__select-all.is-checked {
	background-image: url(../../img/check-square.svg);
}
.lp-key__delete-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: var(--lp-grey);
}
.lp-key__delete-btn:hover {
	color: var(--lp-accent);
}
.lp-key__delete-btn svg {
	width: 13px;
	height: 13px;
	display: block;
}
.lp-key__no-value {
	font-size: 12px;
	font-weight: 700;
}
.lp-key__name-input {
	width: 100%;
	border: 1px solid #ccc;
	font-size: 10px;
	text-align: center;
	padding: 3px 2px;
}
.lp-key__qty {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 2px;
	margin-bottom: 3px;
}
.lp-key__qty-arrows {
	display: flex;
	flex-direction: column;
}
.lp-key__qty-btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0;
	width: 11px;
	height: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lp-accent);
}
.lp-key__qty-btn svg {
	width: 10px;
	height: 10px;
	display: block;
}
.lp-key__qty-input {
	width: 28px;
	border: 1px solid #ccc;
	text-align: center;
	font-size: 11px;
}

.lp-key__cell {
	height: var(--lp-row-h);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--lp-border);
}
.lp-key__checkbox {
	width: 22px;
	height: 22px;
	cursor: pointer;
	background: url(../../img/check-square-empty.svg) center / contain no-repeat;
}
.lp-key__checkbox.is-checked {
	background-image: url(../../img/check-square.svg);
}

/* -- key/door count controls -- */

.lp-grid__key-controls {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	border-left: 1px solid var(--lp-border);
}
.lp-grid__key-controls-row {
	height: calc(var(--lp-top-h) + var(--lp-key-header-h));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
}
.lp-grid__qty-buttons {
	display: flex;
	gap: 4px;
}
.lp-grid__qty-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.lp-grid__qty-btn img {
	width: 19px;
	height: 19px;
	display: block;
}
.lp-grid__key-count {
	border: 1px solid var(--lp-border);
	padding: 4px;
	font-size: 12px;
	width: 54px;
	text-align: center;
}
.lp-grid__door-edit-buttons {
	display: flex;
	flex-direction: column;
}
.lp-door-edit {
	height: var(--lp-row-h);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-top: 1px solid var(--lp-border);
}
.lp-door-edit:first-child {
	border-top: 0;
}
.lp-door-edit__select-all {
	width: 15px;
	height: 15px;
	cursor: pointer;
	background: url(../../img/check-square-empty.svg) center / contain no-repeat;
}
.lp-door-edit__select-all.is-checked {
	background-image: url(../../img/check-square.svg);
}
.lp-door-edit__delete-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: var(--lp-grey);
}
.lp-door-edit__delete-btn:hover {
	color: var(--lp-accent);
}
.lp-door-edit__delete-btn svg {
	width: 15px;
	height: 15px;
	display: block;
}

/* ---------- below-grid row ---------- */

.lp-planner__below {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}
.lp-planner__door-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}
.lp-planner__door-btn {
	border: 1px solid var(--lp-border);
	background: var(--lp-white);
	cursor: pointer;
	border-radius: 4px;
	padding: 6px;
}
.lp-planner__door-btn img {
	width: 15px;
	height: 15px;
	display: block;
}
.lp-planner__door-count {
	border: 1px solid var(--lp-border);
	padding: 6px;
	font-size: 13px;
}
.lp-planner__actions {
	margin-left: auto;
}
.lp-planner__export-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--lp-black);
	color: var(--lp-white);
	border: 0;
	border-radius: 4px;
	padding: 11px 18px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
.lp-planner__export-btn:hover {
	background: var(--lp-accent);
}
.lp-planner__export-icon img {
	width: 17px;
	height: 17px;
	display: block;
	filter: invert(1);
}

/* ---------- modals ---------- */

.lp-modal .modal-header {
	background: var(--lp-black);
	color: var(--lp-white);
}
.lp-modal .modal-title {
	color: var(--lp-white);
	font-weight: 700;
}
.lp-modal .btn-close {
	filter: invert(1);
}
.lp-modal .modal-body img {
	max-width: 100%;
	height: auto;
}

.lp-library__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
.lp-library__item:hover {
	background: #f7f7f7;
}
.lp-library__label {
	flex: 1 1 auto;
	font-size: 13px;
}
.lp-library__delete {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--lp-accent);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.lp-library__delete:hover {
	opacity: 0.7;
}

/* ---------- perfect-scrollbar theme ---------- */

.ps__rail-x,
.ps__rail-y {
	opacity: 0.6;
}
.ps__thumb-x {
	background-color: var(--lp-accent);
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
	background-color: var(--lp-accent);
}

/* ---------- toastr accent ---------- */

#toast-container > .toast-success {
	background-color: var(--lp-accent) !important;
}