/* =====================================================================
   NTRA - App (sito aperto dalla schermata Home)
   inc/features/ntra-feature-app-shell.php, assets/js/ntra-app.js

   Tutto vale solo con html.ntra-in-app (app installata o anteprima):
   nel browser il sito resta identico. Caricato anche nel pannello, dove
   le variabili di style.css non ci sono: ogni var() ha il suo valore di riserva.
   ===================================================================== */
:root {
	--ntra-app-top-h: 52px;
	--ntra-app-bar-h: 62px;
	--ntra-app-safe-top: env(safe-area-inset-top, 0px);
	--ntra-app-safe-bottom: env(safe-area-inset-bottom, 0px);
	--ntra-app-line: var(--nta-border, 2px solid #000);
	--ntra-app-accent: var(--nta-gold, #FFEB9F);
}

.ntra-app-top,
.ntra-app-bar,
.ntra-app-preview-pill,
.ntra-app-login-browse,
.ntra-app-banner[hidden] {display: none;}

/* ---------- Banner "Installa l'app" (browser del telefono) ---------- */
.ntra-app-banner {
	position: fixed; top: 0; right: 0; left: 0; z-index: 1001;
	display: flex; align-items: center; gap: 10px;
	padding: calc(8px + var(--ntra-app-safe-top)) 6px 8px 12px; box-sizing: border-box;
	color: var(--nta-black, #000); background: var(--nta-gold, #FFEB9F); border-bottom: var(--ntra-app-line);
}
.ntra-app-banner img {flex: none; width: 40px; height: 40px; background: #fff; border: var(--ntra-app-line); border-radius: 10px;}
.ntra-app-banner p {flex: 1; min-width: 0; margin: 0; font-size: var(--nta-fs-small, 14px); line-height: 1.3;}
.ntra-app-banner strong {display: block; color: var(--nta-black, #000);}
.ntra-app-banner small {display: block; font-size: var(--nta-fs-xs, 11px);}
.ntra-app-banner [hidden] {display: none;}
.ntra-app-banner-install {flex: none; min-height: 36px; margin: 0; padding: 0 14px; color: var(--nta-black, #000); font-weight: 700; background: var(--nta-white, #fff); border: var(--ntra-app-line); border-radius: var(--nta-btn-radius, 6px); box-shadow: var(--nta-control-shadow, 0 2.4px 0 0 #000); cursor: pointer;}
/* Sopra la pagina, senza spostarla: niente "salto" del contenuto (CLS) quando compare */
.ntra-app-banner:not([hidden]) {animation: ntra-app-banner-in 0.25s ease-out; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);}
@keyframes ntra-app-banner-in {from {transform: translateY(-100%);}}

/* ---------- Sito: via testata e footer, il contenuto parte subito ---------- */
html.ntra-in-app {--nta-menu-clearance: 20px;}
.ntra-in-app body > header.cont_menu,
.ntra-in-app body > footer,
.ntra-in-app .ntra-area-nav {display: none;}
.ntra-in-app body {padding-bottom: calc(var(--ntra-app-bar-h) + var(--ntra-app-safe-bottom));}
.ntra-in-app .ntra-cookie-banner {bottom: calc(var(--ntra-app-bar-h) + var(--ntra-app-safe-bottom) + 12px);}
.ntra-in-app .ntra-dashboard .ntra-dash-side {position: static;}

/* ---------- Tocco: risposta immediata ---------- */
.ntra-in-app a, .ntra-in-app button {-webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.ntra-app-tab:active .ntra-app-tab-icon, .ntra-app-icon-btn:active, .ntra-app-sheet-list a:active {background: var(--ntra-app-accent);}
.ntra-app-loader {display: none;}
.ntra-in-app .ntra-app-loader {position: fixed; top: 0; left: 0; z-index: 1002; display: block; width: 100%; height: 3px; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: var(--nta-coral-dark, #9E3F3E); opacity: 0;}
.ntra-in-app.ntra-app-loading .ntra-app-loader {opacity: 1; animation: ntra-app-load 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;}
@keyframes ntra-app-load {0% {transform: scaleX(0);} 10% {transform: scaleX(0.35);} 100% {transform: scaleX(0.92);}}
.ntra-in-app.ntra-app-loading #contenuto, .ntra-in-app.ntra-app-loading #wpbody-content {opacity: 0.55; transition: opacity 0.15s 0.12s;}

/* ---------- Barra in alto ---------- */
.ntra-in-app .ntra-app-top {
	position: sticky; top: 0; z-index: 95;
	display: flex; align-items: center; gap: 4px;
	min-height: var(--ntra-app-top-h); padding: calc(4px + var(--ntra-app-safe-top)) 6px 4px; box-sizing: border-box;
	background: var(--nta-teal, #71BCC6); border-bottom: var(--ntra-app-line);
}
.ntra-app-brand {display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: var(--nta-black, #000); font-weight: 700; text-decoration: none;}
.ntra-app-brand:hover, .ntra-app-brand:focus {color: var(--nta-black, #000);}
.ntra-app-brand img {flex: none; width: 32px; height: 32px; background: #fff; border: var(--ntra-app-line); border-radius: 50%;}
.ntra-app-brand span {overflow: hidden; font-size: var(--nta-fs-small, 14px); white-space: nowrap; text-overflow: ellipsis;}
.ntra-app-top[data-root] [data-ntra-app-back] {visibility: hidden; width: 4px;}

.ntra-app-icon-btn {
	display: inline-flex; flex: none; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: 0; padding: 0;
	color: var(--nta-black, #000); background: none; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer;
}
.ntra-app-icon-btn:hover, .ntra-app-icon-btn:focus-visible, .ntra-app-icon-btn[aria-current] {color: var(--nta-black, #000); background: rgba(255, 255, 255, 0.45);}
.ntra-app-svg {width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.ntra-app-switch {flex: none; margin-right: 2px; padding: 5px 9px; color: var(--nta-black, #000); font-size: var(--nta-fs-xs, 11px); font-weight: 700; text-decoration: none; background: var(--nta-white, #fff); border: var(--ntra-app-line); border-radius: 999px;}
.ntra-app-login {margin-right: 6px; padding: 6px 12px; color: var(--nta-black, #000); font-weight: 700; text-decoration: none; background: var(--ntra-app-accent); border: var(--ntra-app-line); border-radius: var(--nta-btn-radius, 6px);}

/* ---------- Barra in basso ---------- */
.ntra-in-app .ntra-app-bar {
	position: fixed; right: 0; bottom: 0; left: 0; z-index: 96;
	display: grid; grid-template-columns: repeat(var(--ntra-app-tabs, 5), minmax(0, 1fr)); align-items: center;
	min-height: var(--ntra-app-bar-h); padding: 4px 4px calc(4px + var(--ntra-app-safe-bottom)); box-sizing: border-box;
	background: var(--nta-white, #fff); border-top: var(--ntra-app-line); box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);
}
.ntra-app-tab {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-width: 0; min-height: 52px; margin: 0; padding: 2px; box-sizing: border-box;
	color: var(--nta-black, #000); font-family: var(--nta-font-text, Montserrat, Arial, sans-serif); font-size: var(--nta-fs-xs, 11px); font-weight: 700; line-height: 1.2; text-decoration: none;
	background: none; border: 0; box-shadow: none; cursor: pointer;
}
.ntra-app-tab:hover, .ntra-app-tab:focus {color: var(--nta-black, #000); text-decoration: none;}
.ntra-app-tab:focus-visible {outline: 2.4px solid var(--nta-coral-dark, #9E3F3E); outline-offset: -2px; border-radius: 10px;}
.ntra-app-tab-icon {position: relative; display: inline-flex; padding: 3px 14px; border: 2px solid transparent; border-radius: 14px;}
.ntra-app-tab[aria-current] .ntra-app-tab-icon {background: var(--ntra-app-accent); border-color: var(--nta-black, #000);}
.ntra-app-tab-label {max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

/* "+": bottone principale, rialzato */
.ntra-app-tab.is-main .ntra-app-tab-icon {margin-top: -18px; padding: 10px; background: var(--ntra-app-accent); border-color: var(--nta-black, #000); border-radius: 50%; box-shadow: var(--nta-control-shadow, 0 2.4px 0 0 #000);}
.ntra-app-tab.is-main .ntra-app-svg {width: 26px; height: 26px; stroke-width: 2.6;}
.ntra-app-tab.is-main:active .ntra-app-tab-icon {transform: translateY(var(--nta-press, 2.4px)); box-shadow: none;}

.ntra-app-badge {
	position: absolute; top: -6px; right: 2px;
	min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
	color: #fff; font-size: 11px; line-height: 18px; text-align: center;
	background: var(--nta-coral-dark, #9E3F3E); border: 2px solid #fff; border-radius: 9px;
}

/* ---------- Foglio "Cosa possiamo organizzare per te?" ---------- */
.ntra-app-sheet {
	width: 100%; max-width: 560px; max-height: 85vh; margin: auto auto 0; padding: 0 0 calc(12px + var(--ntra-app-safe-bottom)); box-sizing: border-box; overflow: auto;
	color: var(--nta-black, #000); background: var(--nta-cream, #FAF3E0);
	border: var(--ntra-app-line); border-bottom: 0; border-radius: var(--nta-block-radius, 13px) var(--nta-block-radius, 13px) 0 0;
}
.ntra-app-sheet::backdrop {background: rgba(0, 0, 0, 0.45);}
.ntra-app-sheet[open] {animation: ntra-app-sheet-in 0.2s ease-out;}
@keyframes ntra-app-sheet-in {from {transform: translateY(40px); opacity: 0;}}
.ntra-app-sheet-head {position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px 18px; background: inherit;}
.ntra-app-sheet-head h2 {flex: 1; margin: 0; font-size: var(--nta-fs-h3, 1.2rem);}
.ntra-app-sheet-list {display: grid; gap: 10px; margin: 0; padding: 4px 16px; list-style: none;}
.ntra-app-sheet-list li {margin: 0;}
.ntra-app-sheet-list a {display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--nta-black, #000); text-decoration: none; background: var(--nta-white, #fff); border: var(--ntra-app-line); border-radius: var(--nta-field-radius, 8px); box-shadow: var(--nta-control-shadow, 0 2.4px 0 0 #000);}
.ntra-app-sheet-list a:active {transform: translateY(var(--nta-press, 2.4px)); box-shadow: none;}
.ntra-app-sheet-list strong, .ntra-app-sheet-list small {display: block;}
.ntra-app-sheet-list strong {color: var(--nta-black, #000);}
.ntra-app-sheet-list small {margin-top: 2px; font-weight: 400; color: var(--nta-text-muted, #555); font-size: var(--nta-fs-small, 14px); line-height: 1.35;}
.ntra-app-sheet-icon {display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 22px; background: var(--ntra-app-accent); border: var(--ntra-app-line); border-radius: 50%;}

/* ---------- Anteprima dal computer ---------- */
.ntra-app-preview .ntra-app-preview-pill {
	position: fixed; bottom: calc(var(--ntra-app-bar-h) + var(--ntra-app-safe-bottom) + 6px); left: 8px; z-index: 97;
	display: block; margin: 0; padding: 4px 10px; font-size: var(--nta-fs-xs, 11px); font-weight: 700;
	background: var(--nta-white, #fff); border: var(--ntra-app-line); border-radius: 999px;
}

/* ---------- Login aperto dall'app ---------- */
.ntra-in-app .ntra-app-login-browse {display: block; margin: 16px auto 24px; text-align: center; font-weight: 700;}

/* =====================================================================
   Pannello dello staff (wp-admin) in modalità app
   ===================================================================== */
html.ntra-in-app.wp-toolbar {padding-top: 0;}
.ntra-in-app #wpadminbar,
.ntra-in-app #adminmenumain,
.ntra-in-app #wpfooter,
.ntra-in-app #screen-meta-links {display: none;}
.ntra-in-app #wpcontent,
.ntra-in-app.auto-fold #wpcontent {margin-left: 0; padding-left: 12px; padding-right: 12px;}
.ntra-in-app #wpbody-content {padding-bottom: calc(var(--ntra-app-bar-h) + var(--ntra-app-safe-bottom) + 24px);}
.ntra-in-app .ntra-app-top.is-staff {position: fixed; right: 0; left: 0;} /* stampata in fondo alla pagina (admin_footer): si fissa in alto */
.ntra-in-app #wpcontent {padding-top: calc(var(--ntra-app-top-h) + var(--ntra-app-safe-top));}
.ntra-in-app #wpbody {padding-top: 0;}
/* Pagine di impostazioni pensate per il computer: niente pagina più larga del telefono */
.ntra-in-app #wpbody-content input.regular-text,
.ntra-in-app #wpbody-content textarea {max-width: 100%; box-sizing: border-box;}
.ntra-in-app #wpbody-content table.widefat:not(.wp-list-table):not(.ntra-admin-table-wrap *) {display: block; max-width: 100%; overflow-x: auto;}
.ntra-in-app #wpbody-content .ntra-admin-card {min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: auto;}

/* Pagina App (admin.php?page=ntra-admin-app): pensata per il telefono, va bene anche sul computer */
.ntra-app-hub {max-width: 720px;}
.ntra-app-hub .ntra-dash-head {margin-bottom: 8px;}
.ntra-app-hub-title {margin: 24px 0 10px;}
.ntra-app-hub-group {margin: 16px 0 8px; color: #50575e; text-transform: uppercase; letter-spacing: 0.04em;}
.ntra-app-search {display: flex; gap: 8px; margin: 12px 0;}
.ntra-app-search input[type=search] {flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px;}
.ntra-app-search .button {min-height: 44px;}
.ntra-app-quick {display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0;}
.ntra-app-quick .button {display: inline-flex; align-items: center; min-height: 44px;}
.ntra-app-hub .ntra-dash-grid {grid-template-columns: minmax(0, 1fr);}
.ntra-app-hub .ntra-dash-section {padding: 0; background: none; border: 0;}
.ntra-app-hub ul.ntra-dash-tiles {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
.ntra-app-hub-ok {margin: 0; padding: 14px 16px; color: #00702d; font-weight: 600; background: #fff; border: 1px solid #dcdcde; border-radius: 12px;}
.ntra-app-links {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none;}
.ntra-app-links a {display: flex; align-items: center; min-height: 48px; padding: 8px 12px; box-sizing: border-box; color: #1d2327; font-weight: 600; text-decoration: none; background: #fff; border: 1px solid #dcdcde; border-radius: 12px;}
.ntra-app-links a:hover, .ntra-app-links a:focus {border-color: #2271b1; color: #2271b1;}
.ntra-app-device {margin-top: 24px;}
.ntra-app-device .ntra-app-box {margin: 12px 0;}
.ntra-app-device .ntra-app-box h4 {margin: 0 0 6px;}
.ntra-app-device .bottone {display: inline-flex; min-height: 40px; margin: 6px 6px 0 0; padding: 0 14px; font-weight: 700; background: #FFEB9F; border: 2px solid #000; border-radius: 6px; cursor: pointer;}
.ntra-app-device .bottone.is-secondary {background: #fff;}
.ntra-app-device .ntra-link-button {padding: 0; color: #2271b1; text-decoration: underline; background: none; border: 0; cursor: pointer;}
.ntra-app-device [hidden] {display: none !important;}
.ntra-app-hub-foot {margin: 24px 0 8px; text-align: center;}

/* Scrivania aperta dal browser del telefono: link alla pagina App (da lì si installa) */
.ntra-app-hub-link {display: none !important;}

@media (max-width: 782px) {
	html:not(.ntra-in-app) .ntra-app-hub-link {display: inline-flex !important;}
	.ntra-in-app #wpbody-content .wrap {margin-right: 0;}
}