/* ==========================================================================
   Content templates plugin
   1. Compose-page picker (rendered above the title on create/edit pages)
   2. Management pages (/manage-templates*), scoped under .j-tpl-admin

   Everything is namespaced j-tpl- so a customer theme can restyle it without
   fighting core selectors. Colours follow Jive's default palette so the pages
   read as part of the site on an unthemed instance.
   ========================================================================== */

/* ---------- 1. Compose-page picker ---------- */

.j-tpl-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #f4f6f8;
    border: 1px solid #d6dde3;
    border-radius: 3px;
    font-size: 13px;
}

.j-tpl-picker-label {
    font-weight: 600;
    margin: 0;
    color: #33414d;
}

.j-tpl-picker .js-tpl-select {
    min-width: 180px;
    max-width: 100%;
    height: 28px;
}

.j-tpl-apply {
    height: 28px;
    padding: 0 12px;
    cursor: pointer;
}

.j-tpl-apply[disabled] {
    cursor: default;
    opacity: .55;
}

.j-tpl-status {
    color: #5c6b78;
    min-height: 1em;
}

/* Shown only to people who may manage templates: the way in for non-admins. */
.j-tpl-manage {
    margin-left: auto;
    font-size: 12px;
    white-space: nowrap;
}

/* AI fill. Rendered only when the feature is on AND jive-ai is reachable. */

.j-tpl-fill {
    height: 28px;
    padding: 0 12px;
    cursor: pointer;
}

.j-tpl-fill[disabled] {
    cursor: default;
    opacity: .55;
}

/*
  The notes panel is a sibling of the picker row inside the same bordered block, so it reads as
  part of the picker rather than as a second, unrelated widget on the compose page.
  flex-basis:100% makes it wrap onto its own line within the flex container.
*/
.j-tpl-notes {
    flex-basis: 100%;
    margin: 10px 0 0;
    padding: 10px 12px 12px;
    background: #fff;
    border: 1px solid #d6dde3;
    border-radius: 3px;
}

.j-tpl-notes-label {
    display: block;
    margin: 0 0 6px;
    color: #33414d;
    font-size: 12px;
    line-height: 1.4;
}

.j-tpl-notes-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #c9d2da;
    border-radius: 3px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
}

/*
  A visible focus indicator on every interactive control, per WCAG 2.2 AA (2.4.11 Focus Not
  Obscured / 2.4.13 Focus Appearance). outline rather than a border swap, so focus never changes
  layout, and offset so it is not clipped by the panel edge.
*/
.j-tpl-notes-input:focus,
.j-tpl-fill:focus,
.j-tpl-notes .j-tpl-btn:focus,
.j-tpl-notes .j-tpl-btn-primary:focus {
    outline: 2px solid #05225a;
    outline-offset: 1px;
}

.j-tpl-notes-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
}

/*
  #5c6b78 on #fff is 4.9:1, clearing the 4.5:1 minimum for normal text (WCAG 1.4.3). The picker's
  own status text uses the same value on #f4f6f8, which is 4.6:1.
*/
.j-tpl-notes-hint {
    color: #5c6b78;
    font-size: 12px;
}

@media (max-width: 600px) {
    .j-tpl-notes-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .j-tpl-notes-hint {
        order: -1;
    }
}

/* ---------- 2. Management pages ---------- */

.j-tpl-admin {
    color: #33414d;
    font-size: 14px;
    line-height: 1.45;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 0 32px;
}

.j-tpl-admin *,
.j-tpl-admin *:before,
.j-tpl-admin *:after {
    box-sizing: border-box;
}

/* Page header */

.j-tpl-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 20px;
}

.j-tpl-page-title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2a33;
}

.j-tpl-page-desc {
    margin: 0;
    color: #5c6b78;
    font-size: 14px;
}

.j-tpl-page-actions {
    flex: 0 0 auto;
}

.j-tpl-back {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #2b6ea8;
    text-decoration: none;
}

.j-tpl-back:hover {
    text-decoration: underline;
}

/* Cards */

.j-tpl-card {
    background: #fff;
    border: 1px solid #d6dde3;
    border-radius: 4px;
    padding: 18px 20px;
    margin: 0 0 16px;
}

.j-tpl-card-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1f2a33;
}

.j-tpl-table-card {
    padding: 0;
    overflow: hidden;
}

/* Alerts */

.j-tpl-alert {
    border: 1px solid;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0 0 16px;
}

.j-tpl-alert p {
    margin: 0;
}

.j-tpl-alert p + p {
    margin-top: 4px;
}

.j-tpl-alert-error {
    background: #fbeaea;
    border-color: #e6b3b3;
    color: #8a2d2d;
}

.j-tpl-alert-success {
    background: #e9f6ec;
    border-color: #b7dfc0;
    color: #1e6b32;
}

/* Table */

.j-tpl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.j-tpl-table th,
.j-tpl-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e3e8ed;
}

.j-tpl-table thead th {
    background: #f4f6f8;
    color: #5c6b78;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    border-bottom: 1px solid #d6dde3;
}

.j-tpl-table tbody tr:last-child td {
    border-bottom: 0;
}

.j-tpl-table tbody tr:hover td {
    background: #fafbfc;
}

.j-tpl-col-name {
    width: 32%;
}

.j-tpl-name {
    font-weight: 600;
    color: #2b6ea8;
    text-decoration: none;
}

.j-tpl-name:hover {
    text-decoration: underline;
}

.j-tpl-row-disabled .j-tpl-name {
    color: #5c6b78;
}

.j-tpl-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.j-tpl-inline {
    display: inline-block;
    margin: 0 0 0 6px;
}

/* Status pills */

.j-tpl-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.j-tpl-pill-on {
    background: #e6f4ea;
    color: #1e7e34;
}

.j-tpl-pill-off {
    background: #eef1f4;
    color: #5c6b78;
}

/* Buttons. Own classes rather than core's so the look does not depend on which
   Jive stylesheet happens to be loaded on the page. */

.j-tpl-btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #c9d2da;
    border-radius: 3px;
    background: #fff;
    color: #33414d;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

.j-tpl-btn:hover {
    background: #f4f6f8;
    text-decoration: none;
}

.j-tpl-btn:focus {
    outline: 2px solid #8db8de;
    outline-offset: 1px;
}

/*
  Jive's own jive.css puts `text-shadow: white 0 1px 0` and `font-weight: 500` on every <button>.
  Both are tuned for its default LIGHT buttons: on this dark blue one the white shadow paints a
  halo directly under white text, which reads as a blurred or "hazy" label, and the 500 overrides
  the 600 the rest of our buttons use. Reset both here rather than leaning on the cascade, since
  jive.css is theme-supplied and its specificity varies per instance.
  White on #2b6ea8 is ~5.3:1, so the colours already clear WCAG AA; this is purely legibility.
*/
.j-tpl-btn-primary,
.j-tpl-btn-primary:hover,
.j-tpl-btn-primary:focus,
.j-tpl-btn-primary:active {
    background: #2b6ea8;
    border-color: #2b6ea8;
    color: #fff;
    text-shadow: none;
    font-weight: 600;
}

/*
  The hover/focus/active states are listed explicitly because jive.css carries
  `button:hover, button:focus { background-color: #f1f1f1 }`, which is two selectors' worth of
  specificity and beat a bare `.j-tpl-btn-primary`. On a dark blue button with white text that
  produced white-on-#f1f1f1 -- 1.07:1, effectively invisible -- but only while focused, so it
  survived every static review. Same family as the text-shadow this button already resets:
  jive.css styles the BARE element, so any custom button has to restate every interactive state.
*/
.j-tpl-btn-primary:hover {
    background: #245d8e;
    border-color: #245d8e;
}

.j-tpl-btn-primary:hover {
    background: #245d8e;
    border-color: #245d8e;
    color: #fff;
}

.j-tpl-btn-small {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
}

.j-tpl-btn-danger {
    color: #a94442;
}

.j-tpl-btn-danger:hover {
    background: #fbeaea;
    border-color: #e6b3b3;
}

/* Forms */

.j-tpl-field {
    margin: 0 0 14px;
    flex: 1 1 220px;
    min-width: 0;
}

.j-tpl-field:last-child {
    margin-bottom: 0;
}

.j-tpl-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

.j-tpl-field-narrow {
    flex: 0 0 220px;
}

.j-tpl-label {
    display: block;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #33414d;
}

.j-tpl-required {
    color: #a94442;
}

.j-tpl-input,
.j-tpl-select,
.j-tpl-body-input {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid #c9d2da;
    border-radius: 3px;
    background: #fff;
    color: #33414d;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
}

.j-tpl-input:focus,
.j-tpl-select:focus,
.j-tpl-body-input:focus {
    border-color: #2b6ea8;
    outline: 2px solid #8db8de;
    outline-offset: 0;
}

.j-tpl-input-wide {
    max-width: 560px;
}

.j-tpl-input-narrow {
    max-width: 120px;
}

.j-tpl-input-error {
    border-color: #a94442;
}

.j-tpl-select {
    height: 32px;
}

.j-tpl-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: normal;
    margin: 6px 0 0;
    cursor: pointer;
}

.j-tpl-help {
    margin: 4px 0 0;
    font-size: 12px;
    color: #5c6b78;
}

.j-tpl-field-error {
    margin: 4px 0 0;
    font-size: 12px;
    color: #a94442;
}

.j-tpl-field-error:empty {
    display: none;
}

.j-tpl-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.j-tpl-inline-form .j-tpl-input {
    display: inline-block;
    width: auto;
    flex: 1 1 260px;
}

.j-tpl-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
}

.j-tpl-form-actions .j-tpl-muted {
    margin-left: auto;
}

/* AI drafting on the create/edit screen */

.j-tpl-draft {
    margin: 0 0 14px;
    padding: 12px;
    background: #f4f6f8;
    border: 1px solid #d6dde3;
    border-radius: 3px;
}

.j-tpl-draft-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
}

.j-tpl-draft-input {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 100%;
}

/* Visible focus indicator on both controls, per WCAG 2.2 AA (2.4.11/2.4.13). outline rather
   than a border swap, so focus never shifts layout. */
.j-tpl-draft-input:focus,
#tpl-draft-run:focus {
    outline: 2px solid #05225a;
    outline-offset: 1px;
}

/* #5c6b78 on #f4f6f8 is 4.6:1, clearing the 4.5:1 minimum for normal text (WCAG 1.4.3). */
.j-tpl-draft-status {
    min-height: 1em;
    color: #5c6b78;
    font-size: 12px;
}

@media (max-width: 600px) {
    .j-tpl-draft-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Body editor */

.j-tpl-editor {
    min-width: 0;
}

/*
  Visually hidden but still announced: the RTE replaces the textarea's visible surface, so the
  label has to survive without taking layout space.
*/
.j-tpl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.j-tpl-body-input {
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 320px;
    resize: vertical;
}

/*
  The RTE mounts as a sibling of the textarea. Constrain it to the card so a wide toolbar wraps
  instead of pushing the form sideways, and keep the focus ring visible rather than clipped.
*/
.j-tpl-editor .tox-tinymce {
    max-width: 100%;
    border-radius: 3px;
}

.j-tpl-editor .tox:not(.tox-tinymce-inline) .tox-editor-header {
    box-shadow: none;
    border-bottom: 1px solid #d6dde3;
}

/* Empty state */

.j-tpl-empty {
    text-align: center;
    padding: 40px 20px;
}

.j-tpl-empty-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #1f2a33;
}

.j-tpl-empty .j-tpl-btn {
    margin-top: 12px;
}

/* Utilities */

.j-tpl-muted {
    color: #5c6b78;
}

.j-tpl-small {
    font-size: 12px;
}

@media (max-width: 800px) {
    .j-tpl-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .j-tpl-table thead {
        display: none;
    }

    .j-tpl-table td {
        display: block;
        border-bottom: 0;
        padding: 6px 16px;
    }

    .j-tpl-table tbody tr {
        display: block;
        border-bottom: 1px solid #e3e8ed;
        padding: 8px 0;
    }

    .j-tpl-col-actions {
        text-align: left;
    }
}

/* Core's link colour rule outranks .j-tpl-btn-primary on an <a>, which rendered the primary
   button's label in near-invisible blue on blue. Element + :visited raises specificity above it. */
.j-tpl-admin a.j-tpl-btn-primary,
.j-tpl-admin a.j-tpl-btn-primary:link,
.j-tpl-admin a.j-tpl-btn-primary:visited,
.j-tpl-admin a.j-tpl-btn-primary:hover,
.j-tpl-admin a.j-tpl-btn-primary:focus {
    color: #fff;
}

/* ---------- In-page confirmation dialog ----------
   Replaces window.confirm() on both the compose picker and the management screen. A browser
   confirm shows the hostname, cannot be styled or made accessible, and blocks the whole tab.
   z-index sits above Jive's own compose chrome but below its lightboxes (which start at 10000). */

/*
  [hidden] MUST win over the display:flex below.
  The browser's default `[hidden] { display: none }` is a plain element-level rule, so ANY class
  selector beats it -- `.j-tpl-dialog { display: flex }` silently made the dialog permanently
  visible, covering the page, while the JS went on toggling the hidden attribute to no effect.
  The buttons then looked dead because closing set hidden=true and changed nothing on screen.
*/
.j-tpl-dialog[hidden] {
    display: none !important;
}

/* Same trap for picker buttons: `.j-tpl-btn { display: inline-block }` beats [hidden]. */
.j-tpl-btn[hidden] {
    display: none !important;
}

.j-tpl-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(31, 42, 51, .55);
}

.j-tpl-dialog-box {
    width: 100%;
    max-width: 420px;
    padding: 18px 20px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    font-size: 13px;
}

.j-tpl-dialog-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1f2a33;
}

/* #33414d on #fff is 10.4:1 (WCAG 1.4.3 needs 4.5:1). */
.j-tpl-dialog-text {
    margin: 0 0 16px;
    color: #33414d;
    line-height: 1.45;
}

.j-tpl-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* Visible focus indicator on both buttons (WCAG 2.4.11 / 2.4.13). outline, not a border swap,
   so focus never shifts layout. */
.j-tpl-dialog-actions .j-tpl-btn:focus,
.j-tpl-dialog-actions .j-tpl-btn-primary:focus {
    outline: 2px solid #05225a;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .j-tpl-dialog-actions {
        flex-direction: column-reverse;
    }

    .j-tpl-dialog-actions button {
        width: 100%;
    }
}