/*
 * Application styles for the Tramontana Client Mailer.
 */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --ink: #1d2330;
  --muted: #6b7280;
  --line: #e4e7ec;
  --brand: #1f5fae;
  --brand-dark: #16447c;
  --ok-bg: #e7f6ec;
  --ok-ink: #1d6b3b;
  --warn-bg: #fdecec;
  --warn-ink: #9b1c1c;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* Ensure the [hidden] attribute always wins, even over display:flex rows
   (used by the client-side type filters). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

a { color: var(--brand); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--ink);
}

.topbar nav { display: flex; gap: 10px; align-items: center; }

.navlink {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
}
.navlink:hover { background: var(--bg); color: var(--ink); }
.navlink--active { background: var(--bg); color: var(--brand); }
.navlink--active:hover { color: var(--brand); }

/* button_to renders a form+button; make it look like the other nav links. */
.topbar nav form { display: inline; }
.navlink--signout { border: 0; background: none; cursor: pointer; font-family: inherit; }
.navlink--signout:hover { background: var(--bg); color: var(--ink); }

/* Signature preview under the compose message box. The signature's own
   margin/border-top come inline with the partial (email-client styling). */
.signature-preview {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 0 16px 16px;
  margin-top: 10px;
  background: #fff;
}
.signature-preview table { margin-top: 12px !important; border-top: 0 !important; }

/* Users CRUD */
.checkbox-label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.hint { font-size: .85rem; margin: 6px 0 0; }
td.actions-cell { display: flex; gap: 12px; align-items: center; }
td.actions-cell form { display: inline; }

.container { max-width: 1040px; margin: 0 auto; padding: 28px; }
.container--wide { max-width: 1560px; }

/* Two-column compose: message on the left, recipients card on the right.
   Sized so the whole form fits one 1920x1080 window without scrolling.
   Grid items stretch, so both cards share the height of the taller one; the
   recipients list flexes to soak up the difference and scrolls internally. */
.compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  gap: 20px;
}
@media (max-width: 1100px) {
  .compose-grid { grid-template-columns: 1fr; }
}
.card--recipients { display: flex; flex-direction: column; }
.card--recipients .field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.card--recipients .recipients {
  flex: 1;
  max-height: calc(100vh - 460px);
  min-height: 240px;
}

h1 { font-size: 1.6rem; margin: 0 0 6px; }
.subtitle { color: var(--muted); margin: 0 0 22px; }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-weight: 600;
}
.flash--notice { background: var(--ok-bg); color: var(--ok-ink); }
.flash--alert { background: var(--warn-bg); color: var(--warn-ink); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

/* Client table */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.clients { width: 100%; border-collapse: collapse; }
table.clients th, table.clients td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
table.clients th { background: #fafbfc; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; }
table.clients tr:last-child td { border-bottom: none; }
table.clients td.muted, .muted { color: var(--muted); }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: #eef2ff;
  color: #3949ab;
}
.badge--org { background: #ecfdf5; color: #047857; }

/* Category type pills (Trust / Superannuation / Company / Individual) */
.badge--trust          { background: #fef3c7; color: #92400e; }
.badge--superannuation { background: #ede9fe; color: #5b21b6; }
.badge--company        { background: #e0f2fe; color: #075985; }
.badge--individual     { background: #f1f5f9; color: #334155; }

/* Form fields (compose, sign-in, users CRUD, password change) */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus,
trix-editor:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 95, 174, .15);
}
.field input::placeholder { color: var(--muted); opacity: .8; }

/* Keep the compose form compact enough that the Send button stays on screen. */
trix-editor {
  min-height: 150px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.recipients {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 0;
}
/* Row layout: checkbox + name + pill on the first line, email stacked under
   the name. The selector doubles up on classes to out-rank `.field label`,
   whose display/font-weight/margin would otherwise leak in. */
.recipients .recipient {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 14px;
  margin: 0;
  font-weight: 400;
}
.recipient:hover { background: var(--bg); }
.recipient input { width: 16px; height: 16px; margin-top: 3px; }
.recipient .r-meta { display: flex; flex-direction: column; min-width: 0; }
.recipient .r-name { font-weight: 600; }
.recipient .r-email { color: var(--muted); font-size: .85rem; }
.recipient .r-pill { margin-left: auto; margin-top: 2px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; }
.btn-link {
  background: none; border: none; color: var(--brand);
  cursor: pointer; font-weight: 600; padding: 0; font-size: .9rem;
}

.actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--brand-dark); }
.btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }

.errors {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.errors ul { margin: 6px 0 0; padding-left: 18px; }

.count-pill { color: var(--muted); font-size: .9rem; }

/* Type filter bar (clients list + compose recipients) */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
/* button_to renders a form; push the refresh button to the bar's right edge. */
.filter-bar .refresh-form { margin-left: auto; }
.filter-bar label {
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
  margin: 0;
}
.filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
.filter-bar select:focus {
  outline: none;
  border-color: var(--brand);
}
.filter-bar input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: .92rem;
}
.filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--brand);
}