/**
 * Tidy Draft Share – Admin styles.
 * Design system based on Slate palette (same as Amazon Affiliate Links).
 *
 * @package TidyDraftShare
 */

/* =========================================================
   Settings page
   ========================================================= */

.tidy-draft-share-wrap {
	max-width: 720px;
	font-size: 14px;
}

.tidy-draft-share-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 20px;
}

.tidy-draft-share-header h1 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.4em !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	line-height: 1 !important;
}

/* =========================================================
   Cards
   ========================================================= */

.tidy-draft-share-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.tidy-draft-share-card h2 {
	margin: 0 0 16px;
	font-size: 1em;
	font-weight: 600;
	color: #1e293b;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
}

.tidy-draft-share-card .form-table th {
	font-weight: 500;
	color: #475569;
	padding: 12px 10px 12px 0;
}

.tidy-draft-share-card .form-table td {
	padding: 12px 0;
}

/* =========================================================
   Meta box / Document panel (sidebar in editor)
   ========================================================= */

.tidy-draft-share-meta-box {
	padding: 6px 0 2px;
}

.tidy-draft-share-hint {
	color: #64748b;
	font-size: 13px;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
}

/* --- Field --- */

.tidy-draft-share-field {
	display: block;
	margin-bottom: 14px;
}

.tidy-draft-share-field__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 6px;
}

.tidy-draft-share-expiry-select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13px;
	color: #1e293b;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}

.tidy-draft-share-expiry-select:focus {
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, .15);
	outline: none;
}

.tidy-draft-share-expiry-select--sm {
	flex: 1;
	min-width: 0;
}

/* --- Create button --- */

.tidy-draft-share-create-btn {
	width: 100%;
	margin-top: 2px !important;
	padding: 9px 16px !important;
	text-align: center !important;
	justify-content: center;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	transition: background .15s, box-shadow .15s;
}

.tidy-draft-share-create-btn:hover {
	box-shadow: 0 2px 8px rgba(0, 115, 170, .18);
}

/* --- Create section when links exist --- */

.tidy-draft-share-create-link--has-links {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid #e2e8f0;
}

/* --- Link card (single link) --- */

.tidy-draft-share-link-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tidy-draft-share-link-card--multi {
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	margin-bottom: 8px;
}

/* Classic editor compat */
.tidy-draft-share-active-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --- URL + Copy row --- */

.tidy-draft-share-link-field {
	display: flex;
	gap: 6px;
}

.tidy-draft-share-link-url {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 12px;
	color: #1e293b;
	background: #f8fafc;
	cursor: text;
	transition: border-color .15s, box-shadow .15s;
}

.tidy-draft-share-link-card--multi .tidy-draft-share-link-url {
	background: #fff;
}

.tidy-draft-share-link-url:focus {
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, .15);
	outline: none;
}

.tidy-draft-share-copy-btn {
	flex-shrink: 0;
	border-radius: 8px !important;
	font-weight: 500 !important;
	transition: background .12s, color .12s;
}

/* --- Stats line (views + expiry) --- */

.tidy-draft-share-stats {
	margin: 0;
	font-size: 12px;
	color: #64748b;
	line-height: 1.5;
}

.tidy-draft-share-views {
	font-weight: 600;
	color: #475569;
}

.tidy-draft-share-stats-sep {
	color: #cbd5e1;
}

.tidy-draft-share-expires {
	margin: 0;
	font-size: 12px;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* --- Action buttons row --- */

.tidy-draft-share-actions {
	display: flex;
	gap: 6px;
	margin-top: 2px;
}

.tidy-draft-share-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border: 1px solid;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}

.tidy-draft-share-action-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Extend: blue tones */
.tidy-draft-share-action-btn--extend {
	color: #0073aa;
	border-color: #bfdbfe;
	background: #eff6ff;
}

.tidy-draft-share-action-btn--extend:hover,
.tidy-draft-share-action-btn--extend.is-active {
	background: #dbeafe;
	border-color: #93c5fd;
	color: #005a87;
}

/* Revoke: red tones */
.tidy-draft-share-action-btn--danger {
	color: #dc2626;
	border-color: #fecaca;
	background: #fef2f2;
}

.tidy-draft-share-action-btn--danger:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #b91c1c;
}

/* Classic editor compat */
.tidy-draft-share-revoke-btn {
	background: none;
	border: none;
	color: #dc2626;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	text-align: left;
	transition: color .12s;
}

.tidy-draft-share-revoke-btn:hover {
	color: #b91c1c;
	text-decoration: underline;
}

/* --- Extend panel --- */

.tidy-draft-share-extend-panel {
	display: flex;
	gap: 6px;
	animation: tidy-draft-share-fade-in .2s ease;
}

.tidy-draft-share-extend-confirm {
	flex-shrink: 0;
	border-radius: 8px !important;
	font-size: 12px !important;
	padding: 6px 12px !important;
}

/* --- Animation --- */

@keyframes tidy-draft-share-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Post status shortcut (near Status / Publish)
   ========================================================= */

.tidy-draft-share-post-status-info {
	width: 100%;
	margin: 4px 0;
}

.tidy-draft-share-shortcut-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	background: transparent;
	border: 1px solid #2271b1;
	color: #2271b1;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.tidy-draft-share-shortcut-outline:hover {
	background: #f0f6fc;
}

.tidy-draft-share-shortcut-outline:disabled {
	opacity: .5;
	cursor: default;
}

.tidy-draft-share-shortcut-outline.is-copied {
	border-color: #00a32a;
	color: #00a32a;
}

.tidy-draft-share-shortcut-outline .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

.tidy-draft-share-shortcut-wrap {
	width: 100%;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
}

.tidy-draft-share-shortcut-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 8px;
}

.tidy-draft-share-shortcut-link {
	display: flex;
	gap: 6px;
	width: 100%;
}

/* =========================================================
   Posts list column
   ========================================================= */

.tidy-draft-share-icon--active {
	color: #22c55e;
	position: relative;
	display: inline-flex;
	align-items: center;
}

.tidy-draft-share-link-count {
	position: absolute;
	top: -4px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #0073aa;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.column-tidy_draft_share_shared {
	width: 44px;
	text-align: center;
}