/* =============================================================================
   Mineral Identifier — Front-end Stylesheet
   All classes are namespaced with .mi- to avoid theme conflicts.
   Mobile-first: base styles target small screens; larger breakpoints via @media.
   No external framework dependency — pure CSS.
   ============================================================================= */

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
.mi-wrapper *,
.mi-wrapper *::before,
.mi-wrapper *::after {
	box-sizing: border-box;
}

.mi-wrapper {
	--mi-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mi-radius:      12px;
	--mi-radius-sm:   8px;
	--mi-shadow:      0 2px 16px rgba(0,0,0,.08);
	--mi-shadow-md:   0 4px 24px rgba(0,0,0,.12);
	--mi-border:      #e2e8f0;
	--mi-bg:          #f8fafc;
	--mi-card-bg:     #ffffff;
	--mi-text:        #1e293b;
	--mi-text-muted:  #64748b;
	--mi-accent:      #4f46e5;
	--mi-accent-light:#ede9fe;
	--mi-green:       #16a34a;
	--mi-amber:       #d97706;
	--mi-red:         #dc2626;
	--mi-transition:  200ms ease;

	font-family: var(--mi-font);
	color:       var(--mi-text);
	line-height: 1.6;
	max-width:   760px;
	margin:      0 auto;
	padding:     0 16px;
}

.mi-hidden {
	display: none !important;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.mi-header {
	text-align: center;
	padding:    32px 16px 24px;
}

.mi-header-icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 8px;
}

.mi-title {
	font-size:   1.75rem;
	font-weight: 700;
	margin:      0 0 8px;
	color:       var(--mi-text);
}

.mi-subtitle {
	color:     var(--mi-text-muted);
	font-size: .95rem;
	margin:    0;
}

/* ── Drop Zone ─────────────────────────────────────────────────────────────── */
.mi-dropzone {
	position:      relative;
	border:        2px dashed var(--mi-border);
	border-radius: var(--mi-radius);
	background:    var(--mi-card-bg);
	cursor:        pointer;
	transition:    border-color var(--mi-transition), background var(--mi-transition);
	overflow:      hidden;
}

.mi-dropzone:hover,
.mi-dropzone:focus,
.mi-dropzone--active {
	border-color: var(--mi-accent);
	background:   var(--mi-accent-light);
	outline:      none;
}

.mi-dropzone-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content:center;
	padding:        40px 24px;
	pointer-events: none; /* Clicks go to the parent drop zone. */
	text-align:     center;
}

.mi-upload-icon {
	width:  52px;
	height: 52px;
	color:  var(--mi-accent);
	margin-bottom: 12px;
}

.mi-dropzone-label {
	font-size:   1rem;
	font-weight: 600;
	margin:      0 0 4px;
}

.mi-dropzone-sublabel,
.mi-dropzone-formats {
	font-size: .85rem;
	color:     var(--mi-text-muted);
	margin:    0;
}

/* ── Thumbnail preview strip ───────────────────────────────────────────────── */
.mi-preview-strip {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
	margin:    16px 0 8px;
	min-height: 0;
}

.mi-thumb {
	position:      relative;
	width:         88px;
	height:        88px;
	border-radius: var(--mi-radius-sm);
	overflow:      hidden;
	border:        2px solid var(--mi-border);
	flex-shrink:   0;
}

.mi-thumb-img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

.mi-thumb-remove {
	position:      absolute;
	top:           4px;
	right:         4px;
	background:    rgba(0,0,0,.65);
	border:        none;
	border-radius: 50%;
	width:         22px;
	height:        22px;
	color:         #fff;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0;
	transition:    background var(--mi-transition);
}

.mi-thumb-remove:hover {
	background: var(--mi-red);
}

/* ── Image counter ─────────────────────────────────────────────────────────── */
.mi-image-counter {
	font-size: .85rem;
	color:     var(--mi-text-muted);
	margin:    4px 0 0;
}

/* ── Collapsible details section ───────────────────────────────────────────── */
.mi-details-section {
	background:    var(--mi-card-bg);
	border:        1px solid var(--mi-border);
	border-radius: var(--mi-radius);
	margin:        20px 0;
	overflow:      hidden;
}

.mi-details-summary {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     14px 18px;
	cursor:      pointer;
	font-weight: 600;
	font-size:   .95rem;
	list-style:  none;
	user-select: none;
}

.mi-details-summary::-webkit-details-marker { display: none; }

.mi-details-summary:hover {
	background: var(--mi-bg);
}

.mi-details-chevron {
	margin-left: auto;
	width:       18px;
	height:      18px;
	border-right:  2px solid var(--mi-text-muted);
	border-bottom: 2px solid var(--mi-text-muted);
	transform: rotate(45deg);
	transition: transform var(--mi-transition);
	flex-shrink: 0;
}

.mi-details-section[open] .mi-details-chevron {
	transform: rotate(-135deg);
}

.mi-details-body {
	padding:    4px 18px 18px;
	display:    grid;
	gap:        14px;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */
.mi-field-group {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.mi-label {
	font-size:   .875rem;
	font-weight: 600;
	color:       var(--mi-text);
}

.mi-label-hint {
	font-weight: 400;
	color:       var(--mi-text-muted);
	font-size:   .8rem;
}

.mi-input,
.mi-select,
.mi-textarea {
	padding:       10px 12px;
	border:        1px solid var(--mi-border);
	border-radius: var(--mi-radius-sm);
	font-size:     .9rem;
	font-family:   var(--mi-font);
	color:         var(--mi-text);
	background:    var(--mi-card-bg);
	transition:    border-color var(--mi-transition), box-shadow var(--mi-transition);
	width:         100%;
}

.mi-input:focus,
.mi-select:focus,
.mi-textarea:focus {
	outline:      none;
	border-color: var(--mi-accent);
	box-shadow:   0 0 0 3px rgba(79,70,229,.15);
}

.mi-textarea {
	resize:      vertical;
	min-height:  72px;
}

.mi-char-counter {
	font-size: .78rem;
	color:     var(--mi-text-muted);
	align-self: flex-end;
}

/* ── Error box ─────────────────────────────────────────────────────────────── */
.mi-error-box {
	background:    #fef2f2;
	border:        1px solid #fca5a5;
	border-radius: var(--mi-radius-sm);
	color:         #b91c1c;
	padding:       12px 16px;
	font-size:     .9rem;
	margin:        16px 0;
}

/* ── Submit button ─────────────────────────────────────────────────────────── */
.mi-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         16px 24px;
	background:      var(--mi-accent);
	color:           #fff;
	border:          none;
	border-radius:   var(--mi-radius);
	font-size:       1.05rem;
	font-weight:     700;
	font-family:     var(--mi-font);
	cursor:          pointer;
	transition:      background var(--mi-transition), transform var(--mi-transition), opacity var(--mi-transition);
	margin-top:      8px;
}

.mi-submit-btn:hover:not(:disabled) {
	background: #4338ca;
}

.mi-submit-btn:active:not(:disabled) {
	transform: scale(.98);
}

.mi-submit-btn:disabled {
	opacity: .65;
	cursor:  not-allowed;
}

.mi-helper-text {
	text-align: center;
	font-size:  .82rem;
	color:      var(--mi-text-muted);
	margin:     8px 0 0;
}

/* ── Loading overlay ───────────────────────────────────────────────────────── */
.mi-loading-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(15,23,42,.55);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         9999;
	backdrop-filter: blur(3px);
}

.mi-loading-card {
	background:    var(--mi-card-bg);
	border-radius: var(--mi-radius);
	padding:       36px 48px;
	text-align:    center;
	max-width:     320px;
	box-shadow:    var(--mi-shadow-md);
}

.mi-spinner {
	width:         48px;
	height:        48px;
	border:        4px solid var(--mi-accent-light);
	border-top-color: var(--mi-accent);
	border-radius: 50%;
	animation:     mi-spin 0.8s linear infinite;
	margin:        0 auto 16px;
}

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

.mi-loading-message {
	font-size:   .9rem;
	color:       var(--mi-text-muted);
	margin:      0;
	min-height:  1.4em;
	transition:  opacity .3s;
}

/* ── Result Card ───────────────────────────────────────────────────────────── */
.mi-result-section {
	padding-bottom: 40px;
}

.mi-result-card {
	background:    var(--mi-card-bg);
	border:        1px solid var(--mi-border);
	border-radius: var(--mi-radius);
	box-shadow:    var(--mi-shadow);
	overflow:      hidden;
}

/* Header */
.mi-result-header {
	display:        flex;
	align-items:    flex-start;
	justify-content:space-between;
	padding:        24px 24px 20px;
	background:     linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
	border-bottom:  1px solid var(--mi-border);
	gap:            16px;
}

.mi-result-header-content {
	flex: 1;
	min-width: 0;
}

.mi-mineral-name,
.mi-mineral-title {
	font-size:   1.6rem;
	font-weight: 800;
	margin:      0 0 4px;
	color:       var(--mi-text);
	word-break:  break-word;
}

.mi-scientific-name {
	font-style: italic;
	color:      var(--mi-text-muted);
	font-size:  .95rem;
	margin:     0 0 10px;
}

.mi-badges-row {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin-top:6px;
}

.mi-result-header-icon {
	font-size:   2.5rem;
	flex-shrink: 0;
}

/* Type badges (Dana / chemical class) */
.mi-type-badge,
.mi-subtype-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 999px;
	font-size:     .78rem;
	font-weight:   700;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.mi-type-silicate         { background: #eff6ff; color: #1d4ed8; }
.mi-type-carbonate        { background: #fffbeb; color: #92400e; }
.mi-type-sulfide          { background: #fef3c7; color: #b45309; }
.mi-type-oxide            { background: #fff0e6; color: #c05621; }
.mi-type-halide           { background: #f0fdfa; color: #0f766e; }
.mi-type-phosphate        { background: #fdf4ff; color: #86198f; }
.mi-type-sulfate          { background: #f5f3ff; color: #6d28d9; }
.mi-type-native-element   { background: #ecfdf5; color: #047857; }
.mi-type-organic-mineral  { background: #f1f5f9; color: #475569; }
.mi-type-other            { background: #fefce8; color: #a16207; }
.mi-type-unknown          { background: #f1f5f9; color: #475569; }

.mi-subtype-badge {
	background: #f1f5f9;
	color:      #475569;
	font-weight: 500;
	text-transform: none;
}

/* ── Confidence meter ──────────────────────────────────────────────────────── */
.mi-confidence-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--mi-border);
}

.mi-confidence-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   10px;
}

.mi-confidence-label {
	font-weight: 600;
	font-size:   .9rem;
}

.mi-confidence-value {
	font-size:   1.1rem;
	font-weight: 700;
}

.mi-confidence-track {
	height:        10px;
	background:    #e2e8f0;
	border-radius: 999px;
	overflow:      hidden;
}

.mi-confidence-bar {
	height:        100%;
	border-radius: 999px;
	transition:    width 1s cubic-bezier(.4,0,.2,1), background .4s;
}

.mi-conf-high { background: var(--mi-green); }
.mi-conf-mid  { background: var(--mi-amber); }
.mi-conf-low  { background: var(--mi-red);   }

.mi-confidence-reason {
	margin:    8px 0 0;
	font-size: .85rem;
	color:     var(--mi-text-muted);
}

.mi-low-confidence-callout {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	margin-top:    12px;
	background:    #fff7ed;
	border:        1px solid #fed7aa;
	border-radius: var(--mi-radius-sm);
	padding:       10px 14px;
	font-size:     .85rem;
	color:         #9a3412;
}

/* ── Info grid ─────────────────────────────────────────────────────────────── */
.mi-info-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1px;
	background:            var(--mi-border);
	border-top:            1px solid var(--mi-border);
	border-bottom:         1px solid var(--mi-border);
}

.mi-info-card {
	background: var(--mi-card-bg);
	padding:    18px 20px;
}

.mi-info-full {
	grid-column: 1 / -1;
}

.mi-info-heading {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:       var(--mi-text-muted);
	margin:      0 0 8px;
}

.mi-info-value {
	font-size:   1rem;
	font-weight: 600;
	margin:      0;
	color:       var(--mi-text);
}

/* ── Tag pills ─────────────────────────────────────────────────────────────── */
.mi-tag-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.mi-tag-pill {
	display:       inline-block;
	padding:       4px 10px;
	background:    var(--mi-bg);
	border:        1px solid var(--mi-border);
	border-radius: 999px;
	font-size:     .82rem;
	color:         var(--mi-text);
}

/* ── Color swatches ────────────────────────────────────────────────────────── */
.mi-color-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
}

.mi-color-swatch {
	display:     flex;
	align-items: center;
	gap:         6px;
}

.mi-color-dot {
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        1px solid rgba(0,0,0,.12);
	flex-shrink:   0;
}

.mi-color-label {
	font-size: .85rem;
	color:     var(--mi-text);
	text-transform: capitalize;
}

/* ── Rarity / Value badges ─────────────────────────────────────────────────── */
.mi-rarity-badge,
.mi-value-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 999px;
	font-size:     .82rem;
	font-weight:   700;
}

/* Rarity */
.mi-rarity-very-common { background: #f0fdf4; color: #15803d; }
.mi-rarity-common      { background: #f0fdf4; color: #16a34a; }
.mi-rarity-uncommon    { background: #fffbeb; color: #b45309; }
.mi-rarity-rare        { background: #fdf4ff; color: #9333ea; }
.mi-rarity-very-rare   { background: #fff0f0; color: #dc2626; }

/* Collector value */
.mi-value-low       { background: #f1f5f9; color: #475569; }
.mi-value-moderate  { background: #eff6ff; color: #1d4ed8; }
.mi-value-high      { background: #f0fdf4; color: #15803d; }
.mi-value-very-high { background: #fdf4ff; color: #9333ea; }

/* ── Key properties ────────────────────────────────────────────────────────── */
.mi-properties-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--mi-border);
}

.mi-section-heading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   1rem;
	font-weight: 700;
	margin:      0 0 14px;
	color:       var(--mi-text);
}

.mi-properties-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        8px;
}

@media (min-width: 480px) {
	.mi-properties-list {
		grid-template-columns: 1fr 1fr;
	}
}

.mi-property-item {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	font-size:   .9rem;
	background:  var(--mi-bg);
	padding:     10px 12px;
	border-radius: var(--mi-radius-sm);
	border:      1px solid var(--mi-border);
}

.mi-prop-bullet {
	color:      var(--mi-accent);
	flex-shrink: 0;
	font-size:   .75rem;
	margin-top:  2px;
}

/* ── Similar rocks ─────────────────────────────────────────────────────────── */
.mi-similar-section {
	border-bottom: 1px solid var(--mi-border);
}

.mi-section-summary {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     16px 24px;
	cursor:      pointer;
	font-weight: 700;
	font-size:   1rem;
	list-style:  none;
	user-select: none;
}

.mi-section-summary::-webkit-details-marker { display: none; }
.mi-section-summary:hover { background: var(--mi-bg); }

.mi-similar-section[open] .mi-details-chevron {
	transform: rotate(-135deg);
}

.mi-similar-list {
	padding:    0 24px 20px;
	display:    grid;
	gap:        12px;
}

.mi-similar-item {
	background:    var(--mi-bg);
	border:        1px solid var(--mi-border);
	border-radius: var(--mi-radius-sm);
	padding:       12px 14px;
}

.mi-similar-name {
	display:     block;
	margin-bottom: 4px;
	color:       var(--mi-text);
	font-size:   .95rem;
}

.mi-similar-diff {
	margin:    0;
	font-size: .85rem;
	color:     var(--mi-text-muted);
}

/* ── Alternative IDs ───────────────────────────────────────────────────────── */
.mi-alt-ids-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--mi-border);
}

.mi-alt-ids-list {
	display: grid;
	gap:     10px;
}

@media (min-width: 560px) {
	.mi-alt-ids-list {
		grid-template-columns: 1fr 1fr;
	}
}

.mi-alt-card {
	background:    var(--mi-bg);
	border:        1px solid var(--mi-border);
	border-radius: var(--mi-radius-sm);
	padding:       12px 14px;
}

.mi-alt-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   6px;
	gap:             8px;
}

.mi-alt-name {
	font-weight: 600;
	font-size:   .9rem;
	min-width:   0;
	word-break:  break-word;
}

.mi-alt-conf {
	font-size:     .78rem;
	font-weight:   700;
	padding:       2px 8px;
	border-radius: 999px;
	flex-shrink:   0;
}

.mi-conf-high.mi-alt-conf { background: #dcfce7; color: var(--mi-green); }
.mi-conf-mid.mi-alt-conf  { background: #fef3c7; color: var(--mi-amber); }
.mi-conf-low.mi-alt-conf  { background: #fee2e2; color: var(--mi-red);   }

.mi-alt-reason {
	margin:    0;
	font-size: .83rem;
	color:     var(--mi-text-muted);
}

/* ── Collection tip ────────────────────────────────────────────────────────── */
.mi-tip-box {
	margin: 0;
	background:    #fffbeb;
	border-top:    1px solid var(--mi-border);
	border-bottom: 1px solid var(--mi-border);
	padding:       16px 24px;
}

.mi-tip-header {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 6px;
}

.mi-tip-icon {
	font-size: 1.1rem;
}

.mi-tip-box p {
	margin:    0;
	font-size: .9rem;
	color:     var(--mi-text);
}

/* ── Image quality note ────────────────────────────────────────────────────── */
.mi-quality-note {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	padding:       12px 24px;
	background:    #f0f9ff;
	border-bottom: 1px solid var(--mi-border);
	font-size:     .85rem;
	color:         #075985;
}

/* ── Result action buttons ─────────────────────────────────────────────────── */
.mi-result-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
	padding:   20px 24px;
}

.mi-btn-primary,
.mi-btn-secondary {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	padding:     11px 20px;
	border-radius: var(--mi-radius-sm);
	font-size:   .9rem;
	font-weight: 600;
	font-family: var(--mi-font);
	cursor:      pointer;
	border:      none;
	transition:  background var(--mi-transition), transform var(--mi-transition);
}

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

.mi-btn-primary:hover {
	background: #4338ca;
}

.mi-btn-secondary {
	background: var(--mi-bg);
	color:      var(--mi-text);
	border:     1px solid var(--mi-border);
}

.mi-btn-secondary:hover {
	background: #e2e8f0;
}

.mi-btn-primary:active,
.mi-btn-secondary:active {
	transform: scale(.97);
}

.mi-share-toast {
	text-align: center;
	font-size:  .85rem;
	color:      var(--mi-green);
	padding:    0 24px 16px;
	margin:     0;
}

/* ── Responsive overrides ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.mi-info-grid {
		grid-template-columns: 1fr;
	}

	.mi-info-full {
		grid-column: 1;
	}

	.mi-result-header {
		flex-direction: column;
	}

	.mi-result-header-icon {
		display: none;
	}

	.mi-mineral-name,
	.mi-mineral-title {
		font-size: 1.35rem;
	}

	.mi-result-actions {
		flex-direction: column;
	}

	.mi-btn-primary,
	.mi-btn-secondary {
		width:           100%;
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.mi-details-body {
		grid-template-columns: 1fr 1fr;
	}
}