/*
 * Playground webmail skin — extends Roundcube's "elastic" skin (meta.json
 * "extends": "elastic"). This file is loaded INSTEAD of elastic's
 * styles/styles.css (Roundcube's skin loader resolves "/styles/styles.css"
 * against the child skin first), so it starts with an @import of the real
 * elastic stylesheet and then layers brand overrides on top per
 * basic-info/brand/Brand Guidelines.md §9-14, §46-49, §58:
 *   - Canvas (#f1e8d8) / Paper (#faf7f0) grounds, Ink (#171815) text
 *   - Field Green (#244c3a) as the one structural/functional accent
 *   - Barlow / Barlow Condensed / IBM Plex Mono, no system-UI fallback
 *   - square corners everywhere, no pill buttons
 *   - flat by default; hard offset shadow only on primary actions
 *   - no gradients, no soft/glass shadows, no glow
 */

@import url("/skins/elastic/styles/styles.min.css");

/* ---- Brand tokens (work/brand/colors.json) ---- */
:root {
	--pg-canvas: #f1e8d8;
	--pg-paper: #faf7f0;
	--pg-ink: #171815;
	--pg-green: #244c3a;
	--pg-blue: #2367c7;
	--pg-red: #c13d28;
	--pg-yellow: #f2c94c;
	--pg-acid: #c7e23c;
	--pg-dust: #d7cdbb;
	--pg-concrete: #a39d90;
	--pg-graphite: #54554f;
}

/* ---- Brand fonts, self-hosted from the portal's own /fonts/ (CORS allowed) ---- */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/barlow-condensed-400.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("https://portal.theplayground.casa/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

html, body {
	background-color: var(--pg-canvas) !important;
	color: var(--pg-ink) !important;
	font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4,
.sysname,
#logo + h1,
.header-title,
#layout-content > h1,
.boxtitle,
.fancy-list > li.listnav,
.toolbar .dropbutton-label,
.footer-menu-icon,
.listing li .subject,
.thread-count {
	font-family: "Barlow Condensed", "Helvetica Neue", sans-serif !important;
}

code, pre, .datebox, .messagelist .date, time, .time {
	font-family: "IBM Plex Mono", monospace !important;
}

/* ---- Square corners everywhere; no pills, no gradients, no soft shadows ---- */
* {
	border-radius: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Field Green structure: top menu, folder list, selected states */
#layout-menu,
#taskmenu,
#sidebar-menu,
.task-mail #taskmenu .button-inner {
	background-color: var(--pg-green) !important;
	color: var(--pg-paper) !important;
}

#layout-menu .mainmenu li.selected > a,
#layout-menu .mainmenu li > a:hover,
.task-mail #taskmenu .button.selected,
.listing li.selected,
.listing li.selected:focus,
.listing tr.selected,
.listing tr.unfocused.selected {
	background-color: var(--pg-ink) !important;
	color: var(--pg-paper) !important;
}

a, a:visited {
	color: var(--pg-green) !important;
}
a:hover {
	color: var(--pg-ink) !important;
}

/* Icon column (#taskmenu) and any sidebar menu sit on Field Green: the
 * generic `a, a:visited { color: var(--pg-green) }` rule above would
 * otherwise paint green text/icons directly on the green background
 * (Mail, About, etc. became unreadable — see work/screenshots/webmail).
 * Force Paper text/icons here, and give the selected item (Mail on the
 * mail task) the same Ink-fill/Paper-text marker used elsewhere, since
 * elastic's own ".selected" treatment on these particular links isn't
 * covered by the `.button.selected` / `li.selected` selectors above. */
#taskmenu a,
#taskmenu a:visited,
#sidebar-menu a,
#sidebar-menu a:visited {
	color: var(--pg-paper) !important;
}
/* The About/Logout group (.special-buttons) is a separate absolutely-
 * positioned child with its own dark-slate background in elastic — keep it
 * on the same Field Green as the rest of the column rather than a second,
 * near-black tone. */
#taskmenu .special-buttons {
	background-color: var(--pg-green) !important;
}
#taskmenu a:hover,
#sidebar-menu a:hover {
	color: var(--pg-paper) !important;
	background-color: var(--pg-ink) !important;
}
#taskmenu a.selected,
#taskmenu a.selected:visited {
	background-color: var(--pg-ink) !important;
	color: var(--pg-paper) !important;
}

/* Logout: body text stays Paper (readable on green); the brand guide
 * explicitly disallows Signal Red text on a dark background (§58), so the
 * red stays as a small decorative marker dot with its own Paper ring
 * rather than being the icon/text color itself. */
#taskmenu a.logout,
#taskmenu a.logout:hover,
#taskmenu a.logout:visited {
	color: var(--pg-paper) !important;
	position: relative;
}
#taskmenu a.logout::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 8px;
	width: 8px;
	height: 8px;
	background-color: var(--pg-red);
	border: 1px solid var(--pg-paper);
}

/* Panels / cards: Paper ground with a hard ink border, flat by default */
.content-frame,
#layout-content,
.dropdown-menu,
.popupmenu,
.uibox,
.listing,
#messagelist,
.formcontainer,
.propform fieldset,
.message-part,
.boxfooter {
	background-color: var(--pg-paper) !important;
	border-color: var(--pg-ink) !important;
	box-shadow: none !important;
}

/* Primary buttons: Ink fill, Paper text, hard offset shadow (Brand §46/§49) */
.btn,
button.btn,
.formbuttons .button,
#login-form .button.mainaction,
.listing li .read,
a.button {
	border-radius: 0 !important;
	border: 2px solid var(--pg-ink) !important;
	font-family: "Barlow Condensed", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.btn-primary,
.mainaction,
#login-form .button.mainaction,
button[type="submit"].button {
	background-color: var(--pg-ink) !important;
	color: var(--pg-paper) !important;
	box-shadow: 4px 4px 0 var(--pg-green) !important;
	transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.btn-primary:hover,
.mainaction:hover {
	background-color: var(--pg-green) !important;
	border-color: var(--pg-green) !important;
}
.btn-primary:active,
.mainaction:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--pg-green) !important;
}

.btn-secondary,
.btn-default {
	background-color: transparent !important;
	color: var(--pg-ink) !important;
}

/* Small-screen floating action buttons (elastic ships these in its own blue accent) */
a.button.compose,
a.button.create,
.listing-tools .button {
	background-color: var(--pg-ink) !important;
	color: var(--pg-paper) !important;
	border: 2px solid var(--pg-ink) !important;
}
a.button.compose .inner,
a.button.create .inner {
	color: var(--pg-paper) !important;
}

/* Toolbar (Select/Options/Refresh, Reply/Forward/Delete/Mark/More): disabled
 * items inherited elastic's translucent-green treatment (green text at 50%
 * opacity over Paper), which drops well under the 3:1 icon/large-text
 * minimum. Use solid Graphite instead — legible as "available but not
 * active" without the opacity trick. Active items keep a visible square
 * Ink focus outline instead of the browser/elastic default. */
.toolbar a.disabled,
.toolbar a.disabled .inner,
#toolbar-menu a.disabled,
#toolbar-menu a.disabled .inner,
.toolbar span.dropbutton.disabled a {
	color: var(--pg-graphite) !important;
	opacity: 1 !important;
}

.toolbar a:focus-visible,
.toolbar button:focus-visible,
#taskmenu a:focus-visible,
.btn:focus-visible,
a.button:focus-visible {
	outline: 2px solid var(--pg-ink) !important;
	outline-offset: 2px;
}

input, textarea, select,
.propform input,
.propform select,
.propform textarea {
	border-radius: 0 !important;
	border: 2px solid var(--pg-ink) !important;
	background-color: var(--pg-paper) !important;
	color: var(--pg-ink) !important;
	box-shadow: none !important;
}

/* Login screen: Paper panel, Canvas page, no Roundcube/elastic gradient backdrop */
body.task-login,
#login-form {
	background-color: var(--pg-canvas) !important;
}
#login-form {
	border: 2px solid var(--pg-ink) !important;
	background-color: var(--pg-paper) !important;
}

/* Playground wordmark replacing the Roundcube logo.
 * Roundcube's own asset-path resolver (rcmail_output_html::fix_paths /
 * get_skin_file) prioritizes whichever skin a given *template* file was
 * loaded from — since this skin inherits elastic's login.html unchanged,
 * that still resolves "/images/logo.svg" to elastic's own flying-envelope
 * mark rather than ours. CSS `content` on the <img> is the reliable,
 * template-independent override (works regardless of which skin's asset
 * path won the lookup; see work/webmail/skin/README.md for the underlying
 * note). */
#logo,
img#logo,
.logo {
	content: url("/skins/playground/images/pg-word.png") !important;
	max-width: 220px;
	max-height: 64px;
}

/* The icon-column header (.popover-header, ~78px wide) is too narrow for
 * the wordmark at any readable size, and elastic's own dark-slate
 * background (#2f3a3f) put black wordmark glyphs at near-zero contrast —
 * the wordmark looked tiny, clipped to the edges and barely visible (see
 * work/screenshots/webmail). Give it a Paper backing (matches brand's
 * "Paper/Canvas background, Ink text" UI rule, §48) sized to fit the
 * column with real margin instead. */
#layout-menu .popover-header {
	background-color: var(--pg-paper) !important;
}
#layout-menu .popover-header img#logo {
	width: 60px !important;
	height: auto !important;
	max-width: 60px !important;
	max-height: 40px !important;
	margin: 9px auto !important;
	padding: 0 !important;
	display: block !important;
}