/*
 * Skin "manager": the look of NT Business Manager (Helvetica, compact, light grey bars, green/teal accents,
 * dotted-underline headings). Switched on per host with `skin: manager` in config/tenants.yml, or for every host
 * with the SKIN=manager environment variable. Everything is scoped to body[data-skin="manager"].
 */
body[data-skin="manager"] {
  --primary: #054f66;
  --primary-ink: #ffffff;
  --accent: #5c7a56;
  --ink: #222222;
  --muted: #666666;
  --line: #e0e0e0;
  --surface: #ffffff;
  --page: #ffffff;
  --ok: #264409;
  --ok-bg: #e6efc2;
  --warn: #514721;
  --warn-bg: #fff6bf;
  --bad: #8a1f11;
  --bad-bg: #fbe3e4;
  --radius: 3px;
  --shadow: none;
  --tap: 44px;
  --manager-green: #006150;
  --manager-head: #5c7a56;
  --manager-bar: #f5f5f5;
  --manager-current: #e1e4e6;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

body[data-skin="manager"] a { color: #444444; text-decoration: none; }
body[data-skin="manager"] a:hover { color: #000000; text-decoration: underline; }

/* ---- Header and navigation bars ---------------------------------------------------------------------------- */
body[data-skin="manager"] .topbar {
  position: static;
  border-bottom: 0;
  padding: .6rem 1rem;
}
body[data-skin="manager"] .topbar .brand { font-weight: 800; color: var(--manager-green); }
body[data-skin="manager"] .topbar nav { background: transparent; }
body[data-skin="manager"] .topbar nav .btn,
body[data-skin="manager"] .topbar nav button {
  background: transparent; border-color: transparent; color: #1d2f43; font-weight: 700; font-size: .95rem; border-radius: 0;
}
body[data-skin="manager"] .topbar nav .btn:hover,
body[data-skin="manager"] .topbar nav button:hover { background: var(--manager-current); text-decoration: none; }


/* ---- Headings, cards, flash messages -------------------------------------------------------------------------- */
body[data-skin="manager"] .page { max-width: 46rem; }
body[data-skin="manager"] .page.wide { max-width: none; width: 95%; }
body[data-skin="manager"] h1 {
  color: var(--manager-green);
  font-size: 1.15rem;
  border-bottom: 1px dotted #a1a1a1;
  padding-bottom: .25rem;
  margin: 1rem 0 1rem;
}
body[data-skin="manager"] h2 { color: #111111; font-size: 1rem; }
body[data-skin="manager"] .card { border: 1px solid var(--line); box-shadow: none; background: #ffffff; }
body[data-skin="manager"] .flash { border-width: 2px; text-align: center; }
body[data-skin="manager"] .flash.notice { border-color: #c6d880; }
body[data-skin="manager"] .flash.alert { border-color: #fbc2c4; }

/* ---- Forms and buttons ------------------------------------------------------------------------------------------ */
body[data-skin="manager"] input[type="text"], body[data-skin="manager"] input[type="tel"], body[data-skin="manager"] input[type="email"],
body[data-skin="manager"] input[type="password"], body[data-skin="manager"] input[type="date"], body[data-skin="manager"] input[type="number"],
body[data-skin="manager"] input[type="search"], body[data-skin="manager"] select, body[data-skin="manager"] textarea {
  background-color: #f0f0f0;
  border: 1px solid #a1a1a1;
  border-radius: 3px;
}
body[data-skin="manager"] input:focus, body[data-skin="manager"] select:focus, body[data-skin="manager"] textarea:focus {
  background-color: #ffffff;
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
body[data-skin="manager"] label { font-weight: 700; }
body[data-skin="manager"] legend { color: var(--manager-green); }

/* Manager's buttons are grey "a.button"s; the call to action is the teal "button-select". */
body[data-skin="manager"] .btn.secondary, body[data-skin="manager"] button.secondary {
  background: #f0f0f0; color: #666666; border: 1px solid #a1a1a1;
}
body[data-skin="manager"] .btn.secondary:hover, body[data-skin="manager"] button.secondary:hover { background: #f9f9f9; text-decoration: none; }
body[data-skin="manager"] .btn, body[data-skin="manager"] button, body[data-skin="manager"] input[type="submit"] {
  border-radius: 3px; font-weight: 600; background: var(--primary); border-color: var(--primary); color: #e1e4e6;
}
body[data-skin="manager"] .btn:hover, body[data-skin="manager"] button:hover, body[data-skin="manager"] input[type="submit"]:hover {
  background: #69b3ca; border-color: #69b3ca; color: #ffffff; text-decoration: none;
}
body[data-skin="manager"] .btn.secondary:hover, body[data-skin="manager"] button.secondary:hover { color: #222222; }
body[data-skin="manager"] .btn.danger, body[data-skin="manager"] button.danger { background: #8a1f11; border-color: #8a1f11; color: #ffffff; }
body[data-skin="manager"] .btn.ghost, body[data-skin="manager"] button.ghost { background: transparent; color: #1d2f43; border-color: transparent; }

/* ---- Tables, badges, tiles, wizard ---------------------------------------------------------------------------------- */
body[data-skin="manager"] .tile { border: 1px solid var(--line); box-shadow: none; }
body[data-skin="manager"] .tile strong { color: var(--manager-green); }
body[data-skin="manager"] .badge.NEW { background: #d7e3e4; color: #054f66; }
body[data-skin="manager"] .progress span.done { background: var(--manager-head); }
body[data-skin="manager"] .upload.filled { border-color: var(--manager-head); background: #eef3ec; }

@media (min-width: 720px) {
  body[data-skin="manager"] .table { border: 1px solid var(--line); border-radius: 0; }
  body[data-skin="manager"] .table thead { background: var(--manager-head); }
  body[data-skin="manager"] .table th { color: #ffffff; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .85rem; }
  body[data-skin="manager"] .table tbody tr:hover { background: #d7e3e4; }
  body[data-skin="manager"] .table tbody tr + tr { border-top: 1px solid #eeeeee; }
}
@media (max-width: 719px) {
  body[data-skin="manager"] .table tr { border-radius: 3px; border-left: 4px solid var(--manager-head); }
}

/* Manager's admin menu is a horizontal bar under the header (two rows when needed), not a sidebar. */
@media (min-width: 960px) {
  body[data-skin="manager"] .admin-layout { display: block; }
  body[data-skin="manager"] .admin-nav.menu-bar { border-right: 0; border-bottom: 1px solid var(--line); background: var(--manager-bar); }
  body[data-skin="manager"] .admin-nav.menu-bar ul { display: flex; flex-wrap: wrap; align-items: stretch; }
  body[data-skin="manager"] .admin-nav.menu-bar .section { display: none; }
  body[data-skin="manager"] .admin-layout .page { padding: 1rem 1.5rem 3rem; }
}

/* ---- Footer ---------------------------------------------------------------------------------------------------------------- */
body[data-skin="manager"] .footer { border-top: 1px solid #a1a1a1; color: #777777; font-size: .8rem; text-align: left; margin: 1.5rem 1rem 0; padding: .4rem 0; }