/* GC-FOUNDRY-SKIN v2 — Groundcraft Mail
 * A delta-only child of Roundcube's elastic skin (meta.json "extends":"elastic").
 * We inherit elastic's markup/behaviour and re-skin the brand surfaces to Foundry:
 * a LIGHT login portal (full Groundcraft logo on a calm canvas, lifted white card),
 * a graphite task rail with the GC rosette, and a calm LIGHT-DEFAULT content plane
 * with a signal-lime accent. Self-hosted type.
 *
 * Tokens are the canonical Groundcraft Design System 2 values (src/index.css).
 * The applier curls this sheet through static.php and asserts the marker above +
 * the lime token below are really served.
 *
 * Light is the default; dark is an EXPLICIT user toggle only (html.dark-mode) —
 * we deliberately do NOT auto-darken on prefers-color-scheme.
 */

/* 1) inherit elastic wholesale */
@import url("../../elastic/styles/styles.min.css");

/* 2) self-hosted Foundry type — skin-relative, no CDN */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* 3) Foundry tokens. #9bd45f is the marker the static.php proof greps. */
:root {
  --gc-canvas: #f7f8f4;
  --gc-surface: #ffffff;
  --gc-surface-2: #f1f2ed;
  --gc-ink: #1b1e19;
  --gc-ink-2: #525750;
  --gc-muted: #787d74;
  --gc-border: #e3e5dc;
  --gc-border-strong: #ced1c6;
  --gc-lime: #9bd45f;
  --gc-lime-strong: #527d21;
  --gc-lime-hover: #446819;
  --gc-lime-ink: #1c2e0a;
  --gc-lime-soft: #eef7df;
  --gc-nav: #20231e;
  --gc-nav-deep: #171a15;
  --gc-nav-ink: #b6bbb0;
  --gc-nav-ink-strong: #f2f3ef;
  --gc-nav-eyebrow: #7d837a;
  --gc-radius: 12px;
}

/* 4) type — Inter body, Space Grotesk display */
html, body,
input, textarea, select, button, .listing, .propform, .boxcontent {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
h1, h2, h3, .boxtitle, .header-title, #layout-menu .name, .menu .name, .formtitle {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   LOGIN — a world-class LIGHT Groundcraft portal (TK: light mode, full logo).
   A calm light canvas, the FULL Groundcraft logo above a lifted white card.
   ========================================================================== */
body.task-login {
  background: radial-gradient(1200px 620px at 50% -10%, #ffffff 0%, var(--gc-canvas) 55%, #eef0e9 100%) !important;
}
body.task-login #layout,
body.task-login #layout-content,
body.task-login #layout-content.selected {
  background: transparent !important;
  text-align: center;
}
/* the FULL Groundcraft logo (skin_logo '*' = logo.svg — graphite ink + lime),
   centered above the card on the light canvas */
body.task-login #layout-content > img,
body.task-login #layout-content > img#logo {
  width: 208px !important;
  height: auto !important;
  margin: 10vh auto 22px !important;
}
/* the "Groundcraft Mail" product line → a quiet Space Grotesk eyebrow */
body.task-login .footer,
body.task-login #bottomline,
body.task-login #layout-content .product {
  color: var(--gc-muted) !important;
  font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 600;
  margin-top: 18px;
}

/* the form → a clean white Foundry card, lifted off the light canvas with a
   hairline border + a soft graphite shadow */
body.task-login #login-form {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: 18px !important;
  padding: 28px 26px 24px !important;
  max-width: 366px;
  margin: 0 auto !important;
  box-shadow: 0 18px 48px rgba(32, 35, 30, 0.10), 0 2px 6px rgba(32, 35, 30, 0.05) !important;
  text-align: left;
}
body.task-login #login-form .row,
body.task-login #login-form .form-group { margin-bottom: 14px; }

/* WORLD-CLASS FIELDS — wrap the elastic input-group as one calm bordered field
   with a subtle inline icon and a lime focus-within ring. */
body.task-login #login-form .input-group {
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius);
  background: var(--gc-surface);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.task-login #login-form .input-group:focus-within {
  border-color: var(--gc-lime);
  box-shadow: 0 0 0 4px rgba(155, 212, 95, 0.16);
}
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--gc-muted) !important;
}
body.task-login #login-form input.form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 46px;
  font-size: 14px;
  color: var(--gc-ink);
}
body.task-login #login-form input.form-control::placeholder { color: #a2a89c; }

/* primary action — full-width lime, Space Grotesk */
body.task-login #login-form .formbuttons { margin-top: 4px; }
body.task-login #login-form .formbuttons .btn,
body.task-login #login-form button[type="submit"],
body.task-login #login-form .button.mainaction {
  width: 100%;
  height: 46px;
  border-radius: var(--gc-radius) !important;
  background: var(--gc-lime-strong) !important;
  border: none !important;
  color: #fff !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .15s ease;
}
body.task-login #login-form .formbuttons .btn:hover,
body.task-login #login-form button[type="submit"]:hover { background: var(--gc-lime-hover) !important; }

/* "Forgot your password?" — a quiet lime link under the action (rendered by the
   groundcraft_login plugin when a reset URL is configured) */
body.task-login #login-form .gc-login-reset { text-align: center; margin-top: 16px; }
body.task-login #login-form .gc-login-reset a {
  color: var(--gc-lime-strong);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
body.task-login #login-form .gc-login-reset a:hover { color: var(--gc-lime-hover); text-decoration: underline; }

/* ==========================================================================
   APP CHROME — graphite task rail + a calm LIGHT content plane, lime accent
   ========================================================================== */

/* the task rail is graphite, not elastic blue */
#layout-menu, #taskmenu, .special-buttons {
  background-color: var(--gc-nav) !important;
  color: var(--gc-nav-ink);
}
/* the top-left logo cell must share the rail's graphite — elastic gives its
   .popover-header a lighter slate, which left the rosette on a mismatched patch
   above the rail (TK). Blend it into the rail, no divider. */
#layout-menu .popover-header {
  background-color: var(--gc-nav) !important;
  border-bottom: 0 !important;
}
#taskmenu a { color: var(--gc-nav-ink) !important; }
#taskmenu a .inner { color: var(--gc-nav-ink) !important; }
#taskmenu a:hover,
#taskmenu a.selected {
  color: var(--gc-nav-ink-strong) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
#taskmenu a.selected { box-shadow: inset 3px 0 0 0 var(--gc-lime); }
#taskmenu a.logout { color: #d98b7a !important; }

/* links + the general accent → lime */
a, a:visited { color: var(--gc-lime-strong); }
a:hover { color: var(--gc-lime-hover); }

/* primary buttons across the app → lime */
.button.btn-primary, button.btn-primary,
.formbuttons .button.mainaction, a.button.mainaction,
.pagenav .button.mainaction {
  background-color: var(--gc-lime-strong) !important;
  border-color: var(--gc-lime-strong) !important;
  color: #fff !important;
}
.button.btn-primary:hover, button.btn-primary:hover { background-color: var(--gc-lime-hover) !important; }

/* the Compose button, incl. the floating action button — lime, not elastic blue */
.special-buttons a.compose,
a.compose.button,
a.button.compose {
  background-color: var(--gc-lime-strong) !important;
  color: #fff !important;
}

/* inputs across the app — lime focus */
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--gc-lime) !important;
  box-shadow: 0 0 0 3px var(--gc-lime-soft) !important;
}

/* selected message / list rows → lime-soft with a lime edge */
.listing tbody tr.selected,
.messagelist tbody tr.selected,
table.listing tr.selected > td,
.listing li.selected {
  background-color: var(--gc-lime-soft) !important;
  color: var(--gc-lime-ink) !important;
}
/* active folder in the folder list */
#mailboxlist li.selected > a,
.folderlist li.selected > a {
  background-color: var(--gc-lime-soft) !important;
  color: var(--gc-lime-ink) !important;
  box-shadow: inset 3px 0 0 0 var(--gc-lime-strong);
}
/* unread count badges → lime */
.messagelist .unreadcount,
span.unreadcount { background: var(--gc-lime-strong) !important; color: #fff !important; }

/* toolbar hover — a quiet lime tint */
.toolbar a.button:hover,
.toolbarmenu a:hover { background-color: var(--gc-lime-soft) !important; color: var(--gc-lime-ink) !important; }

/* ==========================================================================
   DARK — EXPLICIT toggle only (html.dark-mode). Light is the default;
   we do NOT auto-darken on prefers-color-scheme (TK: dark is too much).
   ========================================================================== */
html.dark-mode {
  --gc-canvas: #141613;
  --gc-surface: #1b1e19;
  --gc-ink: #eceee7;
  --gc-ink-2: #b5bab0;
  --gc-muted: #878d82;
  --gc-border: #2c2f29;
  --gc-lime-strong: #a5da70;
  --gc-lime-hover: #b8e38c;
  --gc-lime-soft: rgba(155, 212, 95, 0.14);
  --gc-nav: #101210;
}
html.dark-mode a, html.dark-mode a:visited { color: var(--gc-lime-strong); }