/**
 * CIPC Secretarial – Frontend Stylesheet
 *
 * Provides modern, card-based UI components for the CIPC Secretarial frontend
 * pages. Styles are scoped under .cipc-* class names to avoid conflicts with
 * the active WordPress theme.
 *
 * Design principles:
 *  - Inherits the theme's font-family, base font-size, and link colours.
 *  - Uses CSS custom properties for colours, falling back to neutral defaults
 *    that work on both light and dark WordPress themes.
 *  - Mobile-first: single-column on small screens, multi-column on ≥768 px.
 *
 * @package CIPCSecretarial
 * @since   2.0.0
 */

/* ---------------------------------------------------------------------------
   CSS Custom Properties (design tokens)
   Inherit from the active theme where possible via var() fallbacks.
--------------------------------------------------------------------------- */
:root {
	--cipc-primary:        var(--wp--preset--color--primary,        #0073aa);
	--cipc-primary-dark:   var(--wp--preset--color--primary-dark,   #005a87);
	--cipc-accent:         var(--wp--preset--color--secondary,      #1a5276);
	--cipc-bg:             #ffffff;
	--cipc-bg-subtle:      #f8f9fa;
	--cipc-border:         #e2e8f0;
	--cipc-border-radius:  6px;
	--cipc-shadow:         0 1px 4px rgba(0, 0, 0, 0.10);
	--cipc-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.12);
	--cipc-text:           #1e293b;
	--cipc-text-muted:     #64748b;
	--cipc-success-bg:     #f0fdf4;
	--cipc-success-border: #86efac;
	--cipc-success-text:   #15803d;
	--cipc-warning-bg:     #fffbeb;
	--cipc-warning-border: #fcd34d;
	--cipc-warning-text:   #92400e;
	--cipc-error-bg:       #fef2f2;
	--cipc-error-border:   #fca5a5;
	--cipc-error-text:     #b91c1c;
	--cipc-danger:         #dc2626;
	--cipc-danger-dark:    #b91c1c;
}

/* ---------------------------------------------------------------------------
   Container
--------------------------------------------------------------------------- */
.cipc-container {
	max-width: 1100px;
	margin: 1.5rem auto;
	font-family: inherit;
	color: var(--cipc-text);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Cards
--------------------------------------------------------------------------- */
.cipc-card {
	background: var(--cipc-bg);
	border: 1px solid var(--cipc-border);
	border-radius: var(--cipc-border-radius);
	box-shadow: var(--cipc-shadow);
	overflow: hidden;
}

.cipc-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	background: var(--cipc-bg-subtle);
	border-bottom: 1px solid var(--cipc-border);
}

.cipc-card-header h2,
.cipc-card-header h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--cipc-text);
}

.cipc-card-body {
	padding: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Badges
--------------------------------------------------------------------------- */
.cipc-badge {
	display: inline-block;
	padding: 0.2em 0.65em;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	color: var(--cipc-primary);
	background: #e8f4fb;
	border: 1px solid #bee3f8;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Notices / Alerts
--------------------------------------------------------------------------- */
.cipc-notice {
	padding: 0.85rem 1rem;
	border-left: 4px solid transparent;
	border-radius: var(--cipc-border-radius);
	margin-bottom: 1rem;
}

.cipc-notice p { margin: 0; }

.cipc-notice-success {
	background: var(--cipc-success-bg);
	border-color: var(--cipc-success-border);
	color: var(--cipc-success-text);
}

.cipc-notice-warning {
	background: var(--cipc-warning-bg);
	border-color: var(--cipc-warning-border);
	color: var(--cipc-warning-text);
}

.cipc-notice-error {
	background: var(--cipc-error-bg);
	border-color: var(--cipc-error-border);
	color: var(--cipc-error-text);
}

/* ---------------------------------------------------------------------------
   Empty State
--------------------------------------------------------------------------- */
.cipc-empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--cipc-text-muted);
}

.cipc-empty-state .dashicons {
	font-size: 3rem;
	width: 3rem;
	height: 3rem;
	display: block;
	margin: 0 auto 1rem;
	opacity: 0.4;
}

.cipc-empty-state p {
	margin-bottom: 1.25rem;
	font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   Tables
--------------------------------------------------------------------------- */
.cipc-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cipc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.cipc-table thead th {
	padding: 0.65rem 0.85rem;
	text-align: left;
	font-weight: 600;
	background: var(--cipc-bg-subtle);
	border-bottom: 2px solid var(--cipc-border);
	white-space: nowrap;
	color: var(--cipc-text);
}

.cipc-table tbody td {
	padding: 0.6rem 0.85rem;
	border-bottom: 1px solid var(--cipc-border);
	vertical-align: middle;
}

.cipc-table tbody tr:last-child td {
	border-bottom: none;
}

.cipc-table tbody tr:hover {
	background: var(--cipc-bg-subtle);
}

/* Editing row highlight */
.cipc-editing-row td {
	background: #fffde7 !important;
}

/* ---------------------------------------------------------------------------
   Holder-type colour badges in the table
--------------------------------------------------------------------------- */
.cipc-type-badge {
	display: inline-block;
	padding: 0.15em 0.55em;
	border-radius: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cipc-type-individual      { background: #e0f2fe; color: #075985; }
.cipc-type-company         { background: #ede9fe; color: #5b21b6; }
.cipc-type-trust           { background: #fef3c7; color: #92400e; }
.cipc-type-trustee         { background: #dcfce7; color: #15803d; }
.cipc-type-close-corporation { background: #fce7f3; color: #9d174d; }

/* ---------------------------------------------------------------------------
   Pagination
--------------------------------------------------------------------------- */
.cipc-pagination {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.cipc-page-link,
.cipc-page-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.cipc-page-link {
	border: 1px solid var(--cipc-border);
	color: var(--cipc-primary);
	background: var(--cipc-bg);
	transition: background 0.15s, border-color 0.15s;
}

.cipc-page-link:hover {
	background: var(--cipc-bg-subtle);
	border-color: var(--cipc-primary);
}

.cipc-page-current {
	background: var(--cipc-primary);
	color: #fff;
	border: 1px solid var(--cipc-primary-dark);
	cursor: default;
}

/* ---------------------------------------------------------------------------
   Action Buttons Row
--------------------------------------------------------------------------- */
.cipc-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Upload Form
--------------------------------------------------------------------------- */
.cipc-upload-form .cipc-form-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Diagram Form (Generate page)
--------------------------------------------------------------------------- */
.cipc-diagram-form {
	width: 100%;
}

.cipc-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
	.cipc-form-grid {
		grid-template-columns: 1fr;
	}
}

.cipc-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cipc-form-group label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cipc-text);
}

.cipc-form-group select,
.cipc-form-group input[type="number"] {
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--cipc-border);
	border-radius: 4px;
	font-size: 0.9rem;
	color: var(--cipc-text);
	background: var(--cipc-bg);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.cipc-form-group select:focus,
.cipc-form-group input[type="number"]:focus {
	outline: none;
	border-color: var(--cipc-primary);
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.18);
}

.cipc-form-group .description {
	font-size: 0.8rem;
	color: var(--cipc-text-muted);
	margin: 0;
}

/* Inline table edit inputs */
.cipc-input {
	width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--cipc-border);
	border-radius: 4px;
	font-size: 0.875rem;
	box-sizing: border-box;
}

.cipc-input-sm { width: 80px !important; }

/* ---------------------------------------------------------------------------
   Danger button variant
--------------------------------------------------------------------------- */
.cipc-btn-danger,
.cipc-btn-danger:visited {
	color: var(--cipc-danger) !important;
	border-color: var(--cipc-danger) !important;
}

.cipc-btn-danger:hover {
	background: var(--cipc-danger) !important;
	color: #fff !important;
	border-color: var(--cipc-danger-dark) !important;
}

/* ---------------------------------------------------------------------------
   Diagram output container
--------------------------------------------------------------------------- */
.cipc-diagram-output {
	margin-top: 1.5rem;
}

#chart_div {
	min-height: 200px;
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   My Account – Licence Key Card
--------------------------------------------------------------------------- */
.cipc-account-section {
	margin-bottom: 2rem;
}

.cipc-account-section h2 {
	margin-bottom: 1rem;
}

.cipc-key-card {
	display: inline-block;
	background: var(--cipc-bg-subtle);
	border: 1px solid var(--cipc-border);
	border-radius: var(--cipc-border-radius);
	padding: 1rem 1.5rem;
	margin-bottom: 1.25rem;
}

.cipc-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cipc-text-muted);
	margin: 0 0 0.4rem;
}

.cipc-key-value {
	margin: 0;
}

.cipc-key-value code {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--cipc-accent);
	background: transparent;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   Print styles — hide controls, show only the chart
--------------------------------------------------------------------------- */
@media print {
	.cipc-container,
	.cipc-card.controls,
	.cipc-action-buttons {
		display: none !important;
	}

	#chart_div,
	#chart_div * {
		visibility: visible;
	}

	#chart_div {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: auto;
		transform: scale(0.95);
		transform-origin: top center;
		margin: 0 auto;
		padding: 0;
	}

	#footer-print {
		visibility: visible;
		font-style: italic;
		position: fixed;
		bottom: 10px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 10px;
		color: #666;
	}

	@page {
		size: A4 landscape;
		margin: 10mm;
	}
}