/**
 * EquaSign admin — brand design-system overlay (skin).
 *
 * Loaded AFTER admin.css and ONLY when the skin is enabled
 * (EquaSign_Admin::skin_enabled()). Everything is scoped under .equasign-admin so it
 * never leaks into the rest of wp-admin and never clashes with the signer front
 * sheet (signer.css) that shares some class names.
 *
 * It works purely by (1) re-defining the design-system tokens declared in
 * admin.css with EquaSuite brand values, so every base component upgrades
 * automatically, and (2) adding brand-only refinements (fonts, shadows,
 * gradients, the .equasign-head branded header, soft status pills) plus a light
 * brand tint of the native WordPress widgets used by the current views
 * (form-table, widefat tables, .button*). Turning the skin off drops this sheet
 * entirely and the screens fall back to the restrained base look.
 *
 * Fonts: system stack only (no external/CDN files → RGPD-safe, zero requests).
 */

/* ---- Brand tokens (override admin.css values on the same .equasign-admin) ---- */
.equasign-admin {
	/* EquaSuite charter. */
	--equasign-blue:          #1981DE;
	--equasign-blue-dark:     #0C3A66;
	--equasign-blue-light:    #34BFFF;
	--equasign-night:         #000D1C;
	--equasign-blue-hover:    #156fc0;

	/* Re-mapped design-system tokens (brand-tinted surfaces & text). */
	--equasign-surface:       #ffffff;
	--equasign-bg-soft:       #f4f6f9;
	--equasign-border:        #e3e8ef;
	--equasign-border-strong: #cfd8e3;
	--equasign-text:          #1f2d3d;
	--equasign-muted:         #5b6b7f;
	--equasign-faint:         #8a99ab;
	--equasign-accent:        var(--wp-admin-theme-color, #1981DE);

	/* Soft status palette (badges). */
	--equasign-ok-bg:      #e6f7ee; --equasign-ok-fg:      #1a7f4b;
	--equasign-info-bg:    #e7f2fc; --equasign-info-fg:    #156fc0;
	--equasign-read-bg:    #efeafa; --equasign-read-fg:    #6a51b8;
	--equasign-warn-bg:    #fdf0e6; --equasign-warn-fg:    #b5651d;
	--equasign-off-bg:     #f0f2f5; --equasign-off-fg:     #6b7888;
	--equasign-danger-bg:  #fdecea; --equasign-danger-fg:  #b5483f;

	--equasign-radius:        14px;
	--equasign-radius-sm:     9px;
	--equasign-radius-pill:   999px;
	--equasign-gap:           20px;
	--equasign-shadow:        0 1px 2px rgba(12,58,102,.04), 0 4px 16px rgba(12,58,102,.06);
	--equasign-shadow-hover:  0 2px 4px rgba(12,58,102,.06), 0 12px 28px rgba(12,58,102,.12);

	--equasign-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--equasign-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-family: var(--equasign-font-body);
	color: var(--equasign-text);
	-webkit-font-smoothing: antialiased;
}

/* box-sizing per design-system component (no global reset, to avoid disturbing
 * screens not yet reworked into DS markup). */
.equasign-admin .equasign-toolbar,
.equasign-admin .equasign-grid,
.equasign-admin .equasign-panel,
.equasign-admin .equasign-card,
.equasign-admin .equasign-btn,
.equasign-admin .equasign-input,
.equasign-admin .equasign-textarea,
.equasign-admin .equasign-select { box-sizing: border-box; }

/* ---- Branded header (skin ON) --------------------------------------------
 * Echoed by EquaSign_Admin::header(): logo on the left, brand subtitle on the
 * right. In plain mode the base sheet's .equasign-admin-header is used instead. */
.equasign-admin .equasign-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 0 22px;
	margin: 6px 0 26px;
	border-bottom: 1px solid var(--equasign-border);
}
.equasign-admin .equasign-logo { display: flex; align-items: center; }
.equasign-admin .equasign-logo__img { height: 38px; width: auto; display: block; }
.equasign-admin .equasign-head__spacer { flex: 1; }
.equasign-admin .equasign-head__sub {
	font-size: 12.5px;
	color: var(--equasign-faint);
	font-weight: 500;
	padding-left: 16px;
	border-left: 1px solid var(--equasign-border);
}

/* ---- Toolbar / titles ---------------------------------------------------- */
.equasign-admin .equasign-toolbar { margin-bottom: 24px; }
.equasign-admin .equasign-toolbar__title,
.equasign-admin .equasign-page-title {
	font-family: var(--equasign-font-display);
	font-weight: 700;
	color: var(--equasign-blue-dark);
	letter-spacing: -.3px;
}
.equasign-admin .equasign-toolbar__count,
.equasign-admin .equasign-crumb { color: var(--equasign-faint); }
.equasign-admin .equasign-crumb a { color: var(--equasign-blue); }

/* ---- Buttons ------------------------------------------------------------- */
.equasign-admin .equasign-btn { border-radius: var(--equasign-radius-sm); }
.equasign-admin .equasign-btn--primary { background: var(--equasign-blue); box-shadow: 0 2px 8px rgba(25,129,222,.28); }
.equasign-admin .equasign-btn--primary:hover { background: var(--equasign-blue-hover); filter: none; }
.equasign-admin .equasign-btn--ghost { color: var(--equasign-blue-dark); }
.equasign-admin .equasign-btn--ghost:hover { border-color: var(--equasign-blue); color: var(--equasign-blue); }
.equasign-admin .equasign-btn--danger { color: var(--equasign-danger-fg); border-color: #e7a59f; }
.equasign-admin .equasign-btn--danger:hover { background: var(--equasign-danger-bg); border-color: #d98981; color: #93372f; }

/* ---- Panels & cards ------------------------------------------------------ */
.equasign-admin .equasign-panel,
.equasign-admin .equasign-card { box-shadow: var(--equasign-shadow); }
.equasign-admin .equasign-panel__title,
.equasign-admin .equasign-card__title { font-family: var(--equasign-font-display); color: var(--equasign-blue-dark); }
.equasign-admin .equasign-panel__hint { color: var(--equasign-faint); }
.equasign-admin .equasign-card { transition: box-shadow .18s, transform .18s, border-color .18s; }
.equasign-admin .equasign-card:hover { box-shadow: var(--equasign-shadow-hover); transform: translateY(-3px); border-color: var(--equasign-border-strong); }

/* ---- Status badges → soft brand pills ------------------------------------ */
.equasign-admin .equasign-badge {
	color: inherit;
	background: var(--equasign-off-bg);
	font-size: 11px;
	padding: 3px 10px;
	letter-spacing: .1px;
	line-height: 1.5;
}
.equasign-admin .equasign-badge-draft   { background: var(--equasign-off-bg);    color: var(--equasign-off-fg); }
.equasign-admin .equasign-badge-active  { background: var(--equasign-info-bg);   color: var(--equasign-info-fg); }
.equasign-admin .equasign-badge-read    { background: var(--equasign-read-bg);   color: var(--equasign-read-fg); }
.equasign-admin .equasign-badge-signed  { background: var(--equasign-ok-bg);     color: var(--equasign-ok-fg); }
.equasign-admin .equasign-badge-expired { background: var(--equasign-warn-bg);   color: var(--equasign-warn-fg); }
.equasign-admin .equasign-badge-revoked { background: var(--equasign-off-bg);    color: var(--equasign-off-fg); }
.equasign-admin .equasign-badge-refused { background: var(--equasign-danger-bg); color: var(--equasign-danger-fg); }

/* ---- Tabs ---------------------------------------------------------------- */
.equasign-admin .equasign-tab { font-family: var(--equasign-font-body); color: var(--equasign-muted); }
.equasign-admin .equasign-tab:hover { color: var(--equasign-blue-dark); }
.equasign-admin .equasign-tab.is-active,
.equasign-admin .equasign-tab.on { color: var(--equasign-blue); }
.equasign-admin .equasign-tab.is-active::after,
.equasign-admin .equasign-tab.on::after { background: var(--equasign-blue); }

/* ---- Fields -------------------------------------------------------------- */
.equasign-admin .equasign-label { color: var(--equasign-blue-dark); }
.equasign-admin .equasign-input:focus,
.equasign-admin .equasign-textarea:focus,
.equasign-admin .equasign-select:focus { border-color: var(--equasign-blue); box-shadow: 0 0 0 3px rgba(25,129,222,.13); }
.equasign-admin .equasign-select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; background-size: 15px 15px;
}

/* ===========================================================================
 * Native WordPress widgets used by the current (not-yet-DS) views, brand-tinted
 * only within .equasign-admin. Skin off drops this sheet → plain wp-admin look, so
 * these refinements never become load-bearing.
 * ========================================================================= */

/* Headings on legacy screens. */
.equasign-admin.equasign-wrap h1,
.equasign-admin .equasign-wrap h1 { font-family: var(--equasign-font-display); color: var(--equasign-blue-dark); letter-spacing: -.3px; }
.equasign-admin.equasign-wrap h2,
.equasign-admin .equasign-wrap h2 { font-family: var(--equasign-font-display); color: var(--equasign-blue-dark); }

/* widefat tables (task detail, documents, API keys). */
.equasign-admin .widefat {
	border: 1px solid var(--equasign-border);
	border-radius: var(--equasign-radius);
	box-shadow: var(--equasign-shadow);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.equasign-admin .widefat thead th,
.equasign-admin .widefat tbody th { color: var(--equasign-blue-dark); }
.equasign-admin .widefat th { font-weight: 600; }

/* form-table (create task, settings). */
.equasign-admin .form-table th { color: var(--equasign-blue-dark); font-weight: 600; }
.equasign-admin .form-table td .description,
.equasign-admin .description { color: var(--equasign-faint); }

/* Read-only "code" fields (signing link, fingerprints). */
.equasign-admin .large-text.code,
.equasign-admin input.code,
.equasign-admin code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--equasign-blue-dark);
}

/* Native buttons brand-tinted (Create task, Download signed PDF, etc.). */
.equasign-admin .button-primary {
	background: var(--equasign-blue);
	border-color: var(--equasign-blue);
	border-radius: var(--equasign-radius-sm);
	box-shadow: 0 2px 8px rgba(25,129,222,.28);
	text-shadow: none;
}
.equasign-admin .button-primary:hover,
.equasign-admin .button-primary:focus { background: var(--equasign-blue-hover); border-color: var(--equasign-blue-hover); }
.equasign-admin .button {
	border-radius: var(--equasign-radius-sm);
	border-color: var(--equasign-border-strong);
	color: var(--equasign-blue-dark);
}
.equasign-admin .button:hover { border-color: var(--equasign-blue); color: var(--equasign-blue); }
.equasign-admin .button-link-delete { color: var(--equasign-danger-fg); }

/* Legacy document row (create task) — softened to the brand surface. */
.equasign-admin .equasign-doc-row {
	border-color: var(--equasign-border);
	border-radius: var(--equasign-radius);
	box-shadow: var(--equasign-shadow);
	padding: 6px 18px;
}

/* ---- Incitation bars: brand refinement ----------------------------------
 * The base bar styles live in admin.css (shown with or without the skin); here
 * we only align the accent border and the CTA colour with the brand blue. */
.equasign-admin .equasign-probar,
.equasign-admin .equasign-welcomebar,
.equasign-wrap .equasign-probar,
.equasign-wrap .equasign-welcomebar {
	border-left-color: var(--equasign-blue, #1981DE);
	border-radius: var(--equasign-radius-sm, 9px);
}
.equasign-admin .equasign-probar__cta,
.equasign-wrap .equasign-probar__cta { color: var(--equasign-blue, #1981DE); }