/* Share management UI + Windows 7 logon screen */

.logon-screen {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0a2a4a url("/assets/ui/imageres_5036.jpg") center / cover no-repeat;
	z-index: 1;
}

.logon-form {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 16px;
}

/* authui.dll BITMAP 12238 is 238×238; picture hole ≈ 41,42–197,195.
   Picture is oversized a few px so it meets the inner rim with no gaps. */
.logon-tile {
	position: relative;
	width: 126px;
	height: 126px;
	flex-shrink: 0;
	filter: drop-shadow(1px 3px 4px rgba(0, 20, 50, 0.55));
}

.logon-tile-picture {
	position: absolute;
	z-index: 0;
	left: calc(100% * 38 / 238);
	top: calc(100% * 39 / 238);
	width: calc(100% * 163 / 238);
	height: calc(100% * 160 / 238);
	object-fit: cover;
	background: #fff;
}

.logon-tile-frame {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
}

.logon-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 220px;
}

/* Beat 7.css input[type=…] border-color (0,1,1) so logon chrome sticks. */
input.logon-input[type="text"],
input.logon-input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	height: 23px;
	padding: 2px 5px 4px;
	/* Reference rim is soft blue-gray; slightly darker for contrast on white. */
	border: 1px solid #5f7f8c;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 0 2px 1px rgba(150, 220, 245, 0.8);
	outline: none;
	transition: none;
	font: 9pt "Segoe UI", "SegoeUI", sans-serif;
	color: #000;
}

input.logon-input[type="text"]::placeholder,
input.logon-input[type="password"]::placeholder {
	color: #6d6d6d;
}

input.logon-input[type="text"]:hover,
input.logon-input[type="password"]:hover,
input.logon-input[type="text"]:focus,
input.logon-input[type="password"]:focus {
	border-color: #4e6d7a;
	box-shadow: 0 0 3px 1px rgba(160, 225, 250, 0.95);
	outline: none;
}

.logon-password-row {
	position: relative;
	display: flex;
	align-items: center;
}

.logon-password-row .logon-input {
	flex: 1;
	min-width: 0;
}

/* Forward (right) chevron: same sprite div as explorer, flipped. */
.logon-submit.explorer-nav-button,
.logon-submit.explorer-nav-button-disabled {
	position: absolute;
	left: calc(100% + 8px);
}

.logon-submit.explorer-nav-button {
	cursor: pointer;
}

.logon-submit.explorer-nav-button-disabled {
	cursor: default;
}

/* Matches Win7 "How do I log on to another domain?" under the password field. */
a.logon-about {
	align-self: center;
	margin-top: 4px;
	font: 9pt "Segoe UI", "SegoeUI", sans-serif;
	color: #fff;
	text-decoration: underline;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

a.logon-about:hover,
a.logon-about:focus {
	color: #fff;
	text-decoration: underline;
}

.logon-error {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: max-content;
	max-width: min(320px, 90vw);
	font-size: 9pt;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
	pointer-events: none;
}

.logon-error[hidden] {
	display: none;
}

.logon-error img {
	width: 16px;
	height: 16px;
}

.security-footer {
	padding: 10px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.manage-window {
	max-width: 960px;
}

@media only screen and (min-width: 800px) {
	.manage-window {
		max-height: 700px;
	}
}

/* Fixed layout with absolute column widths. Only one column may be
   width:auto — it absorbs free space when others hide. Options must
   never be that column or it grows and starves Type (see screenshot). */
#shares-table {
	table-layout: fixed;
}

#shares-table .explorer-col-name {
	width: 50%;
}

#shares-table .manage-col-id {
	width: 8em;
}

/* Auto: receives space freed when Expires (etc.) is hidden. */
#shares-table .manage-col-type {
	width: auto;
}

#shares-table .manage-col-expires {
	width: 11em;
}

#shares-table .manage-col-options {
	width: 6em;
	white-space: nowrap;
}

/* Windows-style shortcut arrow over every share row icon. */
#shares-table .explorer-item-icon-stack {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	height: 1.25em;
}

#shares-table .explorer-item-icon-stack .explorer-item-icon {
	display: block;
	height: 1.25em;
}

#shares-table .explorer-item-shortcut-overlay {
	position: absolute;
	left: 0;
	top: 0;
	height: 1.25em;
	width: 1.25em;
	pointer-events: none;
}

/* Progressive column hiding as the list pane shrinks (same approach as
   explorer.css). Order: expires → type → options → share ID. */
@container (max-width: 750px) {
	#shares-table .manage-col-expires {
		display: none;
	}
}

@container (max-width: 600px) {
	#shares-table .manage-col-type {
		display: none;
	}

	/* Type was the flex column; Target takes over once Type is gone. */
	#shares-table .explorer-col-name {
		width: auto;
	}
}

@container (max-width: 450px) {
	#shares-table .manage-col-options {
		display: none;
	}
}

@container (max-width: 320px) {
	#shares-table .manage-col-id {
		display: none;
	}
}

td.manage-col-options {
	font-family: Consolas, "Lucida Console", monospace;
}

#shares-table tr.is-selected,
#browse-table tr.is-selected {
	background: linear-gradient(to top, #c1dcfc, #dcebfc);
}

#shares-table tr.is-selected td,
#browse-table tr.is-selected td {
	border-top: 1px solid #7da2ce;
	border-bottom: 1px solid #7da2ce;
	color: #000;
}

#shares-table tr.is-selected td:first-child,
#browse-table tr.is-selected td:first-child {
	border-left: 1px solid #7da2ce;
}

#shares-table tr.is-selected td:last-child,
#browse-table tr.is-selected td:last-child {
	border-right: 1px solid #7da2ce;
}

/* Transparent dialog host so nested .window glass + shadow show. Do not
   zero padding — that clips the Aero box-shadow (explorer keeps UA padding). */
.manage-dialog {
	border: 0;
	background: none;
	box-shadow: none;
	max-width: calc(100vw - 16px);
}

.manage-dialog::backdrop {
	background: rgba(0, 0, 0, 0.25);
}

#manage-delete .explorer-delete-item {
	margin-top: 10px;
}

.share-form-window {
	width: 520px;
	max-width: 100%;
}

.share-form-body {
	background: #fff;
	padding: 12px 12px 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-height: min(70vh, 560px);
	overflow: auto;
}

.share-option {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.share-option-nested {
	margin-left: 1.5em;
}

.share-option > label:first-child {
	min-width: 5.5em;
	flex-shrink: 0;
}

.share-option > input[type="text"],
.share-option > input[type="password"],
.share-option > input[type="datetime-local"] {
	flex: 1;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.share-id-option {
	position: relative;
	flex-wrap: wrap;
}

#share-id-balloon {
	left: 5.5em;
	right: 0;
	top: auto;
	/* Leave room for the 18px tail so its tip sits above the field. */
	bottom: calc(100% + var(--w7-blt-size, 18px) + 4px);
	z-index: 5;
	box-sizing: border-box;
	pointer-events: none;
}

#tab-text textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	resize: vertical;
	font-family: Consolas, "Lucida Console", monospace;
	font-size: 9pt;
}

#share-upload-row {
	margin-top: 10px;
}

.share-hint {
	margin: 2px 0 0 0;
	font-size: 8pt;
	color: #555;
}

#share-form .share-form-body fieldset {
	margin-bottom: 9px;
}

.change-password-window {
	width: 360px;
	max-width: 100%;
}

.change-password-body {
	background: #fff;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.change-password-body .share-option > label:first-child {
	min-width: 8em;
}

.browse-window {
	width: 480px;
	max-width: 100%;
}

.browse-body {
	background: #fff;
	padding: 10px;
}

.browse-path-row {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 8px;
}

.browse-path-row input {
	flex: 1;
	min-width: 0;
}

.browse-listing {
	height: 280px;
}

#browse-table tr:not(.not-owned) {
	cursor: pointer;
}

#browse-table tr.not-owned {
	opacity: 0.55;
	cursor: pointer;
}