/* =============================================================
   Grixti Sales Hub — scoped styles
   Root class: .grixti-sales-hub
   ============================================================= */

/* ---- Design tokens ------------------------------------------ */
.grixti-sales-hub {
	--gsh-accent:        #1e3a5f;   /* deep navy — primary action */
	--gsh-accent-hover:  #16304f;
	--gsh-accent-light:  #e8f0f8;
	--gsh-success:       #2d7d52;
	--gsh-success-bg:    #eaf6ef;
	--gsh-warning:       #a0621a;
	--gsh-warning-bg:    #fef3e2;
	--gsh-danger:        #b91c1c;
	--gsh-danger-bg:     #fef2f2;
	--gsh-neutral-bg:    #f4f5f7;
	--gsh-neutral-text:  #6b7280;
	--gsh-border:        #d1d5db;
	--gsh-text:          #111827;
	--gsh-text-muted:    #6b7280;
	--gsh-bg:            #f8fafc;
	--gsh-card-bg:       #ffffff;
	--gsh-radius:        8px;
	--gsh-radius-sm:     5px;
	--gsh-shadow-sm:     0 1px 3px rgba(0,0,0,.08);
	--gsh-shadow-md:     0 4px 14px rgba(0,0,0,.10);
	--gsh-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Page container ----------------------------------------- */
.grixti-sales-hub {
	font-family: var(--gsh-font);
	color: var(--gsh-text);
	background: var(--gsh-bg);
	min-height: 100vh;
}

/* ---- Header -------------------------------------------------- */
.gsh-header {
	background: var(--gsh-card-bg);
	border-bottom: 1px solid var(--gsh-border);
	padding: 20px 28px 16px;
}

.gsh-header-inner {
	max-width: 1400px;
	margin: 0 auto;
}

.gsh-header-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.gsh-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--gsh-accent);
	margin: 0 0 2px;
}

.gsh-subtitle {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0;
}

.gsh-header-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.gsh-meta-user {
	font-size: 13px;
	font-weight: 600;
	color: var(--gsh-text);
}

.gsh-meta-date {
	font-size: 12px;
	color: var(--gsh-text-muted);
}

/* ---- Tab nav ------------------------------------------------- */
.gsh-tab-nav {
	display: flex;
	gap: 0;
	background: var(--gsh-card-bg);
	border-bottom: 2px solid var(--gsh-border);
	padding: 0 28px;
	overflow-x: auto;
}

.gsh-tab-btn {
	flex-shrink: 0;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--gsh-text-muted);
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	transition: color .15s, border-color .15s;
	white-space: nowrap;
}

.gsh-tab-btn:hover {
	color: var(--gsh-accent);
}

.gsh-tab-btn.active {
	color: var(--gsh-accent);
	border-bottom-color: var(--gsh-accent);
	font-weight: 600;
}

/* ---- Workspace ----------------------------------------------- */
.gsh-workspace {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 28px;
}

/* ---- Tab content --------------------------------------------- */
.gsh-tab-content {
	/* nothing extra needed */
}

.gsh-tab-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 16px;
	flex-wrap: wrap;
}

.gsh-tab-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--gsh-text);
}

.gsh-tab-subtitle {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0;
}

.gsh-tab-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	align-items: center;
}

/* ---- Buttons ------------------------------------------------- */
.gsh-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--gsh-radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s, border-color .15s, color .15s, opacity .15s;
}

.gsh-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.gsh-btn-primary {
	background: var(--gsh-accent);
	color: #fff;
	border-color: var(--gsh-accent);
}

.gsh-btn-primary:hover:not(:disabled) {
	background: var(--gsh-accent-hover);
	border-color: var(--gsh-accent-hover);
}

.gsh-btn-secondary {
	background: var(--gsh-card-bg);
	color: var(--gsh-text);
	border-color: var(--gsh-border);
}

.gsh-btn-secondary:hover:not(:disabled) {
	background: var(--gsh-neutral-bg);
}

.gsh-btn-neutral {
	background: var(--gsh-neutral-bg);
	color: var(--gsh-text-muted);
	border-color: var(--gsh-border);
}

/* ---- Filter bar --------------------------------------------- */
.gsh-filter-bar {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.gsh-search-input,
.gsh-select,
.gsh-input {
	padding: 8px 12px;
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius-sm);
	font-size: 13px;
	color: var(--gsh-text);
	background: var(--gsh-card-bg);
	outline: none;
	transition: border-color .15s;
}

.gsh-search-input:focus,
.gsh-select:focus,
.gsh-input:focus {
	border-color: var(--gsh-accent);
}

.gsh-search-input {
	width: 280px;
	max-width: 100%;
}

/* ---- Table --------------------------------------------------- */
.gsh-table-wrap {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	overflow: hidden;
	box-shadow: var(--gsh-shadow-sm);
}

.gsh-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.gsh-table thead tr {
	background: var(--gsh-neutral-bg);
	border-bottom: 1px solid var(--gsh-border);
}

.gsh-table th {
	padding: 11px 14px;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--gsh-text-muted);
	text-align: left;
	white-space: nowrap;
}

.gsh-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

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

.gsh-table tbody tr:hover td {
	background: #fafcff;
}

.gsh-td-mono {
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 12.5px;
}

.gsh-td-amount {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.gsh-td-actions {
	white-space: nowrap;
}

/* ---- Sortable column headers -------------------------------- */
.gsh-th-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.gsh-th-sortable:hover {
	color: var(--gsh-accent);
}

.gsh-th-sort-active {
	color: var(--gsh-accent);
}

.gsh-sort-icon {
	display: inline-block;
	font-size: 10px;
	opacity: 0.45;
	margin-left: 3px;
	vertical-align: middle;
}

.gsh-th-sort-active .gsh-sort-icon {
	opacity: 1;
}

/* ---- Pagination bar ----------------------------------------- */
.gsh-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-top: 1px solid var(--gsh-border);
	background: var(--gsh-neutral-bg);
	gap: 12px;
	flex-wrap: wrap;
	border-radius: 0 0 var(--gsh-radius) var(--gsh-radius);
}

.gsh-pagination-info {
	font-size: 12px;
	color: var(--gsh-text-muted);
	white-space: nowrap;
}

.gsh-pagination-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.gsh-pagination-pages {
	font-size: 12px;
	color: var(--gsh-text-muted);
	white-space: nowrap;
	padding: 0 4px;
}

.gsh-page-length-select {
	padding: 5px 8px;
	font-size: 12px;
	height: auto;
}

.gsh-pag-prev,
.gsh-pag-next {
	padding: 5px 10px;
	font-size: 12px;
}

.gsh-link {
	color: var(--gsh-accent);
	text-decoration: none;
	font-weight: 500;
}

.gsh-link:hover {
	text-decoration: underline;
}

/* ---- Row action buttons ------------------------------------- */
.gsh-action-btn {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid var(--gsh-border);
	background: var(--gsh-card-bg);
	color: var(--gsh-text);
	transition: background .12s;
	margin-right: 4px;
}

.gsh-action-btn:hover {
	background: var(--gsh-neutral-bg);
}

.gsh-action-btn-primary {
	background: var(--gsh-accent-light);
	color: var(--gsh-accent);
	border-color: #b6cde5;
}

.gsh-action-btn-primary:hover {
	background: #d0e3f5;
}

.gsh-action-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* ---- Badges -------------------------------------------------- */
.gsh-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2px;
}

.gsh-badge-draft    { background: var(--gsh-warning-bg); color: var(--gsh-warning); }
.gsh-badge-open     { background: var(--gsh-warning-bg); color: var(--gsh-warning); }
.gsh-badge-success  { background: var(--gsh-success-bg); color: var(--gsh-success); }
.gsh-badge-danger   { background: var(--gsh-danger-bg);  color: var(--gsh-danger);  }
.gsh-badge-neutral  { background: var(--gsh-neutral-bg); color: var(--gsh-neutral-text); }

/* ---- Empty / loading / error states ------------------------- */
.gsh-empty-state {
	text-align: center;
	padding: 60px 24px;
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
}

.gsh-empty-icon {
	font-size: 40px;
	margin-bottom: 12px;
}

.gsh-empty-state h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--gsh-text);
	margin: 0 0 8px;
}

.gsh-empty-state p {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0 0 20px;
}

.gsh-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 40px 20px;
	color: var(--gsh-text-muted);
	font-size: 13px;
}

.gsh-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--gsh-border);
	border-top-color: var(--gsh-accent);
	border-radius: 50%;
	animation: gsh-spin 0.7s linear infinite;
}

@keyframes gsh-spin {
	to { transform: rotate(360deg); }
}

.gsh-error-state {
	padding: 20px;
	color: var(--gsh-danger);
	font-size: 13px;
}

.gsh-error-icon {
	margin-right: 6px;
}

.gsh-empty-inline {
	padding: 20px;
	color: var(--gsh-text-muted);
	font-size: 13px;
}

/* ---- Placeholder tabs --------------------------------------- */
.gsh-placeholder {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	padding: 60px 40px;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.gsh-placeholder-icon {
	font-size: 40px;
	margin-bottom: 16px;
}

.gsh-placeholder-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
}

.gsh-placeholder-body {
	font-size: 14px;
	color: var(--gsh-text);
	margin: 0 0 8px;
}

.gsh-placeholder-note {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0 0 20px;
}

.gsh-placeholder-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 12px;
	background: var(--gsh-neutral-bg);
	color: var(--gsh-neutral-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
}

/* ---- Reports ------------------------------------------------- */
.gsh-report-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.gsh-report-card {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	box-shadow: var(--gsh-shadow-sm);
	padding: 18px;
}

.gsh-report-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.gsh-report-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.gsh-report-card-body {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0 0 16px;
	line-height: 1.5;
}

.gsh-report-card-actions {
	display: flex;
	justify-content: flex-start;
}

/* ---- Wizard -------------------------------------------------- */
.gsh-wizard-progress {
	padding: 0 0 16px;
	border-bottom: 1px solid var(--gsh-border);
	margin-bottom: 20px;
}

.gsh-wizard-steps {
	display: flex;
	gap: 6px 20px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.gsh-wizard-step {
	font-size: 12px;
	color: var(--gsh-text-muted);
}

.gsh-wizard-step.active {
	color: var(--gsh-accent);
	font-weight: 700;
}

.gsh-wizard-step.done {
	color: var(--gsh-success);
}

.gsh-wizard-bar-track {
	height: 4px;
	background: var(--gsh-border);
	border-radius: 2px;
	overflow: hidden;
}

.gsh-wizard-bar-fill {
	height: 100%;
	background: var(--gsh-accent);
	border-radius: 2px;
	transition: width .3s ease;
}

.gsh-wizard-step-body {
	padding: 4px 0;
}

.gsh-wizard-step-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px;
}

.gsh-wizard-step-sub {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0 0 20px;
}

/* Template grid */
.gsh-step1-controls {
	margin-bottom: 14px;
}

.gsh-template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	max-height: 360px;
	overflow-y: auto;
	padding: 2px;
}

.gsh-tmpl-card {
	background: var(--gsh-card-bg);
	border: 2px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	padding: 14px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.gsh-tmpl-card:hover {
	border-color: #a0bad8;
	box-shadow: var(--gsh-shadow-sm);
}

.gsh-tmpl-card.selected {
	border-color: var(--gsh-accent);
	background: var(--gsh-accent-light);
}

.gsh-tmpl-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 6px;
}

.gsh-tmpl-card-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--gsh-text);
	line-height: 1.3;
}

.gsh-tmpl-card-cat {
	font-size: 11px;
	color: var(--gsh-text-muted);
	background: var(--gsh-neutral-bg);
	padding: 2px 7px;
	border-radius: 10px;
	white-space: nowrap;
}

.gsh-tmpl-card-rate {
	font-size: 14px;
	font-weight: 700;
	color: var(--gsh-accent);
	margin-bottom: 6px;
}

.gsh-tmpl-card-desc {
	font-size: 11.5px;
	color: var(--gsh-text-muted);
	line-height: 1.4;
}

/* Step 2 form */
.gsh-wizard-form .frappe-control {
	margin-bottom: 14px;
}

/* Step 3 */
.gsh-step3-meta {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.gsh-step3-tmpl-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--gsh-accent);
}

.gsh-step3-sub-heading {
	font-size: 13px;
	color: var(--gsh-text-muted);
}

.gsh-step3-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gsh-field-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--gsh-text-muted);
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.gsh-textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius-sm);
	font-size: 13px;
	color: var(--gsh-text);
	resize: vertical;
	outline: none;
	transition: border-color .15s;
	font-family: var(--gsh-font);
}

.gsh-textarea:focus {
	border-color: var(--gsh-accent);
}

.gsh-helper-text {
	font-size: 12px;
	color: var(--gsh-text-muted);
	font-style: italic;
	margin: 2px 0 0;
}

.gsh-step3-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.gsh-step3-col {
	display: flex;
	flex-direction: column;
}

/* Step 4 review */
.gsh-review-card {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	overflow: hidden;
}

.gsh-review-row {
	display: flex;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	align-items: baseline;
}

.gsh-review-row:last-child {
	border-bottom: none;
}

.gsh-review-label {
	width: 160px;
	flex-shrink: 0;
	font-weight: 600;
	color: var(--gsh-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .3px;
}

.gsh-review-value {
	color: var(--gsh-text);
}

.gsh-review-total {
	background: var(--gsh-accent-light);
}

.gsh-review-total .gsh-review-label,
.gsh-review-total .gsh-review-value {
	color: var(--gsh-accent);
	font-weight: 700;
}

/* ---- Success panel ------------------------------------------ */
.gsh-success-panel {
	text-align: center;
	padding: 24px 16px;
}

.gsh-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gsh-success-bg);
	color: var(--gsh-success);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 16px;
}

.gsh-success-msg {
	font-size: 15px;
	margin-bottom: 20px;
	color: var(--gsh-text);
}

.gsh-success-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- Confirm dialog body ------------------------------------ */
.gsh-confirm-body p {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--gsh-text);
}

.gsh-confirm-ref {
	color: var(--gsh-text-muted) !important;
	font-size: 12px !important;
}

/* ---- Customer Detail ---------------------------------------- */
.gsh-customer-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

.gsh-customer-detail-card {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	padding: 16px;
}

.gsh-detail-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--gsh-text-muted);
	margin: 0 0 12px;
}

.gsh-customer-info-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gsh-customer-info-row {
	display: flex;
	gap: 10px;
	font-size: 13px;
	align-items: baseline;
}

.gsh-customer-info-label {
	width: 130px;
	flex-shrink: 0;
	font-weight: 600;
	color: var(--gsh-text-muted);
	font-size: 12px;
}

.gsh-customer-info-value {
	color: var(--gsh-text);
	word-break: break-word;
}

.gsh-recent-docs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 16px;
}

.gsh-recent-doc-section {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	padding: 14px 16px;
}

.gsh-recent-doc-list {
	display: flex;
	flex-direction: column;
}

.gsh-recent-doc-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	flex-wrap: wrap;
}

.gsh-recent-doc-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.gsh-muted {
	color: var(--gsh-text-muted);
	font-size: 12px;
}

.gsh-detail-actions {
	display: flex;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--gsh-border);
	margin-top: 4px;
	flex-wrap: wrap;
}

/* ---- New Customer Form --------------------------------------- */
.gsh-new-customer-form .frappe-control {
	margin-bottom: 12px;
}

.gsh-form-section-heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--gsh-text-muted);
	margin: 18px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--gsh-border);
}

/* Card sections */
.gsh-nc-section {
	background: var(--gsh-card-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius);
	padding: 16px;
	margin-bottom: 16px;
}

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

.gsh-nc-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--gsh-text-muted);
}

/* 2-column grid */
.gsh-nc-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* 3-column grid */
.gsh-nc-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}

/* Repeatable row */
.gsh-nc-row {
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius-sm);
	padding: 14px;
	margin-bottom: 10px;
	background: var(--gsh-bg);
}

.gsh-nc-row:last-child {
	margin-bottom: 0;
}

.gsh-nc-row-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--gsh-border);
	flex-wrap: wrap;
}

.gsh-nc-primary-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--gsh-text-muted);
	cursor: pointer;
	user-select: none;
}

.gsh-nc-primary-label input {
	cursor: pointer;
}

/* Link-style add buttons */
.gsh-btn-link {
	background: none;
	border: none;
	color: var(--gsh-accent);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}

.gsh-btn-link:hover {
	text-decoration: underline;
}

/* Danger button for remove */
.gsh-btn-danger {
	background: var(--gsh-card-bg);
	color: var(--gsh-danger);
	border-color: var(--gsh-danger);
	margin-left: auto;
	font-size: 12px;
	padding: 4px 10px;
}

.gsh-btn-danger:hover:not(:disabled) {
	background: var(--gsh-danger-bg);
}

/* Address type select and label */
.gsh-nc-field-wrap {
	display: flex;
	flex-direction: column;
}

.gsh-nc-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--gsh-text-muted);
	margin-bottom: 5px;
	display: block;
}

/* Tighten Frappe control margins inside the new form */
.gsh-new-customer-form .gsh-nc-section .frappe-control {
	margin-bottom: 0;
}

.gsh-new-customer-form .gsh-nc-grid-2 .frappe-control,
.gsh-new-customer-form .gsh-nc-grid-3 .frappe-control {
	margin-bottom: 0;
}

.gsh-new-customer-form .gsh-nc-row .frappe-control {
	margin-bottom: 10px;
}

.gsh-new-customer-form .gsh-nc-row .gsh-nc-grid-2 .frappe-control,
.gsh-new-customer-form .gsh-nc-row .gsh-nc-grid-3 .frappe-control {
	margin-bottom: 0;
}

.gsh-nc-customer-fields .frappe-control {
	margin-bottom: 12px;
}

.gsh-nc-addr-top-row {
	margin-bottom: 0;
}

/* ====================================================================
   New Customer Dialog — Enhanced Styling
   Wrapper class added via JS: .gsh-new-customer-dialog-wrapper / .gsh-sales-hub-dialog-wrapper
   ==================================================================== */

/* -- Design tokens for the dialog (declared on wrapper to work outside
      .grixti-sales-hub scope, since Frappe appends dialogs to <body>) -- */
.gsh-new-customer-dialog-wrapper,
.gsh-sales-hub-dialog-wrapper {
	--gsh-accent:        #1e3a5f;
	--gsh-accent-hover:  #16304f;
	--gsh-border:        #d1d5db;
	--gsh-text:          #111827;
	--gsh-text-muted:    #6b7280;
	--gsh-card-bg:       #ffffff;
	--gsh-bg:            #f8fafc;
	--gsh-neutral-bg:    #f4f5f7;
	--gsh-radius:        8px;
	--gsh-radius-sm:     5px;
	--gsh-danger:        #b91c1c;
	--gsh-danger-bg:     #fef2f2;
	--gsh-success:       #2d7d52;
	--gsh-success-bg:    #eaf6ef;
	/* Card accent palette — indigo, teal, amber, rose, emerald */
	--gsh-nc-c1:         #6366f1;
	--gsh-nc-c1-bg:      #eef2ff;
	--gsh-nc-c2:         #0d9488;
	--gsh-nc-c2-bg:      #f0fdfa;
	--gsh-nc-c3:         #d97706;
	--gsh-nc-c3-bg:      #fffbeb;
	--gsh-nc-c4:         #e11d48;
	--gsh-nc-c4-bg:      #fff1f2;
	--gsh-nc-c5:         #059669;
	--gsh-nc-c5-bg:      #ecfdf5;
	/* Default badge/accent colour (overridden per nth-child below) */
	--row-accent:        var(--gsh-nc-c1);
	--row-accent-bg:     var(--gsh-nc-c1-bg);
}

/* -- Modal header accent bar -- */
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-content {
	border-top: 4px solid #6366f1;
	overflow: hidden;
}

:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-header {
	background: linear-gradient(135deg, #f5f7ff 0%, #f8fafc 100%);
	border-bottom: 1px solid #e0e7ff;
	padding: 14px 20px 12px;
}

:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-title {
	color: var(--gsh-accent);
	font-weight: 700;
	font-size: 16px;
}

/* -- Section headers (CUSTOMER / CONTACTS / ADDRESSES) -- */
.gsh-new-customer-dialog-wrapper .gsh-nc-section-title {
	color: #6366f1;
	border-left: 3px solid #6366f1;
	padding-left: 8px;
}

/* -- Card rows (contact/address) — base style -- */
.gsh-new-customer-dialog-wrapper .gsh-nc-row {
	background: var(--row-accent-bg);
	border: 1px solid #e5e7eb;
	border-left: 4px solid var(--row-accent);
	border-radius: 8px;
	transition: box-shadow .15s;
}

.gsh-new-customer-dialog-wrapper .gsh-nc-row:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

/* -- Alternating card accent colours (contact + address lists share the pattern) -- */
.gsh-new-customer-dialog-wrapper .gsh-nc-contact-list .gsh-nc-row:nth-child(5n+1),
.gsh-new-customer-dialog-wrapper .gsh-nc-address-list .gsh-nc-row:nth-child(5n+1) {
	--row-accent:    var(--gsh-nc-c1);
	--row-accent-bg: var(--gsh-nc-c1-bg);
}
.gsh-new-customer-dialog-wrapper .gsh-nc-contact-list .gsh-nc-row:nth-child(5n+2),
.gsh-new-customer-dialog-wrapper .gsh-nc-address-list .gsh-nc-row:nth-child(5n+2) {
	--row-accent:    var(--gsh-nc-c2);
	--row-accent-bg: var(--gsh-nc-c2-bg);
}
.gsh-new-customer-dialog-wrapper .gsh-nc-contact-list .gsh-nc-row:nth-child(5n+3),
.gsh-new-customer-dialog-wrapper .gsh-nc-address-list .gsh-nc-row:nth-child(5n+3) {
	--row-accent:    var(--gsh-nc-c3);
	--row-accent-bg: var(--gsh-nc-c3-bg);
}
.gsh-new-customer-dialog-wrapper .gsh-nc-contact-list .gsh-nc-row:nth-child(5n+4),
.gsh-new-customer-dialog-wrapper .gsh-nc-address-list .gsh-nc-row:nth-child(5n+4) {
	--row-accent:    var(--gsh-nc-c4);
	--row-accent-bg: var(--gsh-nc-c4-bg);
}
.gsh-new-customer-dialog-wrapper .gsh-nc-contact-list .gsh-nc-row:nth-child(5n+5),
.gsh-new-customer-dialog-wrapper .gsh-nc-address-list .gsh-nc-row:nth-child(5n+5) {
	--row-accent:    var(--gsh-nc-c5);
	--row-accent-bg: var(--gsh-nc-c5-bg);
}

/* -- Card header / numbered badge -- */
.gsh-nc-card-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.gsh-nc-card-badge-text {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--row-accent);
}

/* -- Primary label pill -- */
.gsh-new-customer-dialog-wrapper .gsh-nc-primary-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 6px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	border: 1px solid var(--gsh-border);
	color: var(--gsh-text-muted);
	background: var(--gsh-card-bg);
	transition: background .15s, color .15s, border-color .15s;
}

.gsh-new-customer-dialog-wrapper .gsh-nc-primary-label:has(input:checked) {
	background: var(--gsh-success-bg);
	color: var(--gsh-success);
	border-color: #86efac;
}

/* -- Form field focus ring (indigo glow) -- */
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .frappe-control input:focus,
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .frappe-control select:focus,
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .frappe-control textarea:focus,
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .frappe-control .input-with-feedback:focus {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
	outline: none;
}

/* Address type select inside dialog */
.gsh-new-customer-dialog-wrapper .gsh-nc-addr-type:focus {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
	outline: none;
}

/* -- Dialog footer buttons -- */
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-footer .btn-primary {
	background: var(--gsh-accent);
	border-color: var(--gsh-accent);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
}

:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-footer .btn-primary:hover:not(:disabled) {
	background: var(--gsh-accent-hover);
	border-color: var(--gsh-accent-hover);
}

:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-footer .btn-default,
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-footer .btn-secondary {
	background: #fff;
	border: 1px solid var(--gsh-border);
	color: var(--gsh-text);
	border-radius: 6px;
}

:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-footer .btn-default:hover,
:is(.gsh-new-customer-dialog-wrapper, .gsh-sales-hub-dialog-wrapper) .modal-footer .btn-secondary:hover {
	background: var(--gsh-neutral-bg);
}

/* -- "+ Add Contact / + Add Address" link buttons — indigo accent -- */
.gsh-new-customer-dialog-wrapper .gsh-btn-link {
	color: #6366f1;
}

.gsh-new-customer-dialog-wrapper .gsh-btn-link:hover {
	color: #4f46e5;
	text-decoration: none;
}

/* -- Remove button — ghost by default, red on hover -- */
.gsh-new-customer-dialog-wrapper .gsh-btn-danger {
	background: transparent;
	color: var(--gsh-text-muted);
	border-color: var(--gsh-border);
	transition: background .15s, color .15s, border-color .15s;
}

.gsh-new-customer-dialog-wrapper .gsh-btn-danger:hover:not(:disabled) {
	background: var(--gsh-danger-bg);
	color: var(--gsh-danger);
	border-color: #fca5a5;
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 768px) {
	.gsh-header,
	.gsh-tab-nav,
	.gsh-workspace {
		padding-left: 16px;
		padding-right: 16px;
	}

	.gsh-tab-header {
		flex-direction: column;
	}

	.gsh-tab-actions {
		width: 100%;
	}

	.gsh-search-input {
		width: 100%;
	}

	.gsh-step3-row {
		grid-template-columns: 1fr;
	}

	.gsh-review-label {
		width: 120px;
	}

	.gsh-template-grid {
		grid-template-columns: 1fr;
	}

	.gsh-customer-detail-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.gsh-nc-grid-2,
	.gsh-nc-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
   Quotations / Templates mode switch
   ============================================================= */
.gsh-mode-switch {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	background: var(--gsh-neutral-bg);
	border: 1px solid var(--gsh-border);
	border-radius: var(--gsh-radius-sm);
	padding: 3px;
	width: fit-content;
}

.gsh-mode-btn {
	padding: 7px 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--gsh-text-muted);
	background: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}

.gsh-mode-btn:hover {
	color: var(--gsh-accent);
}

.gsh-mode-btn.active {
	background: var(--gsh-card-bg);
	color: var(--gsh-accent);
	font-weight: 600;
	box-shadow: var(--gsh-shadow-sm);
}

/* =============================================================
   Template management table — name + code cell
   ============================================================= */
.gsh-tmpl-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--gsh-text);
	line-height: 1.3;
}

.gsh-tmpl-code {
	font-size: 11.5px;
	color: var(--gsh-text-muted);
	font-family: "SFMono-Regular", Consolas, monospace;
	margin-top: 2px;
}

/* =============================================================
   Template create / edit form inside dialog
   ============================================================= */
.gsh-tmpl-form {
	padding: 4px 0;
}

.gsh-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 14px;
}

.gsh-form-col {
	display: flex;
	flex-direction: column;
}

.gsh-form-col-full {
	grid-column: 1 / -1;
}

.gsh-input-full {
	width: 100%;
	box-sizing: border-box;
}

.gsh-check-row {
	display: flex;
	gap: 16px;
	padding-top: 6px;
	flex-wrap: wrap;
}

.gsh-check-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--gsh-text);
	cursor: pointer;
}

.gsh-check-label input[type="checkbox"] {
	cursor: pointer;
}

/* =============================================================
   Wizard step 1 — updated controls row + empty state
   ============================================================= */
/* Override the single margin-only rule defined earlier */
.gsh-step1-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.gsh-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.gsh-step1-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px;
	gap: 10px;
	text-align: center;
}

.gsh-step1-empty .gsh-empty-icon {
	font-size: 32px;
	margin-bottom: 0;
}

.gsh-step1-empty-msg {
	font-size: 13px;
	color: var(--gsh-text-muted);
	margin: 0;
}

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