/* ==========================================================================
   FF-BASE.CSS  -  ASU "FOTOFIKSACIYA", mobilnyi ARM
   (c) 2008 OOO "InfoSoft-Service"
   rev. 1.6 / 2008-09-14 / avt: Sedov A.
   ---
   2009-02-10 Sedov: vkladki rezhimov (YUI)
   2014-05-19 Kashin: NE MENYAT! podklyucheno v reestre (sm. reestr.css)
   2019-11-27 DS: knopka s'emki zamenena (sm. ds-mui.css)
   2026-10-20 OIT: razmery knopok uvelicheny dlya sensornyh ekranov (zayavka SED 4471/26)
   ========================================================================== */

:root { --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); }
/* интерфейс развёрнут против поворота экрана: вырез сбоку (2026-10-20 ОИТ) */
/* PWA на iOS 26: размытие под статус-баром заходит ниже safe-area — добавляем запас */
@media (display-mode: standalone) { :root { --sat: calc(env(safe-area-inset-top) + 12px); } }
html.r90 { --sat: env(safe-area-inset-left); --sab: env(safe-area-inset-right); }
html.rm90 { --sat: env(safe-area-inset-right); --sab: env(safe-area-inset-left); }

html, body {
	margin: 0; padding: 0; height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 12px;
	color: #000000;
	background: #ECE9D8;
	-webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
button, select, input { font-family: inherit; }
/* зум страницы не нужен: двойной тап и щипок глушим (см. также app.js) */
*, *::before, *::after { touch-action: manipulation; }
.MuiFab-root, .tab, .lens button, .gal-thumb, #btnFlip, .pager .btn, .v-act .btn { touch-action: none; }
[hidden] { display: none !important; }

#rot {
	position: fixed; left: 50%; top: 50%;
	width: 100vw; height: 100vh;
	transform: translate(-50%,-50%);
	overflow: hidden;
}
#app {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	background: #ECE9D8;
}

/* ---------- window header ---------- */
.win-hdr {
	flex: none;
	padding-top: var(--sat);
	background: linear-gradient(to right, #0A246A 0%, #3A6EA5 55%, #A6CAF0 100%);
	color: #FFFFFF;
}
.win-hdr .row { display: flex; align-items: center; height: 30px; padding: 0 2px 0 6px; }
.win-hdr .ttl {
	flex: 1; min-width: 0;
	font-weight: bold; font-size: 12px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	text-shadow: 1px 1px 0 #000033;
}
.win-ico {
	width: 16px; height: 16px; margin-right: 5px; flex: none;
	background: #ECE9D8; border: 1px solid #000; position: relative;
}
.win-ico:before { content: ''; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #316AC5; border: 1px solid #000; }
.win-btn {
	width: 22px; height: 20px; margin-left: 2px; padding: 0;
	font: bold 11px/16px Verdana, sans-serif; color: #000;
	background: #ECE9D8;
	border: 1px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
	box-shadow: inset -1px -1px #808080;
}
.win-btn.big { width: 44px; height: 26px; font-size: 14px; }

.userline {
	flex: none;
	font-size: 10px; color: #333;
	padding: 2px 6px;
	border-bottom: 1px solid #ACA899;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.userline b { color: #0A246A; }

marquee.mq, .mq {
	flex: none; display: block;
	background: #FFFFE1; border-top: 1px solid #E0C000; border-bottom: 1px solid #E0C000;
	color: #CC0000; font-size: 11px; font-weight: bold; height: 17px; line-height: 17px;
}

/* ---------- buttons: Windows Classic ---------- */
.btn {
	min-height: 44px; padding: 0 10px;
	font-size: 12px; color: #000;
	background: #ECE9D8;
	border: 1px solid; border-color: #FFFFFF #716F64 #716F64 #FFFFFF;
	box-shadow: inset -1px -1px #ACA899, inset 1px 1px #F7F6F0;
	border-radius: 0;
	-webkit-appearance: none; appearance: none;
}
.btn:active, .btn.on {
	border-color: #716F64 #FFFFFF #FFFFFF #716F64;
	box-shadow: inset 1px 1px #ACA899;
	padding-top: 1px; padding-left: 11px;
}
.btn.on { background: #F7F6F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23D4D0C8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23D4D0C8'/%3E%3C/svg%3E"); }
.btn[disabled] { color: #ACA899; text-shadow: 1px 1px #fff; }
.btn.def { outline: 1px solid #000; outline-offset: -4px; }

/* ---------- toolbar ---------- */
.toolbar {
	flex: none;
	display: flex; align-items: center; gap: 1px;
	padding: 2px 3px;
	border-bottom: 1px solid #ACA899;
	background: linear-gradient(#F7F6F0, #E3E0D0);
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.toolbar::-webkit-scrollbar { display: none; }
.tb {
	flex: none;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 1px solid transparent;
	position: relative; color: #000;
	-webkit-appearance: none;
}
.tb svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.tb .cap { position: absolute; right: 2px; bottom: 1px; font: bold 9px Verdana, sans-serif; color: #0A246A; }
.tb:active, .tb.on {
	border-color: #716F64 #FFFFFF #FFFFFF #716F64;
	background: #F7F6F0;
}
.tb.dis, .tb[disabled] { opacity: .35; filter: grayscale(1); }
.tb-sep { flex: none; width: 2px; height: 30px; margin: 0 3px; border-left: 1px solid #ACA899; border-right: 1px solid #fff; }
.tb-lbl { flex: none; font-size: 10px; color: #555; padding: 0 4px; white-space: nowrap; }

/* ---------- viewfinder ---------- */
.vf {
	flex: 1; min-height: 0;
	margin: 3px;
	border: 2px solid; border-color: #716F64 #FFFFFF #FFFFFF #716F64;
	background: #000;
	position: relative;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.vf-frame { position: relative; flex: none; }
.vf-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.vf-inner canvas, .vf-inner video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #111; }
.vf-inner video { object-fit: cover; pointer-events: none; }
.vf-inner.raw canvas { visibility: hidden; }
.vf-grid { position: absolute; inset: 0; pointer-events: none; }
.vf-grid:before, .vf-grid:after { content: ''; position: absolute; inset: 0; }
.vf-grid:before {
	border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35);
	left: 33.333%; right: 33.333%;
}
.vf-grid:after {
	border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35);
	top: 33.333%; bottom: 33.333%;
}
.stamp {
	position: absolute; pointer-events: none;
	font-family: "Courier New", Courier, monospace; font-weight: bold;
	color: #FF9A2E; white-space: nowrap; line-height: 1;
}
.vf-info {
	position: absolute; top: 4px; left: 4px; right: 4px;
	display: flex; justify-content: space-between; gap: 4px;
	font: 10px Verdana, sans-serif; color: #00FF00;
	text-shadow: 1px 1px 0 #000; pointer-events: none;
}
.vf-info span { background: rgba(0,0,0,.45); padding: 1px 3px; }
.vf-rot { color: #FFFF00; }

.lens {
	position: absolute; bottom: 8px; left: 0; right: 0;
	display: flex; justify-content: center; gap: 6px;
}
.lens button {
	min-width: 44px; height: 44px; padding: 0 6px;
	font: bold 12px Verdana, sans-serif; color: #000;
	background: #ECE9D8; opacity: .88;
	border: 1px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
	box-shadow: inset -1px -1px #808080;
	-webkit-appearance: none; border-radius: 0;
}
.lens button.on { background: #316AC5; color: #fff; border-color: #0A246A #A6CAF0 #A6CAF0 #0A246A; box-shadow: none; opacity: 1; }

.countdown {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.countdown div {
	background: #ECE9D8; border: 2px solid #0A246A; padding: 10px 18px;
	font: bold 13px Verdana, sans-serif; text-align: center;
	box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.countdown b { display: block; font-size: 40px; color: #0A246A; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: ffflash .35s ease-out; }
@keyframes ffflash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* ---------- error ---------- */
.err {
	background: #FFEEEE; border: 1px solid #CC0000; color: #000;
	padding: 6px 8px; font-size: 11px;
}
.err .t { color: #CC0000; font-weight: bold; margin-bottom: 4px; word-break: break-word; }
.err pre { font: 10px "Courier New", monospace; white-space: pre-wrap; word-break: break-all; margin: 4px 0; max-height: 120px; overflow: auto; background: #fff; border: 1px solid #ccc; padding: 3px; }
.err a { color: #0033CC; }
.vf-err { position: absolute; left: 8px; right: 8px; top: 30px; max-height: calc(100% - 40px); overflow: auto; }
.vf-err .btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- tabs (YUI) ---------- */
.tabs {
	flex: none;
	display: flex; align-items: flex-end;
	padding: 3px 3px 0 3px;
	border-bottom: 1px solid #919B9C;
}
.tab {
	flex: 1; min-width: 0;
	height: 46px; margin-right: 2px; padding: 3px 2px 0;
	font-size: 11px; line-height: 13px; color: #000; text-align: center;
	background: linear-gradient(#FFFFFF, #ECEBE6 60%, #D6D3C8);
	border: 1px solid #919B9C; border-bottom: 0;
	-webkit-appearance: none; border-radius: 0;
	position: relative; top: 1px;
}
.tab b { display: block; font-size: 12px; color: #0A246A; }
.tab small { display: block; font-size: 9px; color: #808080; }
.tab.act {
	height: 50px;
	background: #FCFCFE;
	border-top: 3px solid #FFC83C;
	z-index: 1;
}

/* ---------- controls ---------- */
.ctl {
	flex: none;
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 18px 8px;
	background: #FCFCFE;
	border-bottom: 1px solid #ACA899;
}
.gal-thumb {
	width: 64px; height: 64px; padding: 0;
	border: 2px solid; border-color: #716F64 #FFFFFF #FFFFFF #716F64;
	background: #fff center/cover no-repeat;
	position: relative;
	-webkit-appearance: none; border-radius: 0;
}
.gal-thumb .empty { font-size: 9px; color: #808080; line-height: 11px; display: block; padding: 4px 2px; }

/* ---------- status bar ---------- */
.statusbar {
	flex: none;
	display: flex;
	font-size: 10px; color: #000;
	padding: 2px 2px calc(2px + var(--sab));
	background: #ECE9D8;
	border-top: 1px solid #fff;
	white-space: nowrap; overflow: hidden;
}
.statusbar span {
	padding: 1px 4px; margin-right: 2px;
	border: 1px solid; border-color: #ACA899 #fff #fff #ACA899;
	overflow: hidden; text-overflow: ellipsis;
}
.statusbar span:first-child { flex: 1; min-width: 0; }

/* ---------- viewer window (overlay) ---------- */
.ovl { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #ECE9D8; }
.v-img {
	flex: 1; min-height: 0; margin: 3px;
	border: 2px solid; border-color: #716F64 #FFFFFF #FFFFFF #716F64;
	background: #808080;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	position: relative;
}
.v-img img { max-width: 100%; max-height: 100%; display: block; -webkit-user-drag: none; }
.pager {
	flex: none;
	display: flex; align-items: center; justify-content: center; gap: 2px;
	padding: 2px 3px; font-size: 12px;
}
.pager .btn { min-width: 48px; font-weight: bold; padding: 0 6px; }
.pager .pg { padding: 0 8px; white-space: nowrap; }
.v-act { flex: none; padding: 4px 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.v-act .wide { grid-column: 1 / -1; }
.v-act .btn { width: 100%; }
.v-act .btn.pri { font-weight: bold; min-height: 52px; }
.v-act .btn.danger { color: #CC0000; }

.panel { margin: 3px; border: 1px solid #7F9DB9; background: #fff; }
.panel-hdr {
	background: linear-gradient(to right, #0A246A, #A6CAF0);
	color: #fff; font-weight: bold; font-size: 11px; padding: 3px 6px;
}
table.grid { width: 100%; border-collapse: collapse; font-size: 11px; }
table.grid td { padding: 3px 5px; border-bottom: 1px solid #D6DFEC; vertical-align: top; word-break: break-all; }
table.grid td.k { background: #F2F5FA; color: #0A246A; white-space: nowrap; width: 1%; word-break: normal; }
table.grid td.null { color: #ACA899; font-style: italic; }
.props { max-height: 38vh; overflow: auto; }