/**
 * Smart Resume Builder — Builder UI CSS
 *
 * Styles for the multi-step form, progress bar, preview panel,
 * template selector, and all interactive elements.
 *
 * @package SmartResumeBuilder
 * @since   1.0.0
 */

/* =========================================================================
   Top Bar
   ========================================================================= */
.srb-top-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	background:      var(--srb-surface);
	border:          1px solid var(--srb-border);
	border-radius:   var(--srb-radius-lg) var(--srb-radius-lg) 0 0;
	padding:         12px 20px;
}

.srb-brand {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-weight: 700;
	font-size:   14px;
	color:       var(--srb-text-primary);
}

.srb-top-actions {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.srb-mobile-only { display: none; }

/* =========================================================================
   Layout — two-column with sticky right panel
   ========================================================================= */
.srb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 0;
	background:    var(--srb-surface);
	border:        1px solid var(--srb-border);
	border-top:    none;
	border-radius: 0 0 var(--srb-radius-lg) var(--srb-radius-lg);
	overflow:      hidden;
	min-height:    640px;
}

/* =========================================================================
   Form Panel
   ========================================================================= */
.srb-form-panel {
	display:        flex;
	flex-direction: column;
	border-right:   1px solid var(--srb-border);
}

/* ---- Progress Bar -------------------------------------------------------- */
.srb-progress {
	background:    var(--srb-gray-50);
	border-bottom: 1px solid var(--srb-border);
	padding:       18px 24px 0;
	overflow-x:    auto;
	-webkit-overflow-scrolling: touch;
}

.srb-progress-track {
	position: relative;
	display:  flex;
	align-items: flex-start;
	gap: 0;
	min-width: 520px;
}

.srb-progress-line {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	height: 2px;
	background: var(--srb-gray-200);
	z-index: 0;
}

.srb-progress-line-fill {
	height:     100%;
	background: linear-gradient(90deg, var(--srb-blue-600), var(--srb-blue-400));
	transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.srb-step-indicator {
	position:        relative;
	z-index:         1;
	flex:            1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             6px;
	background:      none;
	border:          none;
	cursor:          default;
	padding:         0 0 14px;
}

.srb-step-num {
	width:           28px;
	height:          28px;
	border-radius:   50%;
	background:      var(--srb-gray-200);
	color:           var(--srb-gray-500);
	font-size:       12px;
	font-weight:     700;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background var(--srb-t-normal), color var(--srb-t-normal);
}

.srb-step-label {
	font-size:   10px;
	font-weight: 500;
	color:       var(--srb-gray-400);
	white-space: nowrap;
	transition:  color var(--srb-t-fast);
}

/* Active step */
.srb-step-indicator.active .srb-step-num {
	background: var(--srb-blue-600);
	color:      #fff;
	box-shadow: 0 0 0 4px var(--srb-blue-100);
}
.srb-step-indicator.active .srb-step-label {
	color: var(--srb-blue-600);
	font-weight: 700;
}

/* Completed step */
.srb-step-indicator.completed .srb-step-num {
	background: var(--srb-success);
	color:      #fff;
}
.srb-step-indicator.completed { cursor: pointer; }
.srb-step-indicator.completed .srb-step-label { color: var(--srb-success); }

/* ---- Form Steps --------------------------------------------------------- */
.srb-form {
	flex:       1;
	padding:    28px 28px 0;
	overflow-y: auto;
}

.srb-step {
	display:   none;
	animation: srb-fade-in .25s ease;
}

.srb-step.active {
	display: block;
}

.srb-step.leaving {
	animation: srb-fade-out .2s ease forwards;
}

@keyframes srb-fade-in {
	from { opacity: 0; transform: translateX(12px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes srb-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

.srb-step-header {
	margin-bottom: 24px;
}

.srb-step-header h2 {
	margin:      0 0 6px;
	font-size:   20px;
	font-weight: 700;
	color:       var(--srb-text-primary);
}

.srb-step-header p {
	margin:    0;
	font-size: 13px;
	color:     var(--srb-text-secondary);
}

/* ---- Field Grid --------------------------------------------------------- */
.srb-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.srb-field { display: flex; flex-direction: column; gap: 5px; }
.srb-field-half { grid-column: span 1; }
.srb-field-full { grid-column: span 2; }

.srb-field label {
	font-size:   12px;
	font-weight: 600;
	color:       var(--srb-gray-600);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.srb-field input,
.srb-field select,
.srb-field textarea {
	font-family:   var(--srb-font-ui);
	font-size:     14px;
	color:         var(--srb-text-primary);
	background:    var(--srb-surface);
	border:        1px solid var(--srb-border);
	border-radius: var(--srb-radius);
	padding:       9px 12px;
	transition:    border-color var(--srb-t-fast), box-shadow var(--srb-t-fast);
	width:         100%;
	appearance:    none;
	-webkit-appearance: none;
}

.srb-field input:focus,
.srb-field select:focus,
.srb-field textarea:focus {
	outline:      none;
	border-color: var(--srb-blue-500);
	box-shadow:   0 0 0 3px var(--srb-blue-50);
}

.srb-field input.srb-error,
.srb-field select.srb-error,
.srb-field textarea.srb-error {
	border-color: var(--srb-error);
	box-shadow:   0 0 0 3px #fee2e2;
}

.srb-field textarea { resize: vertical; min-height: 80px; }

.srb-field-hint {
	margin:    0;
	font-size: 11px;
	color:     var(--srb-text-muted);
}

.srb-req { color: var(--srb-error); margin-left: 2px; }

/* ---- Profile Upload ----------------------------------------------------- */
.srb-profile-upload-row {
	display:     flex;
	align-items: center;
	gap:         20px;
	margin-bottom: 24px;
}

.srb-profile-upload-zone {
	width:           80px;
	height:          80px;
	border-radius:   50%;
	border:          2px dashed var(--srb-border);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	flex-shrink:     0;
	background:      var(--srb-gray-50);
	cursor:          pointer;
	transition:      border-color var(--srb-t-fast);
}

.srb-profile-upload-zone:hover { border-color: var(--srb-blue-500); }

.srb-profile-upload-zone img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
}

.srb-profile-upload-info {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

/* ---- Repeatable Rows ---------------------------------------------------- */
.srb-repeatable-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.srb-repeatable-row {
	background:    var(--srb-gray-50);
	border:        1px solid var(--srb-border);
	border-radius: var(--srb-radius);
	padding:       16px;
}

.srb-row-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   14px;
}

.srb-row-title {
	font-size:   12px;
	font-weight: 700;
	color:       var(--srb-text-secondary);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.srb-remove-row {
	background:    none;
	border:        none;
	cursor:        pointer;
	color:         var(--srb-gray-400);
	font-size:     14px;
	padding:       2px 4px;
	border-radius: 4px;
	transition:    color var(--srb-t-fast), background var(--srb-t-fast);
}
.srb-remove-row:hover { color: var(--srb-error); background: #fee2e2; }

/* Inline skill/language/social rows */
.srb-skill-row {
	display:     flex;
	align-items: center;
	gap:         10px;
	background:  var(--srb-gray-50);
	border:      1px solid var(--srb-border);
	border-radius: var(--srb-radius);
	padding:     10px 14px;
}

.srb-skill-input {
	flex:          1;
	font-family:   var(--srb-font-ui);
	font-size:     14px;
	border:        1px solid var(--srb-border);
	border-radius: var(--srb-radius-sm);
	padding:       6px 10px;
	background:    var(--srb-surface);
	color:         var(--srb-text-primary);
	transition:    border-color var(--srb-t-fast);
}
.srb-skill-input:focus { outline: none; border-color: var(--srb-blue-500); }

.srb-skill-level {
	font-family:   var(--srb-font-ui);
	font-size:     13px;
	border:        1px solid var(--srb-border);
	border-radius: var(--srb-radius-sm);
	padding:       6px 10px;
	background:    var(--srb-surface);
	color:         var(--srb-text-secondary);
	cursor:        pointer;
}

.srb-current-label {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   13px;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.srb-add-row {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	font-family:   var(--srb-font-ui);
	font-size:     13px;
	font-weight:   600;
	color:         var(--srb-blue-600);
	background:    var(--srb-blue-50);
	border:        1px dashed var(--srb-blue-200);
	border-radius: var(--srb-radius);
	padding:       8px 16px;
	cursor:        pointer;
	transition:    background var(--srb-t-fast), border-color var(--srb-t-fast);
	margin-bottom: 24px;
}
.srb-add-row:hover { background: var(--srb-blue-100); border-color: var(--srb-blue-300); }

/* ---- Navigation Buttons ------------------------------------------------- */
.srb-nav-btns {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 28px 24px;
	border-top:      1px solid var(--srb-border);
	margin-top:      auto;
}

.srb-nav-btns .srb-next-btn { margin-left: auto; }

/* ---- Finish Card -------------------------------------------------------- */
.srb-finish-actions { margin-top: 32px; }

.srb-finish-card {
	text-align:    center;
	background:    linear-gradient(135deg, var(--srb-blue-50), #f0fdf4);
	border:        1px solid var(--srb-blue-100);
	border-radius: var(--srb-radius-lg);
	padding:       32px 24px;
}

.srb-finish-icon { font-size: 40px; margin-bottom: 12px; }

.srb-finish-card h3 {
	margin:      0 0 8px;
	font-size:   20px;
	font-weight: 700;
	color:       var(--srb-text-primary);
}

.srb-finish-card p { color: var(--srb-text-secondary); margin: 0 0 20px; }

.srb-finish-btns {
	display:         flex;
	justify-content: center;
	gap:             12px;
	flex-wrap:       wrap;
}

/* =========================================================================
   Right Panel — Live Preview
   ========================================================================= */
.srb-preview-panel {
	display:        flex;
	flex-direction: column;
	background:     var(--srb-gray-50);
	overflow:       hidden;
}

/* ---- Template Selector -------------------------------------------------- */
.srb-template-selector-wrap {
	padding:       16px 16px 12px;
	border-bottom: 1px solid var(--srb-border);
	background:    var(--srb-surface);
}

.srb-template-selector-title {
	margin:         0 0 10px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color:          var(--srb-text-secondary);
}

.srb-template-selector {
	display: flex;
	gap:     8px;
}

.srb-template-card {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             5px;
	background:      var(--srb-gray-50);
	border:          2px solid var(--srb-border);
	border-radius:   var(--srb-radius);
	padding:         6px 4px;
	cursor:          pointer;
	transition:      border-color var(--srb-t-fast), background var(--srb-t-fast);
	font-size:       11px;
	color:           var(--srb-text-secondary);
	font-weight:     600;
}

.srb-template-card:hover {
	border-color: var(--srb-blue-300);
	background:   var(--srb-blue-50);
}

.srb-template-card.active {
	border-color: var(--srb-blue-600);
	background:   var(--srb-blue-50);
	color:        var(--srb-blue-700);
}

.srb-template-thumb {
	width:          100%;
	aspect-ratio:   3/4;
	overflow:       hidden;
	border-radius:  4px;
	background:     var(--srb-gray-100);
	display:        flex;
	align-items:    center;
	justify-content: center;
}

.srb-template-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.srb-template-name {
	text-align:  center;
	line-height: 1.2;
}

/* ---- Preview Frame ------------------------------------------------------ */
.srb-preview-frame-wrap {
	flex:       1;
	overflow-y: auto;
	padding:    16px;
}

.srb-preview-frame {
	background:    var(--srb-surface);
	border-radius: var(--srb-radius);
	box-shadow:    var(--srb-shadow-md);
	min-height:    500px;
	position:      relative;
	overflow:      hidden;
}

.srb-preview-loading {
	position:        absolute;
	inset:           0;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	background:      var(--srb-surface);
	color:           var(--srb-text-secondary);
	font-size:       13px;
	z-index:         10;
	transition:      opacity var(--srb-t-normal);
}

.srb-preview-loading.hidden { opacity: 0; pointer-events: none; }

.srb-preview-content {
	padding: 0;
	transition: opacity .3s ease;
}

.srb-preview-content.srb-preview-loading { opacity: .4; pointer-events: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
	.srb-layout {
		grid-template-columns: 1fr;
	}

	.srb-preview-panel {
		display:  none;
		position: fixed;
		inset:    0;
		z-index:  1000;
		background: var(--srb-surface);
	}

	.srb-preview-panel.srb-preview-open {
		display: flex;
	}

	.srb-mobile-only { display: flex; }

	.srb-field-grid {
		grid-template-columns: 1fr;
	}
	.srb-field-half,
	.srb-field-full { grid-column: span 1; }
}

@media (max-width: 600px) {
	.srb-top-bar  { padding: 10px 14px; }
	.srb-form     { padding: 20px 16px 0; }
	.srb-nav-btns { padding: 16px 16px 20px; }
	.srb-progress { padding: 14px 14px 0; }
	.srb-progress-track { min-width: 400px; }
	.srb-step-label { display: none; }
}