/**
 * BMN Frontend CRUD — fe-crud.css
 *
 * Styles untuk:
 *  - Admin action bar di dashboard (.bmn-fe-admin-bar)
 *  - Form Tambah Barang (.bmn-crud-*)
 *  - Form Import (.bmn-import-*)
 *  - Button variants (.bmn-fe-btn--)
 *
 * Semua selector namespaced untuk isolasi dari tema aktif.
 */

/* ── Button base & variants ───────────────────────────────────────── */
.bmn-fe-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 20px;
	border: 1.5px solid transparent;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
	white-space: nowrap;
}

.bmn-fe-btn:active { transform: scale(.97); }
.bmn-fe-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.bmn-fe-btn--primary {
	background: #0d6efd; color: #fff; border-color: #0d6efd;
}
.bmn-fe-btn--primary:hover { background: #0a5bcf; border-color: #0a5bcf; color: #fff; text-decoration: none; }

.bmn-fe-btn--success {
	background: #198754; color: #fff; border-color: #198754;
}
.bmn-fe-btn--success:hover { background: #146c43; border-color: #146c43; color: #fff; text-decoration: none; }

.bmn-fe-btn--outline {
	background: transparent; color: #0d6efd; border-color: #0d6efd;
}
.bmn-fe-btn--outline:hover { background: #0d6efd; color: #fff; text-decoration: none; }

.bmn-fe-btn--ghost {
	background: transparent; color: #6c757d; border-color: #dee2e6;
}
.bmn-fe-btn--ghost:hover { background: #f8f9fa; color: #212529; text-decoration: none; }

.bmn-fe-btn--sm { padding: 5px 12px; font-size: 13px; }

/* ── Admin action bar (in dashboard) ──────────────────────────────── */
.bmn-fe-admin-bar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	padding: 14px 0;
	margin-bottom: 8px;
	border-bottom: 1px solid #dee2e6;
}

.bmn-fe-admin-bar-label {
	font-size: 12px;
	font-weight: 600;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-right: 4px;
}

/* ── CRUD wrap ─────────────────────────────────────────────────────── */
.bmn-crud-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	color: #212529;
	line-height: 1.55;
}

.bmn-crud-header {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid #dee2e6;
}

.bmn-crud-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
}

.bmn-crud-subtitle {
	font-size: 14px;
	color: #6c757d;
	margin: 0;
}

/* ── Status message ────────────────────────────────────────────────── */
.bmn-crud-msg {
	padding: 11px 16px;
	border-radius: 6px;
	font-size: 14px;
	margin-bottom: 16px;
}
.bmn-crud-msg--info  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.bmn-crud-msg--ok    { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.bmn-crud-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Form layout ───────────────────────────────────────────────────── */
.bmn-crud-form { }

.bmn-crud-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

.bmn-crud-field {
	flex: 1 1 180px;
	margin-bottom: 18px;
	min-width: 140px;
}

.bmn-crud-field--wide { flex: 2 1 280px; }
.bmn-crud-field--sm   { flex: 0 1 100px; min-width: 80px; }

.bmn-crud-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #374151;
}

.bmn-crud-required { color: #ef4444; margin-left: 2px; }

.bmn-crud-input,
.bmn-crud-select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	color: #111827;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

.bmn-crud-input:focus,
.bmn-crud-select:focus {
	outline: none;
	border-color: #0d6efd;
	box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.bmn-crud-input::placeholder { color: #9ca3af; }

.bmn-crud-input--readonly {
	background: #f8f9fa;
	color: #6c757d;
	cursor: not-allowed;
}

.bmn-crud-hint {
	display: block;
	font-size: 12px;
	color: #9ca3af;
	margin-top: 4px;
}

.bmn-crud-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid #e9ecef;
}

/* ── Import: dropzone ──────────────────────────────────────────────── */
.bmn-import-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 760px) {
	.bmn-import-grid { grid-template-columns: 1fr; }
}

.bmn-import-dropzone {
	border: 2px dashed #d1d5db;
	border-radius: 10px;
	padding: 32px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
}

.bmn-import-dropzone:hover,
.bmn-import-dropzone--drag {
	border-color: #0d6efd;
	background: #eff6ff;
}

.bmn-import-dropzone--has-file {
	border-color: #198754;
	background: #f0fdf4;
}

.bmn-import-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.bmn-import-icon { display: block; font-size: 36px; margin-bottom: 8px; }
.bmn-import-drop-text { font-size: 15px; font-weight: 600; color: #374151; margin: 0 0 4px; }
.bmn-import-drop-hint { font-size: 13px; color: #9ca3af; margin: 0; }
.bmn-import-filename  { font-size: 13px; font-weight: 600; color: #198754; margin: 8px 0 0; }

/* ── Import: progress bar ──────────────────────────────────────────── */
.bmn-import-progress {
	height: 6px;
	background: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 16px;
}

.bmn-import-progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #0d6efd, #60a5fa);
	border-radius: 4px;
	transition: width .2s ease;
}

/* ── Import: results ───────────────────────────────────────────────── */
.bmn-import-results { padding: 20px; background: #f8f9fa; border-radius: 8px; }
.bmn-import-results-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.bmn-import-stats { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

.bmn-import-stat {
	flex: 1;
	min-width: 80px;
	text-align: center;
	padding: 14px 8px;
	border-radius: 8px;
}

.bmn-import-stat strong { display: block; font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.bmn-import-stat span   { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

.bmn-import-stat--ok   { background: #d1fae5; color: #065f46; }
.bmn-import-stat--skip { background: #fef3c7; color: #92400e; }
.bmn-import-stat--err  { background: #fee2e2; color: #991b1b; }

.bmn-import-error-list {
	margin: 0 0 12px;
	padding: 12px 20px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	font-size: 13px;
	color: #991b1b;
	list-style: disc;
}

/* ── Import: guide panel ───────────────────────────────────────────── */
.bmn-import-guide {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 16px 20px;
}

.bmn-import-guide-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.bmn-import-guide-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

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

.bmn-import-guide-table th {
	text-align: left;
	padding: 6px 8px;
	background: #e9ecef;
	font-weight: 600;
	border-bottom: 2px solid #dee2e6;
}

.bmn-import-guide-table td {
	padding: 6px 8px;
	border-bottom: 1px solid #e9ecef;
	vertical-align: top;
}

.bmn-import-guide-table code {
	font-size: 12px;
	background: #e9ecef;
	padding: 2px 5px;
	border-radius: 3px;
}

.bmn-import-required-col { color: #dc3545; font-weight: 600; }

.bmn-import-note {
	margin-top: 14px;
	font-size: 12px;
	color: #6c757d;
	line-height: 1.6;
}

.bmn-import-note strong { display: block; margin-bottom: 4px; color: #374151; }
.bmn-import-note ul { margin: 0; padding-left: 18px; }

/* ── Foto upload widget ─────────────────────────────────────────────── */
.bmn-foto-upload-wrap { display: flex; flex-direction: column; gap: 8px; }

.bmn-foto-preview {
	position: relative;
	display: inline-block;
}

.bmn-foto-thumb {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 8px;
	border: 1.5px solid #dee2e6;
	display: block;
}

.bmn-foto-remove-btn {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	background: #ef4444;
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.bmn-foto-remove-btn:hover { background: #b91c1c; }

/* ── Table: foto column ──────────────────────────────────────────────── */
.bmn-fe-th-foto { width: 70px; text-align: center; }
.bmn-fe-td-foto { width: 70px; text-align: center; padding: 6px 8px !important; vertical-align: middle; }

/* ── Edit link in table row ──────────────────────────────────────────── */
.bmn-fe-edit-link {
	color: inherit;
	text-decoration: none;
}
.bmn-fe-edit-link:hover { color: #0d6efd; text-decoration: underline; }
.bmn-fe-edit-link span  { font-size: 11px; opacity: .6; margin-left: 3px; }

/* ── Edit form: ID badge ─────────────────────────────────────────────── */
.bmn-crud-id-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 400;
	color: #9ca3af;
	margin-left: 6px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.bmn-crud-row { flex-direction: column; gap: 0; }
	.bmn-crud-field, .bmn-crud-field--wide, .bmn-crud-field--sm { flex: 1 1 100%; }
	.bmn-fe-admin-bar { flex-direction: column; align-items: flex-start; }
}