@import '../settings/tw';

/*
 * Placeholders, once, for every admin screen.
 *
 * The credential examples had drifted into looking like filled-in fields:
 * monospace, full opacity, and long enough to run the width of the box. Three
 * rows of that read as three saved keys, and the eye went to them ahead of the
 * labels - which is backwards, because the placeholder is the one thing on the
 * row that is not real.
 *
 * Two of those three were the cause. Monospace is the strongest "this is a
 * value" signal a field has, so a placeholder never gets it: it now takes the
 * face and size of the text it stands in for, and the shape of an example key
 * comes across perfectly well in the same sans as everything else. The
 * examples themselves were shortened; nobody needed thirty-two characters to
 * learn that a secret is a long random string.
 *
 * What did not change is the colour. Browsers default to around #757575 at 60%
 * opacity, which composites to roughly 2.8:1, and slate-400 is 3.28:1 - both
 * below the 4.5:1 that AA asks of text of any size, placeholders included.
 * slate-500 is the lightest that passes, so quieter had to come from the
 * typography rather than from greying it further.
 */
.zmeet-admin-dasboard-bg {

    input::placeholder,
    textarea::placeholder {
        color: $slate-500; /* 4.76:1 on white. */

        /* Firefox dims placeholders by default; this puts it back, so the
           measured ratio is the one that ships. */
        opacity: 1;

        /* The same face and size as the value that replaces it - so nothing
           jumps when somebody starts typing, and nothing reads as data. */
        font-family: inherit;
        font-size: inherit;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
    }
}

/*
 * Top breathing room. MeetingHub's screens sit under a help-links bar that
 * ZooMeet does not carry, so the first heading would otherwise start hard
 * against the admin bar. Applied to the WordPress wrapper rather than the
 * mount, so it survives the per-screen `padding: 0` resets on the mounts.
 */
#wpbody-content > .zmeet-admin-dasboard-bg {
	margin-top: 50px; /* The height MeetingHub's help-links bar takes, so titles share a line. */
}

@media ( max-width: 782px ) {
	#wpbody-content > .zmeet-admin-dasboard-bg {
		margin-top: 56px; /* The help-links bar grows 6px on the mobile admin. */
	}
}

/* Settings has no crumb row above its title; keep the row's 32px so the title
   lands where MeetingHub's Zoom screen puts it. */
.zmeet-hero {
	padding-top: 32px;
}

/*
 * The page gutter every ported screen reads (`var(--zmeet-page-gutter, 24px)`),
 * and the right padding wp-admin does not give #wpbody-content. MeetingHub
 * declares these in its global admin.css; here they live in the app bundle,
 * which only loads on ZooMeet screens, so no other admin page is touched.
 */
#wpwrap {
	--zmeet-page-gutter: 32px;
}

#wpbody-content {
	box-sizing: border-box;
	padding-right: 20px;
}

@media ( min-width: 1600px ) {
	#wpwrap {
		--zmeet-page-gutter: 40px;
	}
}

@media ( max-width: 1200px ) {
	#wpwrap {
		--zmeet-page-gutter: 24px;
	}
}

@media ( max-width: 782px ) {
	#wpwrap {
		--zmeet-page-gutter: 16px;
	}
}

/*
 * All Meetings takes its horizontal gutter from `.zmeet-am`, not from its
 * mount. MeetingHub resets the mount's legacy padding in upgrade-card.css,
 * which only loads on the free build; here it applies on every build, so the
 * list sits on the same column edge with or without Pro.
 */
#zmeet_admin_dasboard {
	padding-left: 0;
	padding-right: 0;
}

/*
 * Swipe strips (wizard steps, report tabs, integration categories) scroll
 * sideways on a phone. They still scroll; the native grey bar under them just
 * read as broken chrome in the middle of the page.
 */
.zmeet-wiz-pills,
.zmeet-cats__list,
.zmeet-tw [role="tablist"] {
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

/*
 * Tab panels take focus (tabindex="0", the ARIA tabs pattern) so a keyboard user
 * can reach content that starts with text. Focus landed there with nothing
 * drawn; the ring matches the rest of the kit.
 */
.zmeet-admin-dasboard-bg [role="tabpanel"]:focus-visible {
	outline: 2px solid #0b5cff;
	outline-offset: 4px;
	border-radius: 12px;
}

/*
 * The page column of All Meetings and Zoom Recordings, for the screens built
 * after them (Live Meetings, Live Webinars, Import, Categories): capped at
 * 1420px, centred, the shared gutter.
 */
.zmeet-page-column {
	box-sizing: border-box;
	max-width: 1420px;
	margin-left: auto;
	margin-right: auto;
	padding: 24px var(--zmeet-page-gutter, 24px) 40px;
}

/*
 * Live Meetings, Live Webinars, Import and Categories are drawn with All
 * Meetings' own header and column (`.zmeet-am-header`, `.zmeet-am`), so their
 * mounts take the 30px All Meetings' mount gets from meeting.scss. Without it
 * the title sat 30px higher than on All Meetings, one click away.
 */
#zmeet_live_meetings,
#zmeet_live_webinars,
#zmeet_import,
#zmeet_categories {
	padding-top: 30px;
}