/* ---------- Secured Documents (secure-docs.js): Forms & Documents ---------- */
/* Navy structure, blue for actions, red only for problems. Both layouts. */

.sd-strip { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 .9rem; }
.sd-strip button { border: 0; background: none; padding: .5rem .85rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sd-strip button.on { color: var(--navy); border-bottom-color: var(--navy); }
.sd-strip button:hover:not(.on) { color: var(--navy); }

.sd-page .sd-head { display: flex; gap: .8rem; align-items: flex-start; }
.sd-page .sd-lock { flex: 0 0 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); color: var(--navy); border: 1px solid var(--border); }
.sd-page .sd-h3 { margin: 0 0 .9rem; font-size: 1.05rem; color: var(--navy); }
.sd-page .sd-problem { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: #fdecea; color: var(--danger); font-size: .9rem; }

.sd-form { display: grid; gap: 1.1rem; max-width: 46rem; }
.sd-form.is-busy { opacity: .85; }
.sd-field { min-width: 0; }
.sd-label { display: block; font-weight: 700; color: var(--navy); margin: 0 0 .4rem; font-size: .92rem; }
.sd-sub { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 .3rem; color: var(--text); }
.sd-hint { margin: .35rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.sd-field > .sd-hint:last-child { margin-bottom: 0; }
.sd-form input[type="text"], .sd-form input[type="email"], .sd-form input[type="tel"], .sd-form input[type="number"], .sd-form textarea, .sd-combo input {
  width: 100%; box-sizing: border-box; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--card); color: var(--text);
}
.sd-form textarea { resize: vertical; min-height: 4.5rem; }
.sd-form .sd-num { max-width: 7rem; }
.sd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.sd-drop { position: relative; display: flex; flex-direction: column; gap: .2rem; align-items: center; justify-content: center; text-align: center; padding: 1.1rem; border: 1.5px dashed var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; }
.sd-drop.is-over, .sd-drop:hover { border-color: var(--hub-action, #2563eb); }
.sd-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sd-drop-main { font-weight: 600; color: var(--hub-action, #2563eb); }
.sd-drop-sub { font-size: .8rem; }
.sd-files { list-style: none; margin: .6rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sd-files li { display: flex; gap: .7rem; align-items: center; padding: .45rem .7rem; border-top: 1px solid var(--border); font-size: .88rem; }
.sd-files li:first-child { border-top: 0; }
.sd-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-files-total { background: var(--bg); color: var(--muted); font-size: .8rem !important; }
.sd-files-total.is-over { color: var(--danger); font-weight: 600; }

.sd-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sd-seg button { border: 0; border-left: 1px solid var(--border); background: var(--card); padding: .5rem .8rem; font: inherit; font-size: .88rem; cursor: pointer; color: var(--text); }
.sd-seg button:first-child { border-left: 0; }
.sd-seg button.on { background: var(--navy); color: #fff; font-weight: 600; }

.sd-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sd-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--card); }
.sd-choice.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.sd-choice input { margin: .2rem 0 0; accent-color: var(--navy); }
.sd-choice b { display: block; color: var(--navy); font-size: .9rem; }
.sd-choice .muted { display: block; font-size: .8rem; margin-top: .15rem; }
.sd-phone { margin-top: .7rem; max-width: 22rem; }

.sd-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sd-actions .primary { min-width: 12rem; }
.sd-btn-link { display: inline-flex; align-items: center; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--hub-action, #2563eb); color: var(--hub-action, #2563eb); text-decoration: none; font-weight: 600; font-size: .9rem; }

.sd-result { border-left: 4px solid var(--navy); }
.sd-result.is-ok { border-left-color: var(--accent); }
.sd-code { font: 700 2.2rem/1.2 Menlo, Consolas, monospace; letter-spacing: .25em; color: var(--navy); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1rem; display: inline-block; margin: 0 0 .9rem; user-select: all; }

.sd-sent-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; margin-bottom: .8rem; }
.sd-sent-head .sd-h3 { margin: 0; }
.sd-count { font-weight: 600; color: var(--muted); font-size: .9rem; }
.sd-who { font-size: .82rem; }
.sd-filter { margin-left: auto; flex: 0 1 18rem; min-width: 0; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.sd-empty { margin: 0; padding: .9rem; border: 1px dashed var(--border); border-radius: 10px; }

.sd-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sd-row { border-top: 1px solid var(--border); }
.sd-row:first-child { border-top: 0; }
.sd-row-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 9.5rem minmax(11rem, 1fr) 15.5rem; gap: .5rem 1rem; align-items: center; padding: .7rem .9rem; }
.sd-row-who, .sd-row-files, .sd-row-state, .sd-row-dates { display: flex; flex-direction: column; min-width: 0; gap: .1rem; font-size: .86rem; }
.sd-row-who b { color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-row-who .muted, .sd-row-files span, .sd-row-dates span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-row-dates { font-size: .8rem; }
.sd-row .muted, .sd-row b { margin: 0; }
.sd-row-dates span { white-space: normal; }
.sd-row-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sd-small { padding: .3rem .6rem !important; font-size: .8rem !important; }
.sd-revoke { color: var(--text); }

.sd-pill { align-self: flex-start; display: inline-block; font-size: .74rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.sd-pill-live { background: #e8f0ff; color: #1d4ed8; border-color: #c7d7fb; }
.sd-pill-ok { background: #e7f5ef; color: #1f7a5a; border-color: #c4e6d6; }
.sd-pill-off { background: var(--bg); color: var(--muted); }
.sd-pill-bad { background: #fdecea; color: var(--danger); border-color: #f5c6c1; }

.sd-codechoice { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .9rem; background: var(--bg); border-top: 1px dashed var(--border); font-size: .85rem; }
.sd-codechoice > span { flex: 1 1 16rem; }

.sd-activity { padding: .2rem .9rem .8rem; background: var(--bg); border-top: 1px dashed var(--border); }
.sd-ref { font-size: .78rem; margin: .5rem 0; }
.sd-events { width: 100%; border-collapse: collapse; font-size: .82rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sd-events th { text-align: left; font-weight: 600; color: var(--muted); padding: .35rem .6rem; border-bottom: 1px solid var(--border); font-size: .76rem; }
.sd-events td { padding: .35rem .6rem; border-top: 1px solid var(--border); vertical-align: top; }
.sd-events tr.is-warn td:nth-child(2) { color: var(--danger); }

@media (max-width: 900px) {
  .sd-row-main { grid-template-columns: minmax(0, 1fr) auto; }
  .sd-row-actions { justify-content: flex-start; }
  .sd-row-files, .sd-row-dates { grid-column: 1 / -1; }
  .sd-row-state { grid-row: 1; grid-column: 2; align-items: flex-end; text-align: right; }
  .sd-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .sd-grid2, .sd-choices { grid-template-columns: 1fr; }
  .sd-actions .primary { flex: 1 1 100%; }
  .sd-filter { margin-left: 0; flex: 1 1 100%; }
  .sd-events th:nth-child(3), .sd-events td:nth-child(3) { display: none; }
  .sd-code { font-size: 1.9rem; }
}

/* Global input and .muted rules in both layouts: keep them off these bits. */
.sd-page span.muted { margin: 0; }
.sd-choice input[type="radio"] { width: auto; min-width: 0; height: auto; min-height: 0; flex: none; padding: 0; }
.sd-drop input[type="file"] { margin: 0; padding: 0; min-height: 0; border: 0; }

/* Phone (new layout): the row's buttons sit side by side, not full width. */
body.v12-phone .sd-row-actions { flex-wrap: nowrap; gap: .5rem; }
body.hub-v12.v12-phone .sd-row-actions button.secondary, body.v12-phone .sd-row-actions button { width: auto; flex: 0 0 auto; min-height: 40px; padding: .4rem .8rem !important; }
body.v12-phone .sd-row-actions .linkish { white-space: nowrap; padding-left: 0 !important; }
body.v12-phone .sd-row-actions .linkish { margin-right: auto; }
body.hub-v12.v12-phone .sd-codechoice button.secondary, body.v12-phone .sd-codechoice button { width: auto; min-height: 40px; }