/* ─── Faz 5: Belgeler ───────────────────────────────────────── */

.docs { padding: 16px 20px; max-width: 1600px; margin: 0 auto; }
.docs-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.docs-head h1 { margin: 0; font-size: 22px; font-weight: 700; }
.docs-head-actions { display: flex; gap: 12px; align-items: center; }

.view-toggle {
  display: inline-flex; border: 1px solid #d9dee5; border-radius: 6px; overflow: hidden;
  font-size: 13px; background: #fff;
}
.view-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.view-toggle label {
  padding: 6px 12px; cursor: pointer; color: #4a5363; user-select: none; line-height: 1.4;
}
.view-toggle label + input + label { border-left: 1px solid #d9dee5; }
.view-toggle input:checked + label {
  background: var(--color-primary); color: #fff;
}

.docs-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 18px;
}
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } }

/* Sidebar (kategoriler) */
.docs-side {
  background: #fff; border: 1px solid #e1e6ed; border-radius: 8px;
  padding: 10px; align-self: start; position: sticky; top: 90px;
}
.docs-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px; border-bottom: 1px solid #eef1f5; margin-bottom: 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-icon {
  width: 24px; height: 24px; border-radius: 4px;
  border: 1px solid #d9dee5; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: #4a5363;
}
.btn-icon:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
.docs-cats { list-style: none; margin: 0; padding: 0; }
.docs-cats li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13.5px; color: #2a3140; user-select: none;
}
.docs-cats li:hover { background: #f1f5fa; }
.docs-cats li.active {
  background: var(--color-primary-light); color: var(--color-primary); font-weight: 600;
}
.docs-cats li .cat-count {
  background: #eef1f5; color: #4a5363; padding: 1px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.docs-cats li.active .cat-count { background: var(--color-primary); color: #fff; }
.docs-cats li .cat-del {
  opacity: 0; transition: opacity 0.15s;
  color: #9aa3b1; cursor: pointer; font-size: 14px;
}
.docs-cats li:hover .cat-del { opacity: 1; }
.docs-cats li .cat-del:hover { color: var(--color-danger); }

/* Main */
.docs-main { min-width: 0; }

.docs-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid #e1e6ed; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px;
}
.search-wrap { flex: 1 1 280px; min-width: 220px; position: relative; }
.search-wrap input {
  width: 100%; border: 1px solid #d9dee5; border-radius: 6px;
  padding: 8px 12px 8px 32px; font-size: 13.5px; background: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; background-size: 14px;
}
.search-wrap input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14,76,129,0.15); }
.search-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: #7a8294;
}

.kind-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.kind-filters .chip {
  border: 1px solid #d9dee5; background: #fff; border-radius: 999px;
  padding: 5px 11px; font-size: 12.5px; cursor: pointer; color: #4a5363;
}
.kind-filters .chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.kind-filters .chip.active {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

.sort-wrap { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.sort-wrap select {
  border: 1px solid #d9dee5; border-radius: 6px; padding: 6px 8px; background: #fff;
  font-size: 13px;
}

/* Grid */
.docs-content { min-height: 200px; }
.docs-content.view-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.docs-content.view-list { display: flex; flex-direction: column; gap: 6px; }

.doc-card {
  background: #fff; border: 1px solid #e1e6ed; border-radius: 8px;
  overflow: hidden; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  display: flex; flex-direction: column;
}
.doc-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(14,76,129,0.10); transform: translateY(-1px); }
.doc-thumb {
  height: 110px; background: linear-gradient(135deg, #f5f8fc, #e9eff7);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.doc-thumb .ext {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 10px; background: rgba(255,255,255,0.85); border-radius: 4px;
  color: var(--color-primary);
}
.doc-thumb.img-thumb { background: #000; }
.doc-thumb.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-thumb .kind-badge {
  position: absolute; top: 6px; left: 6px; background: var(--color-primary);
  color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 3px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.doc-info {
  padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.doc-title {
  font-size: 13.5px; font-weight: 600; color: #1d2330;
  line-height: 1.3; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.doc-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #7a8294;
}
.doc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.doc-tag {
  background: #eef1f5; color: #4a5363; font-size: 10.5px;
  padding: 1px 6px; border-radius: 3px;
}

/* List variant */
.docs-content.view-list .doc-card { flex-direction: row; align-items: center; }
.docs-content.view-list .doc-thumb {
  height: 44px; width: 56px; flex: 0 0 56px; border-right: 1px solid #eef1f5;
}
.docs-content.view-list .doc-info { padding: 6px 12px; flex-direction: row; gap: 12px; align-items: center; }
.docs-content.view-list .doc-title { flex: 1; -webkit-line-clamp: 1; }
.docs-content.view-list .doc-meta { flex: 0 0 auto; min-width: 180px; justify-content: flex-end; gap: 12px; }

.docs-empty {
  text-align: center; color: #7a8294; padding: 40px 20px;
  background: #fff; border: 1px dashed #d9dee5; border-radius: 8px;
}

/* Preview modal */
.preview-overlay {
  position: fixed; inset: 0; background: rgba(11,16,27,0.85); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.preview-overlay.visible { opacity: 1; pointer-events: auto; }
.preview-modal {
  background: #fff; border-radius: 10px; overflow: hidden;
  width: min(1100px, 96vw); height: min(820px, 92vh);
  display: flex; flex-direction: column;
}
.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #e1e6ed; gap: 12px;
}
.preview-title { font-size: 14.5px; font-weight: 600; color: #1d2330; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-meta { font-size: 12px; color: #7a8294; flex-shrink: 0; }
.preview-actions { display: flex; gap: 8px; }
.preview-actions .btn-secondary, .preview-actions .btn-primary, .preview-actions .btn-danger {
  padding: 6px 12px; font-size: 13px;
}
.preview-body {
  flex: 1; background: #f5f7fa; overflow: auto; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.preview-body iframe, .preview-body embed { width: 100%; height: 100%; border: 0; background: #fff; }
.preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-body .preview-fallback {
  text-align: center; padding: 40px;
}
.preview-body .preview-fallback .ext-big {
  font-size: 32px; font-weight: 700; color: var(--color-primary);
  margin-bottom: 12px;
}
.preview-body .preview-rendered {
  background: #fff; padding: 24px; width: 100%; height: 100%;
  overflow: auto; box-sizing: border-box; font-size: 14px; line-height: 1.5;
}
.preview-body .preview-rendered table {
  border-collapse: collapse; margin: 8px 0; font-size: 12.5px;
}
.preview-body .preview-rendered table td, .preview-body .preview-rendered table th {
  border: 1px solid #d9dee5; padding: 4px 8px;
}
.preview-body .preview-rendered table th { background: #eef1f5; }
.preview-body .preview-rendered pre {
  background: #f5f7fa; padding: 12px; border-radius: 4px; overflow: auto;
}
.preview-loading {
  color: #7a8294; font-size: 13px;
}

/* Upload modal */
.upload-form { display: flex; flex-direction: column; gap: 10px; min-width: 380px; }
.upload-form .form-field { display: flex; flex-direction: column; gap: 4px; }
.upload-form label { font-size: 12.5px; color: #4a5363; font-weight: 500; }
.upload-form input[type="text"], .upload-form input[type="file"], .upload-form select, .upload-form textarea {
  border: 1px solid #d9dee5; border-radius: 6px; padding: 7px 10px; font-size: 13.5px;
  font-family: inherit;
}
.upload-form textarea { resize: vertical; min-height: 60px; }
.upload-form .file-drop {
  border: 2px dashed #d9dee5; border-radius: 8px; padding: 18px;
  text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.upload-form .file-drop:hover, .upload-form .file-drop.dragover {
  background: var(--color-primary-light); border-color: var(--color-primary);
}
.upload-form .file-drop input { display: none; }
.upload-form .file-drop .drop-hint { color: #7a8294; font-size: 13px; }
.upload-form .file-chosen { color: var(--color-primary); font-weight: 600; font-size: 13px; }
.upload-progress {
  height: 6px; background: #eef1f5; border-radius: 3px; overflow: hidden; margin-top: 8px;
}
.upload-progress > div {
  height: 100%; background: var(--color-primary); width: 0%;
  transition: width 0.15s;
}

/* Category manager */
.cat-manager { min-width: 480px; }
.cat-table { width: 100%; border-collapse: collapse; }
.cat-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; color: #7a8294; padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.cat-table td { padding: 6px 8px; border-bottom: 1px solid #f3f5f8; vertical-align: middle; }
.cat-table input[type="text"], .cat-table input[type="number"] {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: 5px 6px; font: inherit; border-radius: 4px;
}
.cat-table input[type="text"]:hover, .cat-table input[type="number"]:hover {
  border-color: #d9dee5; background: #fff;
}
.cat-table input[type="text"]:focus, .cat-table input[type="number"]:focus {
  outline: none; border-color: var(--color-primary); background: #fff;
  box-shadow: 0 0 0 2px rgba(14,76,129,0.15);
}
.cat-table .ce-count { color: #7a8294; font-size: 12.5px; }
.cat-table .ce-del { padding: 4px 10px; font-size: 12.5px; }
.cat-table .ce-del:disabled { opacity: 0.4; cursor: not-allowed; }
.cat-add-row {
  display: flex; gap: 8px; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed #d9dee5;
}
.cat-add-row input {
  border: 1px solid #d9dee5; border-radius: 6px; padding: 6px 10px; font: inherit;
}
.cat-add-row input[type="text"] { flex: 1; }
.cat-add-row button { padding: 6px 14px; }