/* Echolution Sign - admin styling (dashboard, order builder, order page and
   DocuSeal's own admin pages). Tokens come from views/echolution/_brand_tokens. */

:root { --ec-ink: #1F2933; --ec-muted: #616E7C; --ec-line: #E1E4E8; --ec-red: #B42318; --ec-green-ok: #1E7B4F; }

html, body { background: var(--echolution-ground); } body { color: var(--ec-ink);
       font-family: "Nunito Sans", Verdana, sans-serif; }
body::before { content: ""; display: block; height: 6px;
  background: linear-gradient(to bottom, var(--echolution-primary) 0 4px, var(--echolution-accent) 4px 6px); }
h1, h2, h3, .ec-serif { font-family: "Libre Baskerville", Georgia, serif; color: var(--echolution-primary); }
a.link, .link { color: var(--echolution-primary); }

/* navbar */
.echolution-nav-logo { height: 34px; width: auto; }
.echolution-nav-product { font-family: "Libre Baskerville", Georgia, serif; color: var(--echolution-accent);
  font-size: 1.1rem; font-weight: 700; margin-left: .15rem; }
.ec-nav { display: flex; gap: .25rem; align-items: center; }
.ec-nav-link { padding: .4rem .7rem; border-radius: .5rem; font-weight: 700; color: var(--echolution-primary); white-space: nowrap; }
.ec-nav-link:hover { background: #ECE7DA; }
.ec-nav-link.is-active { background: var(--echolution-primary); color: #fff; }
@media (max-width: 767px) { .ec-nav-link { padding: .35rem .45rem; font-size: .85rem; } }

.ec-admin-footer { max-width: 72rem; margin: 2rem auto 1.5rem; padding: 0 1rem; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--ec-muted); }
.ec-admin-footer .text-center { text-align: right; padding: 0; }

/* layout primitives */
.ec-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1.25rem; }
.ec-page-head h1 { font-size: 1.6rem; margin: 0; }
.ec-sub { color: var(--ec-muted); font-size: .9rem; }
.ec-card { background: #fff; border: 1px solid var(--ec-line); border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; }
.ec-card h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.ec-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ec-grid-2 { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.ec-builder { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.ec-sticky { position: sticky; top: 1rem; }
@media (max-width: 1023px) { .ec-builder { grid-template-columns: 1fr; } .ec-grid-2 { grid-template-columns: 1fr; } }

/* form controls */
.ec-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ec-field > span:first-child, .ec-label { font-size: .78rem; font-weight: 700; color: var(--ec-muted); text-transform: uppercase; letter-spacing: .03em; }
.ec-input, .ec-select, .ec-textarea { width: 100%; border: 1px solid #C9CFD6; border-radius: 10px; background: #fff;
  padding: .55rem .7rem; font: inherit; color: var(--ec-ink); min-height: 44px; }
.ec-textarea { min-height: 80px; }
.ec-input:focus, .ec-select:focus, .ec-textarea:focus { outline: 2px solid var(--echolution-accent); outline-offset: 1px; border-color: var(--echolution-primary); }
.ec-input.is-invalid { border-color: var(--ec-red); }
.ec-help { font-size: .8rem; color: var(--ec-muted); }
.ec-errors { background: #FEF3F2; border: 1px solid #FDA29B; color: var(--ec-red); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }

.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem;
  border-radius: 999px; font-weight: 700; border: 1px solid var(--echolution-primary); background: #fff;
  color: var(--echolution-primary); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ec-btn:hover { background: #F1EEE6; }
.ec-btn-primary { background: var(--echolution-primary); color: #fff; }
.ec-btn-primary:hover { background: #213434; }
.ec-btn-gold { background: var(--echolution-accent); border-color: var(--echolution-accent); color: #1F2933; }
.ec-btn-danger { border-color: var(--ec-red); color: var(--ec-red); }
.ec-btn-sm { min-height: 34px; padding: .3rem .8rem; font-size: .85rem; }
.ec-btn:disabled, .ec-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ec-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.ec-link-btn { background: none; border: 0; color: var(--echolution-primary); font-weight: 700; cursor: pointer; padding: .3rem 0; text-decoration: underline; }

/* segmented switch (commission On/Off, signing order) */
.ec-segmented { display: inline-flex; border: 1px solid var(--echolution-primary); border-radius: 999px; overflow: hidden; }
.ec-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.ec-segmented label { padding: .5rem 1rem; min-height: 40px; display: inline-flex; align-items: center; cursor: pointer;
  font-weight: 700; color: var(--echolution-primary); user-select: none; }
.ec-segmented input:checked + label { background: var(--echolution-primary); color: #fff; }
.ec-segmented input:focus-visible + label { outline: 2px solid var(--echolution-accent); outline-offset: -3px; }

/* line items */
.ec-lines { display: flex; flex-direction: column; gap: .75rem; }
.ec-line { border: 1px solid var(--ec-line); border-radius: 12px; padding: .8rem; background: #FCFBF8; }
.ec-line-grid { display: grid; gap: .6rem; grid-template-columns: 1.2fr 2fr 1fr; }
.ec-line-grid-2 { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; margin-top: .6rem; align-items: end; }
@media (max-width: 900px) { .ec-line-grid, .ec-line-grid-2 { grid-template-columns: 1fr 1fr; } }
.ec-line-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-weight: 700; color: var(--echolution-primary); }
.ec-line-tools { display: flex; gap: .25rem; }
.ec-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #C9CFD6; background: #fff; cursor: pointer; font-weight: 700; color: var(--ec-muted); }
.ec-icon-btn:hover { border-color: var(--echolution-primary); color: var(--echolution-primary); }
.ec-line-total { font-weight: 800; font-size: 1.05rem; color: var(--echolution-primary); text-align: right; }
.ec-inline-add { display: flex; gap: .4rem; margin-top: .4rem; }

/* summary */
.ec-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .45rem .75rem; margin: 0; }
.ec-summary dt { color: var(--ec-muted); }
.ec-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ec-summary .ec-total dt, .ec-summary .ec-total dd { font-weight: 800; color: var(--echolution-primary); font-size: 1.15rem;
  border-top: 2px solid var(--echolution-accent); padding-top: .5rem; }
.ec-summary .ec-cat { font-size: .85rem; }

/* tables, pills, counters */
.ec-table { width: 100%; border-collapse: collapse; background: #fff; }
.ec-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ec-muted); padding: .6rem .7rem; border-bottom: 2px solid var(--ec-line); }
.ec-table td { padding: .7rem; border-bottom: 1px solid var(--ec-line); vertical-align: middle; }
.ec-table tr:hover td { background: #FBFAF6; }
.ec-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-pill { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ec-pill-draft { background: #EEF0F2; color: #52606D; }
.ec-pill-awaiting_signature { background: #FFF4DB; color: #8A5A00; }
.ec-pill-awaiting_countersign { background: #F6EEDC; color: #7A5B17; border: 1px solid var(--echolution-accent); }
.ec-pill-completed { background: #E3F4EA; color: var(--ec-green-ok); }
.ec-pill-declined, .ec-pill-expired { background: #FEE4E2; color: var(--ec-red); }
.ec-pill-void { background: #E4E7EB; color: #52606D; text-decoration: line-through; }
.ec-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.ec-counter { background: #fff; border: 1px solid var(--ec-line); border-radius: 14px; padding: 1rem 1.1rem; text-decoration: none; display: block; }
.ec-counter strong { display: block; font-family: "Libre Baskerville", Georgia, serif; font-size: 1.8rem; color: var(--echolution-primary); }
.ec-counter span { color: var(--ec-muted); font-size: .88rem; }
.ec-counter.is-alert { border-color: var(--echolution-accent); background: #FBF6EA; }
.ec-alert { border: 1px solid var(--echolution-accent); background: #FBF6EA; border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.ec-flash { border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1rem; background: #E3F4EA; color: var(--ec-green-ok); }
.ec-flash.is-alert { background: #FEF3F2; color: var(--ec-red); }
.ec-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.ec-filters .ec-select { width: auto; min-width: 180px; }
.ec-scroll-x { overflow-x: auto; border-radius: 14px; border: 1px solid var(--ec-line); }

/* activity timeline, signers */
.ec-timeline { list-style: none; margin: 0; padding: 0; }
.ec-timeline li { position: relative; padding: 0 0 .9rem 1.2rem; border-left: 2px solid var(--ec-line); margin-left: .35rem; }
.ec-timeline li::before { content: ""; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--echolution-accent); }
.ec-timeline time { display: block; font-size: .78rem; color: var(--ec-muted); }
.ec-signer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--ec-line); }
.ec-signer:last-child { border-bottom: 0; }
.ec-badge { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ec-muted); font-weight: 700; }

.ec-preview-frame { width: 100%; height: 80vh; border: 1px solid var(--ec-line); border-radius: 12px; background: #fff; }
.ec-hidden { display: none !important; }
.ec-preview-pages { display: flex; flex-direction: column; gap: .8rem; max-height: 80vh; overflow-y: auto; background: #E9E6DD; padding: .8rem; border-radius: 12px; }
.ec-preview-pages img { width: 100%; height: auto; box-shadow: 0 1px 6px rgba(0,0,0,.15); background: #fff; }
html[data-theme], :root[data-theme] { background-color: var(--echolution-ground) !important; }
/* DocuSeal's user avatar (navbar) in brand colours */
.dropdown label.bg-base-content { background: var(--echolution-primary); color: var(--echolution-accent) !important; }
.dropdown label.bg-base-content span { color: var(--echolution-accent); }