/* DroneNet theme — App mode (phones, touch tablets, installed app). Active only under html.nt-app.
 * Logical properties: one file for Hebrew (RTL) and English / French (LTR). Flag colours: blue & white. */

/* Shell elements are hidden outside the app mode. */
.nt-tabbar, .nt-sheet, .nt-progress, .nt-appbar__back, .nt-appbar__title, .nt-only-app { display: none; }
.nt-sheet[hidden] { display: none !important; }

html.nt-app {
	--nt-header-h: 56px;
	--nt-tab-h: 62px;
	--nt-safe-b: env(safe-area-inset-bottom, 0px);
	--nt-gutter: 14px;
	-webkit-tap-highlight-color: transparent;
	scroll-padding-top: calc(var(--nt-header-h) + 12px);
}
html.nt-app body {
	padding-block-end: calc(var(--nt-tab-h) + var(--nt-safe-b));
	overscroll-behavior-y: none;
}
html.nt-app :is(a, button, input, select, textarea, label, summary) { touch-action: manipulation; }

/* ---------------------------------------------------------------- App bar (site header, compact) */
html.nt-app .nt-header { border-block-end-width: 3px; transition: transform .25s ease; padding-block-start: env(safe-area-inset-top, 0px); }
html.nt-app.nt-head-hidden .nt-header { transform: translateY(-110%); }
html.nt-app .nt-header__bar { min-block-size: var(--nt-header-h); gap: 6px; inline-size: calc(100% - 2 * var(--nt-gutter)); }
html.nt-app .nt-nav,
html.nt-app .nt-burger,
html.nt-app .nt-header .dn-lang,
html.nt-app .nt-header [data-nt-theme-toggle],
html.nt-app .nt-header .nt-cta,
html.nt-app .nt-header .nt-login,
html.nt-app .nt-social-btn--feed { display: none !important; }
html.nt-app .nt-header .nt-icon-btn { inline-size: 40px; block-size: 40px; border: 0; background: transparent; border-radius: 50%; position: relative; }
html.nt-app .nt-header .nt-icon-btn:active { background: var(--dn-surface-2); }
html.nt-app .nt-brand__mark { inline-size: 34px; block-size: 34px; }
html.nt-app .nt-brand__name { display: inline; font-size: 1rem; }
html.nt-app .nt-appbar__back { display: inline-grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; margin-inline-start: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--dn-text); cursor: pointer; }
html.nt-app .nt-appbar__back:active { background: var(--dn-surface-2); }
[dir="rtl"] .nt-appbar__back svg { transform: scaleX(-1); }
html.nt-app .nt-appbar__title { display: block; flex: 1; min-inline-size: 0; margin: 0; font-weight: 600; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inner pages: back + title replace the logo. */
html.nt-app .nt-appbar__back ~ .nt-brand,
html.nt-app .nt-appbar__back ~ .custom-logo-link { display: none; }
html.nt-app .nt-header__actions { margin-inline-start: auto; gap: 2px; }

/* Safety banner: kept (flight rules), compact. */
html.nt-app .dn-airspace { font-size: .78rem; }
html.nt-app .dn-airspace__inner { inline-size: calc(100% - 2 * var(--nt-gutter)); padding-block: 6px; gap: 6px; flex-wrap: nowrap; }
html.nt-app .dn-airspace__msg { flex: 1 1 auto; min-inline-size: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.nt-app .dn-airspace__date { display: none; }
html.nt-app .dn-airspace__level { white-space: nowrap; }

/* ---------------------------------------------------------------- Tab bar */
html.nt-app .nt-tabbar {
	display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
	block-size: calc(var(--nt-tab-h) + var(--nt-safe-b)); padding-block-end: var(--nt-safe-b);
	background: color-mix(in srgb, var(--dn-surface) 94%, transparent);
	-webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
	border-block-start: 1px solid var(--dn-border);
	box-shadow: 0 -6px 24px rgba(15, 23, 42, .06);
}
.nt-tab {
	flex: 1; min-inline-size: 0; display: grid; justify-items: center; align-content: center; gap: 3px;
	padding: 6px 2px 4px; border: 0; background: none; color: var(--dn-muted); text-decoration: none;
	font: 600 .68rem/1.1 var(--dn-font); cursor: pointer; position: relative;
}
.nt-tab__icon { position: relative; display: grid; place-items: center; inline-size: 48px; block-size: 30px; border-radius: 999px; transition: background .2s, color .2s, transform .15s; }
.nt-tab__label { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-tab[aria-current="page"], .nt-tab[aria-expanded="true"] { color: var(--dn-primary); }
.nt-tab[aria-current="page"] .nt-tab__icon, .nt-tab[aria-expanded="true"] .nt-tab__icon { background: color-mix(in srgb, var(--dn-primary) 12%, transparent); }
.nt-tab:active .nt-tab__icon { transform: scale(.9); }
.nt-tab--create .nt-tab__icon, .nt-tab--quote .nt-tab__icon { inline-size: 52px; block-size: 36px; background: var(--dn-primary); color: #fff; box-shadow: 0 6px 16px rgba(0, 56, 184, .32); }
.nt-tab--create[aria-expanded="true"] .nt-tab__icon { background: var(--dn-primary-600, #002A8A); }
.nt-tab--create[aria-expanded="true"] svg { transform: rotate(45deg); }
.nt-tab--create svg { transition: transform .2s; }
.nt-tab__badge { position: absolute; inset-block-start: -2px; inset-inline-end: 4px; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; border-radius: 999px; background: var(--dn-danger); color: #fff; font: 700 .66rem/18px var(--dn-font); text-align: center; border: 2px solid var(--dn-surface); }
.nt-tab__badge[hidden] { display: none; }

/* Floating elements move above the tab bar; back-to-top is replaced by "tap the active tab". */
html.nt-app .nt-totop { display: none !important; }
html.nt-app .nt-a11y__toggle { display: none; }
html.nt-app .nt-a11y { inset-block-end: calc(var(--nt-tab-h) + var(--nt-safe-b) + 12px); }
html.nt-app .nt-a11y__panel { max-block-size: 60vh; overflow-y: auto; }

/* ---------------------------------------------------------------- Bottom sheets */
html.nt-app .nt-sheet { display: block; position: fixed; inset: 0; z-index: 120; }
.nt-sheet__backdrop { position: absolute; inset: 0; background: rgba(5, 14, 38, .45); opacity: 0; transition: opacity .25s; }
.nt-sheet__panel {
	position: absolute; inset-inline: 0; inset-block-end: 0; max-block-size: 88vh; max-block-size: 88dvh;
	display: flex; flex-direction: column; background: var(--dn-surface); color: var(--dn-text);
	border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, .25);
	padding-block-end: var(--nt-safe-b); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); outline: none;
}
.nt-sheet.is-open .nt-sheet__backdrop { opacity: 1; }
.nt-sheet.is-open .nt-sheet__panel { transform: translateY(var(--nt-drag, 0px)); }
.nt-sheet.is-dragging .nt-sheet__panel { transition: none; }
.nt-sheet__grip { flex: none; inline-size: 40px; block-size: 5px; margin: 8px auto 2px; border-radius: 999px; background: var(--dn-border); }
.nt-sheet__grip::before { content: ""; display: block; block-size: 28px; margin-block-start: -12px; }
.nt-sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px var(--nt-gutter) 8px; }
.nt-sheet__head h2 { margin: 0; font-size: 1.15rem; }
.nt-sheet__x { inline-size: 36px; block-size: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--dn-surface-2); color: var(--dn-text); cursor: pointer; }
.nt-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px var(--nt-gutter) 20px; }
html.nt-sheet-open, html.nt-sheet-open body { overflow: hidden; }

.nt-sheet__me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--dn-surface-2); color: var(--dn-text); text-decoration: none; }
.nt-sheet__me img { border-radius: 50%; flex: none; }
.nt-sheet__me span { display: grid; }
.nt-sheet__me small { color: var(--dn-primary); font-weight: 600; }
.nt-sheet__quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 10px 4px; }
.nt-sheet__quick a { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--dn-border); color: var(--dn-text); text-decoration: none; font-size: .78rem; font-weight: 600; text-align: center; }
.nt-sheet__quick .dn-icon { color: var(--dn-primary); }
.nt-sheet__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nt-sheet__group { margin-block-start: 18px; }
.nt-sheet__group h3 { margin: 0 4px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dn-muted); }
.nt-sheet__list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--dn-surface-2); overflow: hidden; }
.nt-sheet__list li + li { border-block-start: 1px solid var(--dn-border); }
.nt-sheet__list a, .nt-sheet__list button { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; inline-size: 100%; min-block-size: 50px; padding: 10px 14px; border: 0; background: none; color: var(--dn-text); text-decoration: none; font: 500 .95rem/1.3 var(--dn-font); text-align: start; cursor: pointer; }
.nt-sheet__list a strong { font-weight: 600; flex: 1 1 100%; }
.nt-sheet__list a small { color: var(--dn-muted); font-size: .8rem; flex: 1 1 100%; }
.nt-sheet__list a[aria-current] strong { color: var(--dn-primary); }
.nt-sheet__list a:active, .nt-sheet__list button:active { background: color-mix(in srgb, var(--dn-primary) 8%, transparent); }
.nt-sheet__list--settings svg { color: var(--dn-primary); flex: none; }
.nt-sheet__lang { margin-block-end: 8px; }
.nt-sheet__lang .dn-lang { display: flex; inline-size: 100%; }
.nt-sheet__lang .dn-lang a { flex: 1; text-align: center; min-block-size: 44px; display: grid; place-items: center; }
.nt-sheet__tip { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; font-size: .88rem; color: var(--dn-muted); }
.nt-sheet__legal { margin: 18px 4px 0; font-size: .78rem; color: var(--dn-muted); line-height: 1.9; }
.nt-sheet__legal a { color: inherit; }
html.nt-app .nt-only-app { display: block; }

.nt-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt-actions a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: 1px solid var(--dn-border); color: var(--dn-text); text-decoration: none; }
.nt-actions a:active { background: var(--dn-surface-2); }
.nt-actions__icon { inline-size: 44px; block-size: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--dn-primary) 10%, transparent); color: var(--dn-primary); }
.nt-actions span:last-child { display: grid; }
.nt-actions small { color: var(--dn-muted); font-size: .8rem; }

/* ---------------------------------------------------------------- Navigation feedback */
html.nt-app .nt-progress { display: block; position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 200; block-size: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, var(--dn-primary), var(--dn-sky, #3D7BE0)); }
[dir="rtl"] .nt-progress { transform-origin: 100% 50%; }
html.nt-app.nt-loading .nt-progress { opacity: 1; animation: nt-load 8s cubic-bezier(.1, .7, .1, 1) forwards; }
@keyframes nt-load { from { transform: scaleX(0); } 10% { transform: scaleX(.35); } to { transform: scaleX(.92); } }

/* Page transitions between pages of the site (browsers that support them). */
html.nt-app::view-transition-old(root) { animation: 160ms ease-in both nt-fade-out; }
html.nt-app::view-transition-new(root) { animation: 220ms ease-out both nt-fade-in; }
html.nt-app .nt-tabbar { view-transition-name: nt-tabbar; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes nt-fade-out { to { opacity: 0; } }
@keyframes nt-fade-in { from { opacity: 0; transform: translateY(8px); } }

/* Pull to refresh (installed app only — the browser does it itself elsewhere). */
.nt-ptr { position: fixed; inset-inline-start: 50%; inset-block-start: calc(var(--nt-header-h) + 8px); z-index: 60; inline-size: 38px; block-size: 38px; margin-inline-start: -19px; border-radius: 50%; display: grid; place-items: center; background: var(--dn-surface); color: var(--dn-primary); box-shadow: var(--dn-shadow); opacity: 0; transform: translateY(-40px); pointer-events: none; }
.nt-ptr.is-ready svg { transform: rotate(180deg); }
.nt-ptr.is-loading svg { animation: nt-spin .8s linear infinite; }
@keyframes nt-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Content: app density and touch */
html.nt-app .nt-container,
html.nt-app .dn-container,
html.nt-app body.dn-app .dn-container { inline-size: calc(100% - 2 * var(--nt-gutter)); width: calc(100% - 2 * var(--nt-gutter)); }
html.nt-app .dn-card { border-radius: 18px; padding: 16px; }
html.nt-app :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; min-block-size: 46px; } /* No zoom on focus (iOS). */
html.nt-app textarea { min-block-size: 96px; }
html.nt-app .dn-btn { min-block-size: 46px; }
html.nt-app .dn-btn--sm { min-block-size: 40px; }
html.nt-app .dn-btn:active, html.nt-app .dn-card a:active { opacity: .85; }
html.nt-app .dn-hero--compact { padding-block: 18px 14px; }
html.nt-app .dn-hero--compact h1 { font-size: 1.55rem; }
html.nt-app .dn-hero--compact .dn-lead { font-size: .98rem; }
/* Chips scroll sideways like app filters. */
html.nt-app .dn-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--nt-gutter)); padding-inline: var(--nt-gutter); scroll-snap-type: x proximity; }
html.nt-app .dn-chips::-webkit-scrollbar { display: none; }
html.nt-app .dn-chips > * { flex: none; scroll-snap-align: start; }
/* Member area menu: one sliding strip. */
html.nt-app .dn-mnav { border-radius: 14px; scrollbar-width: none; }
html.nt-app .dn-mnav::-webkit-scrollbar { display: none; }
/* Footer: links live in the menu sheet; legal lines stay. */
html.nt-app .nt-footer__grid { display: none; }
html.nt-app .nt-footer__legal { padding-block: 16px 8px; font-size: .78rem; }
html.nt-app .nt-flag-stripes { block-size: 10px; background: linear-gradient(180deg, var(--dn-primary) 0 3px, #fff 3px 7px, var(--dn-primary) 7px 10px); }
/* Events: date tile and actions sized for the thumb. */
html.nt-app .dn-event__side { position: static; }
html.nt-app .dn-event__cal .dn-btn { flex: 1 1 auto; }

/* Installed app: no browser chrome, a little more top space under the status bar. */
html.nt-standalone .nt-header { padding-block-start: max(env(safe-area-inset-top, 0px), 0px); }

@media (prefers-reduced-motion: reduce) {
	.nt-sheet__panel, .nt-sheet__backdrop, .nt-header, .nt-tab__icon, .nt-tab--create svg { transition: none !important; }
	html.nt-app.nt-loading .nt-progress { animation: none; transform: scaleX(.6); }
}
@media print { .nt-tabbar, .nt-sheet, .nt-progress { display: none !important; } html.nt-app body { padding: 0; } }
