/* ============================================================
   NC RE Disclosures — Front-End Styles
   ebb- design system: Roboto, #ad0028 accent, square corners
   Base font: 12pt (16px) throughout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
	--ebb-font:         'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	--ebb-font-size:    16px;       /* 12pt = 16px */
	--ebb-line-height:  1.5;
	--ebb-bg:           #ffffff;
	--ebb-bg-alt:       #f5f5f5;
	--ebb-border:       #d0d0d0;
	--ebb-text:         #1a1a1a;
	--ebb-muted:        #5a5a5a;
	--ebb-accent:       #ad0028;    /* ebbids red */
	--ebb-accent-dk:    #8a001f;
	--ebb-accent-lt:    #f5e6e9;
	--ebb-success:      #1a6e2e;
	--ebb-success-lt:   #eaf6ed;
	--ebb-radius:       0;          /* square corners */
	--ebb-shadow:       0 1px 4px rgba(0,0,0,.10);
	--ebb-input-height: 42px;       /* comfortable 12pt touch target */
}

/* ── Reset ───────────────────────────────────────────────── */
.ncred-wrap *, .ncred-wrap *::before, .ncred-wrap *::after {
	box-sizing: border-box;
}
.ncred-wrap {
	font-family:   var(--ebb-font);
	font-size:     var(--ebb-font-size);
	line-height:   var(--ebb-line-height);
	color:         var(--ebb-text);
	max-width:     960px;
	margin:        0 auto;
}
.ncred-hidden { display: none !important; }

/* ── Tabs ────────────────────────────────────────────────── */
.ncred-tabs {
	display:    flex;
	flex-wrap:  wrap;
	background: var(--ebb-accent);
	padding:    .5rem .75rem 0;
	gap:        0;
}
.ncred-tab-btn {
	padding:         .55rem 1.25rem;
	font-family:     var(--ebb-font);
	font-size:       .9rem;
	font-weight:     600;
	color:           rgba(255,255,255,.7);
	background:      transparent;
	border:          none;
	border-bottom:   3px solid transparent;
	cursor:          pointer;
	text-decoration: none;
	letter-spacing:  .02em;
	transition:      color .15s, border-color .15s, background .15s;
}
.ncred-tab-btn:hover  { color: #fff; }
.ncred-tab-btn.active {
	color:            #fff;
	border-bottom-color: #fff;
	background:       rgba(255,255,255,.1);
}
.ncred-tab-panel { border: 1px solid var(--ebb-border); border-top: none; }
.ncred-tab-panel > .ncred-section:first-child { border-top: none; }

/* ── Top bar ─────────────────────────────────────────────── */
.ncred-topbar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         .875rem 1rem;
	background:      var(--ebb-accent);
	color:           #fff;
}
.ncred-topbar label { font-size: .85rem; opacity: .85; margin-right: .4rem; font-weight: 600; }
.ncred-topbar select {
	font-family:  var(--ebb-font);
	font-size:    .9rem;
	padding:      .35rem .6rem;
	border:       1px solid rgba(255,255,255,.35);
	background:   rgba(255,255,255,.15);
	color:        #fff;
	min-width:    220px;
	height:       38px;
}
.ncred-topbar select option { color: var(--ebb-text); background: #fff; }
.ncred-topbar-right { display: flex; gap: .5rem; }

/* ── Notice ──────────────────────────────────────────────── */
.ncred-notice {
	padding:      .875rem 1rem;
	border-left:  4px solid var(--ebb-accent);
	background:   var(--ebb-accent-lt);
	font-size:    1rem;
	font-weight:  500;
}
.ncred-notice.is-error   { border-color: #b00020; background: #fdecea; }
.ncred-notice.is-success { border-color: var(--ebb-success); background: var(--ebb-success-lt); }

/* ── Sections ────────────────────────────────────────────── */
.ncred-section {
	padding:    1.5rem 1.25rem;
	border:     1px solid var(--ebb-border);
	border-top: none;
	background: var(--ebb-bg);
}
.ncred-section-title {
	font-size:     1.15rem;
	font-weight:   700;
	color:         var(--ebb-accent);
	margin:        0 0 1.1rem;
	padding-bottom:.5rem;
	border-bottom: 3px solid var(--ebb-accent);
	display:       flex;
	align-items:   center;
	gap:           .6rem;
	letter-spacing:.01em;
}
.ncred-sub-heading {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--ebb-text);
	margin:      1.25rem 0 .5rem;
}
.ncred-form-tag {
	font-size:      .72rem;
	font-weight:    600;
	background:     var(--ebb-accent);
	color:          #fff;
	padding:        .15rem .5rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ncred-hint {
	font-size:   .9rem;
	color:       var(--ebb-muted);
	margin:      -.4rem 0 1rem;
	line-height: 1.5;
}
.ncred-rev { font-size: .75rem; color: var(--ebb-muted); }

/* ── Grid ────────────────────────────────────────────────── */
.ncred-grid   { display: grid; gap: 1rem; }
.ncred-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ncred-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ncred-col-2  { grid-column: span 2; }
@media (max-width: 640px) {
	.ncred-grid-2, .ncred-grid-3 { grid-template-columns: 1fr; }
	.ncred-col-2 { grid-column: span 1; }
}

/* ── Fields ──────────────────────────────────────────────── */
.ncred-field { display: flex; flex-direction: column; gap: .35rem; }
.ncred-field label {
	font-size:      .78rem;
	font-weight:    700;
	color:          var(--ebb-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.ncred-field input[type="text"],
.ncred-field input[type="number"],
.ncred-field select {
	width:       100%;
	height:      var(--ebb-input-height);
	padding:     0 .75rem;
	border:      1px solid var(--ebb-border);
	font-family: var(--ebb-font);
	font-size:   1rem;
	color:       var(--ebb-text);
	background:  var(--ebb-bg);
	transition:  border-color .15s, box-shadow .15s;
}
.ncred-field input:focus,
.ncred-field select:focus {
	outline:      none;
	border-color: var(--ebb-accent);
	box-shadow:   0 0 0 3px rgba(173,0,40,.12);
}

/* ── Checkbox group ──────────────────────────────────────── */
.ncred-checkbox-group {
	display:        flex;
	flex-direction: column;
	gap:            .6rem;
	margin-top:     .5rem;
}
.ncred-checkbox-group label {
	display:     flex;
	align-items: center;
	gap:         .5rem;
	font-size:   1rem;
	font-weight: 400;
	cursor:      pointer;
}
.ncred-checkbox-group input[type="checkbox"] {
	width:  18px;
	height: 18px;
	accent-color: var(--ebb-accent);
}

/* ── Disclosure question list ────────────────────────────── */
.ncred-q-list { display: flex; flex-direction: column; }
.ncred-q-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         .7rem .75rem;
	border-bottom:   1px solid var(--ebb-border);
}
.ncred-q-row:last-child   { border-bottom: none; }
.ncred-q-row:nth-child(even) { background: var(--ebb-bg-alt); }
.ncred-q-label {
	font-size:   1rem;
	flex:        1;
	line-height: 1.4;
}
.ncred-q-options {
	display:    flex;
	gap:        .875rem;
	flex-shrink:0;
}
.ncred-q-options label {
	display:     flex;
	align-items: center;
	gap:         .3rem;
	font-size:   .9rem;
	font-weight: 700;
	cursor:      pointer;
	color:       var(--ebb-accent);
	white-space: nowrap;
}
.ncred-q-options input[type="radio"] {
	width:        16px;
	height:       16px;
	accent-color: var(--ebb-accent);
}
@media (max-width: 600px) {
	.ncred-q-row     { flex-direction: column; align-items: flex-start; }
	.ncred-q-options { flex-wrap: wrap; }
}

/* ── Save bar ────────────────────────────────────────────── */
.ncred-save-bar {
	display:     flex;
	align-items: center;
	gap:         1rem;
	padding:     1.1rem 1.25rem;
	border:      1px solid var(--ebb-border);
	border-top:  none;
	background:  var(--ebb-bg-alt);
}
.ncred-save-status           { font-size: .9rem; color: var(--ebb-muted); }
.ncred-save-status.is-saving { color: var(--ebb-accent); }
.ncred-save-status.is-saved  { color: var(--ebb-success); font-weight: 700; }
.ncred-save-status.is-error  { color: #b00020; }

/* ── Buttons ─────────────────────────────────────────────── */
.ncred-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .35rem;
	padding:         0 1.25rem;
	height:          var(--ebb-input-height);
	font-family:     var(--ebb-font);
	font-size:       1rem;
	font-weight:     700;
	letter-spacing:  .02em;
	border:          2px solid transparent;
	cursor:          pointer;
	text-decoration: none;
	white-space:     nowrap;
	transition:      background .15s, color .15s, border-color .15s;
}
.ncred-btn-primary {
	background:   var(--ebb-accent);
	color:        #fff;
	border-color: var(--ebb-accent);
}
.ncred-btn-primary:hover {
	background:   var(--ebb-accent-dk);
	border-color: var(--ebb-accent-dk);
}
.ncred-btn-outline {
	background:   transparent;
	color:        var(--ebb-accent);
	border-color: var(--ebb-accent);
}
.ncred-btn-outline:hover {
	background:   var(--ebb-accent);
	color:        #fff;
}
.ncred-btn-danger {
	background:   transparent;
	color:        #b00020;
	border-color: #b00020;
	height:       34px;
	padding:      0 .75rem;
	font-size:    .85rem;
}
.ncred-btn-danger:hover { background: #b00020; color: #fff; }
.ncred-btn:disabled     { opacity: .45; cursor: not-allowed; }

/* ── Library transaction bar ─────────────────────────────── */
.ncred-lib-tx-bar {
	display:       flex;
	align-items:   center;
	gap:           .875rem;
	padding:       .875rem 1rem;
	background:    var(--ebb-bg-alt);
	border:        1px solid var(--ebb-border);
	margin-bottom: 1rem;
	flex-wrap:     wrap;
}
.ncred-lib-tx-bar label {
	font-size:  1rem;
	font-weight:700;
	white-space:nowrap;
}
.ncred-lib-tx-bar select {
	flex:        1;
	min-width:   220px;
	height:      var(--ebb-input-height);
	padding:     0 .75rem;
	border:      1px solid var(--ebb-border);
	font-family: var(--ebb-font);
	font-size:   1rem;
}
.ncred-lib-tx-status          { font-size: .9rem; font-weight: 700; color: var(--ebb-muted); }
.ncred-lib-tx-status.is-loaded{ color: var(--ebb-success); }

/* ── Forms Library grid ──────────────────────────────────── */
.ncred-lib-grid { display: flex; flex-direction: column; gap: 1rem; }
.ncred-lib-card {
	display:     grid;
	grid-template-columns: 1fr auto;
	grid-template-rows:    auto auto;
	gap:         .3rem .875rem;
	align-items: center;
	padding:     1rem 1.25rem;
	background:  var(--ebb-bg);
	border:      1px solid var(--ebb-border);
	box-shadow:  var(--ebb-shadow);
}
.ncred-lib-meta {
	display:     flex;
	align-items: center;
	gap:         .6rem;
	grid-column: 1;
	grid-row:    1;
}
.ncred-form-number {
	font-size:      .78rem;
	font-weight:    700;
	color:          var(--ebb-accent);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.ncred-form-title  { font-size: 1rem; font-weight: 500; grid-column: 1; grid-row: 2; }
.ncred-lib-actions {
	grid-column: 2;
	grid-row:    1 / 3;
	display:     flex;
	flex-direction: column;
	gap:         .5rem;
	align-items: flex-end;
}
.ncred-lib-actions .ncred-btn {
	min-width:   150px;
	justify-content: center;
	font-size:   .9rem;
}
@media (max-width: 520px) {
	.ncred-lib-card    { grid-template-columns: 1fr; }
	.ncred-lib-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
}

/* ── Upload zone ─────────────────────────────────────────── */
.ncred-upload-zone {
	border:     2px dashed var(--ebb-border);
	padding:    2.5rem 1rem;
	text-align: center;
	cursor:     pointer;
	transition: border-color .15s, background .15s;
	margin-bottom: 1rem;
}
.ncred-upload-zone.is-drag-over {
	border-color: var(--ebb-accent);
	background:   var(--ebb-accent-lt);
}
.ncred-upload-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            .6rem;
	color:          var(--ebb-muted);
}
.ncred-upload-inner svg     { opacity: .4; }
.ncred-upload-inner p       { margin: 0; font-size: 1rem; }
.ncred-upload-label         { cursor: pointer; }

/* ── Progress ────────────────────────────────────────────── */
.ncred-upload-progress { margin-bottom: 1rem; }
.ncred-progress-bar    { height: 6px; background: var(--ebb-border); overflow: hidden; margin-bottom: .4rem; }
.ncred-progress-fill   { height: 100%; background: var(--ebb-accent); width: 0; transition: width .2s; }
#ncred-progress-label  { font-size: .875rem; color: var(--ebb-muted); }

/* ── Document list ───────────────────────────────────────── */
.ncred-doc-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.ncred-doc-item  {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         .6rem .875rem;
	background:      var(--ebb-bg-alt);
	border:          1px solid var(--ebb-border);
}
.ncred-doc-name      { font-size: 1rem; color: var(--ebb-accent); text-decoration: none; word-break: break-all; }
.ncred-doc-name:hover{ text-decoration: underline; }

/* ── Grid tables (A11, C5, D2 component grids) ───────────── */
.ncred-grid-table {
	width: 100%;
	border: 1px solid var(--ebb-border);
	margin: .5rem 0 1.25rem;
}
.ncred-grid-table-head,
.ncred-grid-table-row {
	display: grid;
	grid-template-columns: 1fr 60px 60px 60px 60px;
	align-items: center;
	border-bottom: 1px solid var(--ebb-border);
}
.ncred-grid-table-head {
	background:  var(--ebb-accent);
	color:       #fff;
	font-weight: 700;
	font-size:   .85rem;
}
.ncred-grid-table-head span,
.ncred-grid-table-row > * {
	padding: .5rem .6rem;
	text-align: center;
}
.ncred-grid-table-head span:first-child,
.ncred-grid-table-label {
	text-align: left;
}
.ncred-grid-table-row:last-child { border-bottom: none; }
.ncred-grid-table-row:nth-child(even) { background: var(--ebb-bg-alt); }
.ncred-grid-table-label {
	font-size: 1rem;
	padding:   .5rem .75rem;
}
.ncred-grid-radio {
	display:         flex;
	justify-content: center;
	align-items:     center;
	cursor:          pointer;
	font-size:       .85rem;
	font-weight:     600;
	color:           var(--ebb-accent);
	gap:             .25rem;
	padding:         .5rem .25rem;
}
.ncred-grid-radio input[type="radio"] {
	width:        16px;
	height:       16px;
	accent-color: var(--ebb-accent);
	cursor:       pointer;
}
@media (max-width: 580px) {
	.ncred-grid-table-head,
	.ncred-grid-table-row {
		grid-template-columns: 1fr 48px 48px 48px 48px;
	}
	.ncred-grid-table-head span { font-size: .75rem; }
}