/* style_mobile.css */

/* ============================================================
   1) MOBILE SMALL - fino a 700px
============================================================ */
@media (max-width: 768px) {
    :root {
        --crt-normal-effect:
            0 0 2px var(--crt-glow),
            0 0 3px var(--crt-softglow);
        --crt-low-effect:
            0 0 1px var(--crt-glow),
            0 0 2px var(--crt-softglow);
        --crt-strong-effect:
            0 0 3px var(--crt-bright),
            0 0 6px var(--crt-glow);
        --crt-shadow-my-effect-large:
            0 0 3px  var(--crt-softglow),
            0 0 5px  var(--crt-softglow);
        --crt-shadow-my-effect-close:
            0 0 2px var(--crt-softglow),
            0 0 4px var(--crt-glow);
		--crt-smallglow: 
			0 0 2px rgba(0, 255, 160, 0.35);
    }
}


@media (max-width: 700px) {

    /* Nascondi RAW e terminale */
    .raw_box, #terminal_box {
        display: none !important;
    }
    .terminal-mobile-warning {
        display: block !important;
    }


	/* Top menu: rimane orizzontale */
    .menu-top .menu-display-top {
        gap: 14px;
        font-size: var(--font-text-xs); /* oppure il valore che vorrai */
        padding: 8px 0;
    }

    .menu-top .menu-display-top a {
        font-size: var(--font-text-xs); 
    }
	/* Non deve essere grid */
    .footer-menu-grid .menu-display-footer {
        display: flex !important;
        flex-direction: column;
        gap: 18px;
        align-items: center;
        text-align: center;
    }

    /* Le celle vuote si possono nascondere */
    .footer-menu-grid .menu-display-footer .menu-cell-footer:empty {
        display: none;
    }

    /* Link footer un po’ più piccoli in mobile */
    .footer-menu-grid .menu-display-footer a {
        font-size: var(--font-text-lg);
        display: inline-block;
    }
	
	
	


}


/* ============================================================
   2) MOBILE LARGE / TABLET - 701px -> 900px
============================================================ */
@media (min-width: 701px) and (max-width: 900px) {

    .raw_box, #terminal_box {
        display: block !important;
    }
    .terminal-mobile-warning {
        display: none !important;
    }

    /* adattamenti intermedi, font ridotti, ecc. */
}


/* ============================================================
   3) DESKTOP - da 901px in su / non serve quasi nulla qui
============================================================ */
@media (min-width: 901px) {
    .raw_box, #terminal_box {
        display: block !important;
    }
    .terminal-mobile-warning {
        display: none !important;
    }
}


@media (max-width: 900px) {

	:root {
		--font-title-xxl: 2.8rem;   /* ~45px */
		--font-title-xl: 2.2rem;    /* ~35px */
	    --font-title-lg: 1.8rem;    /* ~29px */
	    --font-title-md: 1.4rem;    /* ~22px */
	    --font-title-sm: 1.1rem;    /* ~17px */
	
	    --font-text-lg: 1rem;       /* 16px */
	    --font-text-md: 0.9rem;     /* 15px */
	    --font-text-sm: 0.8rem;     /* 13px */
	    --font-text-xs: 0.7rem;     /* 11px */
	}
	
    .box{
        border-radius: 2px !important;
        border: var(--crt-boxs-border);
        padding: 10px !important;
    }













	
	.footer-credits p {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	
	
	
	/* 	======================================================
		TELEMETRY TABLE
		====================================================== */
	.full-data * {
		font-size: var(--font-text-xs);
	}
	
	
	.master-box h3 {
		text-align: unset;
		margin-bottom: unset;
		padding-bottom: unset;
	}

	.master-table, .node-row, .full-data {
		font-family: var(--crt-font-mono);
		font-size: var(--font-text-xs);
	}
	
	.master-table td, .master-table th {
		padding: unset;
		text-align: unset;
	}


	.lbl, .lbl-time {
	  font-size: var(--font-text-xxxs)!important;
	  line-height: 0.9em;   /* o anche 0.8em */
	}


	.login-container {
		padding: 25px;
	}
	
	/* La griglia principale diventa verticale */
	.container {
		display: flex !important;
		flex-direction: column !important;
		gap: 20px !important;
	}
	
	#captcha {
		width: 250px;
	}
	
	#callsign {
		width: 250px;
		text-align: center;
	}
	
	.crt-content-chapters {
		text-align: left;
		font-size: var(--font-text-lg)!important;
	}

	.crt-wrapper {
		/* text-align: unset; */
		margin: unset;
		position: unset;
		z-index: unset;
	}
	.crt-wrapper p {
		text-align: center;
	}
	
	
	figure.img-left,
    figure.img-right {
        float: none !important;
        width: 100% !important;
        max-width: 360px;   /* opzionale */
        margin: 20px auto !important;
        display: block;
        text-align: center;
    }

    figure img {
        width: 100%;
        height: auto;
    }
	
	
	
	#freq {
		width: 250px;
		text-align: center;
	}
	
	#date {
		width: 250px;
		text-align: center;
	}
	
	
	
	.layout-frame {
		width: unset;
		max-width: unset;
		margin: unset;
		box-sizing: unset;
	}

	
	#rstSelect {
		width: 250px;
		position: relative;
	}
	
	#locator {
		width: 250px;
		text-align: center;
	}
	


	
	.raw_box {
		font-size: var(--font-text-xs);
	}
	
	#remark {
		width: 200px;
	}
	
	#remarksLabel {
		font-size: var(--font-text-md);
	}
	
	

	/* solo Storico Telemetria !? */
	.table-storico-td, .table-storico-th{
		font-size: var(--font-text-xxs);
		padding: 1px;
	}
	.table-storico-th .lbl {
    	display: block;
		padding: 1px;
	}

	.table-td-small {
		font-size: var(--font-text-xxs);
	}

	.table-th-last-seen{
		font-size: var(--font-text-xs);
	}


	h1,h2,h3{
	}
	h1, h2 {
	}
	h3 {
	}

	/*
	.logbook {
		width: 100%;
		font-size: var(--font-text-md);
		border-collapse: separate;
		border-spacing: 0 12px;
	}
	
	.logbook tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"call date utc"
			"freq mode rst"
			"loc remark remark";
		background: rgba(0,25,25,0.30);
		border: 2px solid rgba(0,255,160,0.25);
		border-radius: 8px;
		padding: 14px;
	}
	
	.logbook thead th {
		font-size: var(--font-text-md);
		padding-bottom: 6px;
	}
	
	.logbook tbody td {
		padding: 6px 10px !important;
		border: none !important;
		font-size: var(--font-text-md);
	}
	*/
	.logbook {
		font-size: var(--font-text-xxs);
	}
	.subhead {
		font-size: var(--font-text-md);
		opacity: 0.8;
		margin-top: 10px;
		text-align: center;
	}
	
	/* MAPPATURA CELLE (NON ADMIN) */
	td[data-field="COL_CALL"]       { grid-area: call; }
	td.editable-date                { grid-area: date; }
	td.editable-time                { grid-area: utc; }
	td[data-field="COL_FREQ"]       { grid-area: freq; }
	td[data-field="COL_MODE"]       { grid-area: mode; }
	td[data-field="COL_RST_RCVD"]   { grid-area: rst; }
	td[data-field="COL_GRIDSQUARE"] { grid-area: loc; }
	td[data-field="COL_COMMENT"]    { grid-area: remark; }
	  
	
	body.admin-mode .logbook tbody tr {
		grid-template-areas:
			"call date utc"
			"freq mode rst"
			"loc remark remark"
			"status delete edit";
	}
	
	body.admin-mode td.toggle-status { grid-area: status; }
	body.admin-mode td.delete-row    { grid-area: delete; }
	body.admin-mode td.edit-tip      { grid-area: edit; }
	
	
	
	
	/*
	.logbook thead {
		display: block;
		margin-bottom: 10px;
	}
	
	.logbook thead tr {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"h-call h-date h-utc"
			"h-freq h-mode h-rst"
			"h-loc h-remark h-remark";
		background: rgba(0, 40, 30, 0.25);
		border: 2px solid rgba(0,255,160,0.25);
		border-radius: 8px;
		padding: 10px;
	}
	
	.logbook thead th {
		padding: 4px 6px !important;
		font-size: var(--font-text-md);
		border: none !important;
		text-align: center;
	}
	
	th:nth-child(1) { grid-area: h-call; }
	th:nth-child(2) { grid-area: h-date; }
	th:nth-child(3) { grid-area: h-utc; }
	th:nth-child(4) { grid-area: h-freq; }
	th:nth-child(5) { grid-area: h-mode; }
	th:nth-child(6) { grid-area: h-rst; }
	th:nth-child(7) { grid-area: h-loc; }
	th:nth-child(8) { grid-area: h-remark; }
	*/
	.logbook thead th {
		font-size: var(--font-text-xxs);
	}
	
	
	
	.master-grid {
		grid-template-columns: 1fr !important; /* 1 colonna */
	}

	.sub_title {
		padding: 0;
		margin-top: -30px;
		font-size: var(--font-title-sm);
		text-align:center;
	}
	.sub_title_content {
		padding: 0;
		margin: 0;
		font-size: var(--font-title-sm);
	}

	.text-content {
		font-size: var(--font-text-lg);
		margin-bottom: 60px;
	}



	
}




/* style_mobile.css / EOF */