.insaatim-demir-wrap {
	--idm-bg: #ffffff;
	--idm-fg: #1a1a1a;
	--idm-muted: #6b7280;
	--idm-border: #b9bcc2;
	--idm-header-bg: #d9d9d9;
	--idm-input-bg: transparent;
	--idm-btn-bg: #1a1a1a;
	--idm-btn-fg: #ffffff;
	--idm-btn-secondary-bg: #e5e7eb;
	--idm-btn-secondary-fg: #1a1a1a;
	--idm-total-bg: #f2f2f2;
	--idm-final-bg: #1a1a1a;
	--idm-final-fg: #ffffff;
	--idm-icon-hover: rgba(0,0,0,0.06);
	--idm-warn-bg: #fef3c7;
	--idm-warn-fg: #78350f;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--idm-fg);
	background: var(--idm-bg);
	max-width: 980px;
	margin: 20px auto;
	line-height: 1.5;
	padding: 24px;
	border: 1px solid var(--idm-border);
	border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	.insaatim-demir-wrap:not([data-theme="light"]) {
		--idm-bg: #1a1a1a; --idm-fg: #e5e7eb; --idm-muted: #9ca3af; --idm-border: #444;
		--idm-header-bg: #2c2c2c; --idm-total-bg: #262626;
		--idm-btn-bg: #e5e7eb; --idm-btn-fg: #14161a; --idm-btn-secondary-bg: #333; --idm-btn-secondary-fg: #e5e7eb;
		--idm-final-bg: #e5e7eb; --idm-final-fg: #14161a;
		--idm-icon-hover: rgba(255,255,255,0.1);
		--idm-warn-bg: #4a3a12; --idm-warn-fg: #fde68a;
	}
}

.insaatim-demir-wrap * { box-sizing: border-box; }

.insaatim-demir-title {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 18px 0 6px;
}

.insaatim-demir-aciklama-metin {
	color: var(--idm-muted);
	font-size: 0.88rem;
	margin: 0 0 18px;
}

.insaatim-demir-table-scroll { overflow-x: auto; margin-bottom: 18px; }

/* --- Giriş formu (üst kısım) - normal <table>, tek satır --- */
.insaatim-demir-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.insaatim-demir-wrap table th, .insaatim-demir-wrap table td {
	border: 1px solid var(--idm-border);
	padding: 9px 10px;
	text-align: left;
	vertical-align: middle;
}
.insaatim-demir-wrap table thead th {
	background: var(--idm-header-bg);
	font-weight: 700;
}
.insaatim-demir-wrap table input[type="text"],
.insaatim-demir-wrap table input[type="number"],
.insaatim-demir-wrap table select {
	border: 1px solid var(--idm-border);
	border-radius: 3px;
	background: var(--idm-input-bg);
	color: var(--idm-fg);
	font-size: inherit;
	font-family: inherit;
	width: 100%;
	padding: 5px 6px;
}
.insaatim-demir-wrap table input:focus,
.insaatim-demir-wrap table select:focus { outline: 2px solid #93c5fd; }
.insaatim-demir-wrap table td.num, .insaatim-demir-wrap table th.num { text-align: right; }
.insaatim-demir-wrap table td.num input { text-align: right; }
.insaatim-demir-wrap table th.cap-col,
.insaatim-demir-wrap table th.adet-col,
.insaatim-demir-wrap table th.boy-col,
.insaatim-demir-wrap table th.benzer-col { width: 10%; }
.insaatim-demir-wrap table th.islem-col { width: 13%; }

.insaatim-demir-ekle-btn {
	width: 100%;
	background: var(--idm-btn-bg);
	color: var(--idm-btn-fg);
	border: none;
	border-radius: 4px;
	padding: 7px 10px;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------------
   Sonuç bölümü + Toplamlar: TEK bir paylaşılan CSS Grid.
   Her hücreye grid-row/grid-column JS'te AÇIKÇA atanıyor (otomatik
   yerleşim kullanılmıyor) - bu sayede:
   1) Ağırlık sütunu ile alttaki toplamlar piksel hassasiyetinde aynı
      sütun izinde durur (aynı grid-column'u paylaşıyorlar),
   2) yazdırmada ikon sütunları gizlenince (display:none) diğer
      hücreler asla kaymaz, çünkü konumları zaten sabit/açık.
   ------------------------------------------------------------------ */
.insaatim-demir-grid {
	display: grid;
	grid-template-columns: minmax(150px, 2fr) 62px 60px 60px 68px 118px 34px 34px;
	min-width: 660px;
	font-size: 0.92rem;
	border-left: 1px solid var(--idm-border);
}

.insaatim-demir-cell {
	border-right: 1px solid var(--idm-border);
	border-bottom: 1px solid var(--idm-border);
	padding: 9px 10px;
	display: flex;
	align-items: center;
}
/* Üst kenarlık SADECE gerçek tablo hücrelerinde (1-6. sütun) - ikon
   sütunlarının (7-8) üstünde çizgi görünmesin diye .insaatim-demir-grid
   üzerinden değil, doğrudan başlık hücrelerinden veriliyor. */
.insaatim-demir-cell.head { background: var(--idm-header-bg); font-weight: 700; border-top: 1px solid var(--idm-border); }
.insaatim-demir-cell.num { justify-content: flex-end; text-align: right; }
.insaatim-demir-cell.aciklama { white-space: normal; word-break: break-word; }

.insaatim-demir-icon-cell {
	border-bottom: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 0;
}
.insaatim-demir-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	line-height: 0;
	color: var(--idm-fg);
}
.insaatim-demir-icon-btn:hover { background: var(--idm-icon-hover); }
.insaatim-demir-icon-btn svg { width: 16px; height: 16px; display: block; }

.insaatim-demir-empty-cell {
	grid-column: 1 / 7;
	border-right: 1px solid var(--idm-border);
	border-bottom: 1px solid var(--idm-border);
	padding: 14px 10px;
	color: var(--idm-muted);
	font-style: italic;
	text-align: center;
}

/* --- Toplamlar: label 1-5. sütunları kaplar, değer AYNI Ağırlık
   sütununda (6. sütun) - genişlikleri otomatik olarak birebir eşleşir. --- */
.insaatim-demir-total-label {
	grid-column: 1 / 6;
	font-weight: 500;
}
.insaatim-demir-total-value { font-weight: 700; }
.insaatim-demir-cell.total-ince,
.insaatim-demir-cell.total-kalin { background: var(--idm-total-bg); }
.insaatim-demir-cell.total-final { background: var(--idm-final-bg); color: var(--idm-final-fg); font-size: 1.02rem; }

/* --- Aksiyonlar (yazdırılmaz) --- */
.insaatim-demir-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px dashed var(--idm-border);
}
.insaatim-demir-wrap button.idm-btn {
	cursor: pointer;
	border: 1px solid var(--idm-border);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	background: var(--idm-btn-secondary-bg);
	color: var(--idm-btn-secondary-fg);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.insaatim-demir-wrap button.idm-btn.primary {
	background: var(--idm-btn-bg);
	color: var(--idm-btn-fg);
	border-color: var(--idm-btn-bg);
}
.insaatim-demir-wrap button.idm-btn svg { width: 16px; height: 16px; }

/* --- Detaylar paneli (malzeme/işçilik fiyatları) - varsayılan gizli,
   "Detaylar" butonuna basınca açılır. idm-hidden dışında yazdırmayı
   engelleyen bir sınıf taşımaz: açıkken yazdırılırsa o da görünür. --- */
.idm-hidden { display: none !important; }

.insaatim-demir-detay { margin-bottom: 4px; }
.insaatim-demir-detay-baslik {
	font-weight: 700;
	font-size: 1rem;
	margin: 20px 0 8px;
}
.insaatim-demir-detay-baslik:first-child { margin-top: 4px; }
.insaatim-demir-detay table { margin-bottom: 0; }
.insaatim-demir-detay table td.val { text-align: right; font-weight: 600; white-space: nowrap; }
.insaatim-demir-detay table tr.detay-alt-toplam td {
	background: var(--idm-total-bg);
	font-weight: 700;
}
.insaatim-demir-detay table tr.detay-toplam td {
	background: var(--idm-final-bg);
	color: var(--idm-final-fg);
	font-weight: 700;
	font-size: 1.02rem;
}
.insaatim-demir-detay-not {
	color: var(--idm-muted);
	font-size: 0.82rem;
	margin-top: 12px;
}
.insaatim-demir-detay-uyari {
	background: var(--idm-warn-bg);
	color: var(--idm-warn-fg);
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.85rem;
	margin-bottom: 14px;
}
.insaatim-demir-detay-yukleniyor {
	color: var(--idm-muted);
	font-style: italic;
	padding: 10px 0;
}

@media (max-width: 700px) {
	.insaatim-demir-wrap { padding: 14px; }
}

/* --- Yazdırma: ayrı, boş bir pencerede yapılıyor (printInNewWindow).
   Sadece başlık + sonuç grid'i + toplamlar görünsün: giriş formu,
   aksiyon butonları ve satır ikonları .idm-no-print ile gizleniyor.
   Her hücre grid'de AÇIKÇA konumlandığı için ikon sütunları gizlenince
   hiçbir hücre kaymaz. --- */
@media print {
	.insaatim-demir-wrap {
		border: none;
		margin: 0;
		padding: 6px 0;
		max-width: 100% !important;
	}
	.idm-no-print { display: none !important; }
}