/* Portal Tablet Styles (769px to 1024px) */
/* style-portal-t.css */

@media (min-width: 769px) and (max-width: 1024px) {
	/* -------------------- Layout -------------------- */
	.portal-container {
		margin: 1rem;
		margin-inline-end: 2rem;
		gap: 1rem;
	}

	.user-sidebar {
		min-inline-size: 220px;
	}

	.user-container {
		padding: 0.8rem;
		gap: 0.8rem;
	}

	.user-container img {
		height: 2.5rem;
	}

	.user-container h4 {
		font-size: 1rem;
	}

	.user-controls a {
		font-size: 0.85rem;
		padding-inline-start: 0.8rem;
	}

	/* -------------------- Cards -------------------- */
	.card {
		padding: 15px;
	}

	.subtitle {
		font-size: 1.4rem;
	}

	/* -------------------- Notifications Grid -------------------- */
	.notif-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.8rem;
	}

	.notif-box {
		padding: 0.8rem;
	}

	.notif-box h4 {
		font-size: 0.95rem;
	}

	.notif-box h5 {
		font-size: 0.85rem;
	}

	/* -------------------- Forms (Portal) -------------------- */
	.customer-info-container {
		gap: 0.8rem;
	}

	.f {
		gap: 6px;
	}

	.f label {
		font-size: 0.8rem;
	}

	.ft {
		padding-inline-start: 0.8rem;
		font-size: 0.9rem;
	}

	/* -------------------- Tables -------------------- */
	.table {
		min-width: 600px;
		font-size: 0.8rem;
	}

	.table th,
	.table td {
		padding: 8px 6px;
	}

	.btn-action {
		padding: 3px 8px;
		font-size: 0.7rem;
	}

	.actions {
		gap: 3px;
	}

	/* -------------------- Suggestion Table -------------------- */
	.suggestion-table {
		gap: 0.5rem;
	}

	.suggestion-table div {
		padding: 0.5rem;
		font-size: 0.8rem;
	}

	.sug6 {
		font-size: 0.75rem;
	}

	/* -------------------- Modal -------------------- */
	.ui-modal-content {
		width: 85%;
		max-width: 500px;
		padding: 15px 20px;
	}

	.ui-modal-content h3 {
		font-size: 1.2rem;
	}

	/* -------------------- Buttons -------------------- */
	.s-btn {
		font-size: 0.9rem;
		padding: 0.4rem 0.8rem;
		height: auto;
	}

	.ui-btns {
		height: 2rem;
		width: 2rem;
	}

	/* -------------------- Login Form -------------------- */
	.login-container {
		margin: 3rem;
	}

	.login-form {
		padding: 1.5rem;
		gap: 1.5rem;
	}

	.login-container h2 {
		font-size: 1.5rem;
	}

	.form-item input {
		font-size: 1rem;
	}
}