/*
  Ghost Stash UI Styles
  - Minimal ve kompakt tasarım
  - Siyah/Beyaz/Gri ağırlıklı tema
*/

/* Reset & Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: transparent; color: #eaeaea; }
.hidden { display: none !important; }

/* Ana Panel: daha minimal, sabit genişlik, ortalanmış */
#container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 720px; max-width: calc(100% - 24px); background: #0f0f10; border: 1px solid #242424; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); display: flex; flex-direction: column; }

/* Üst Bar */
.topbar { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #232323; }
.title { font-weight: 600; letter-spacing: .3px; font-size: 14px; color: #fafafa; }
.icon-btn { margin-left: auto; background: #171717; color: #d9d9d9; border: 1px solid #282828; padding: 4px 8px; border-radius: 6px; cursor: pointer; line-height: 1; }
.icon-btn:hover { background: #212121; }

/* Sekmeler ve Aksiyonlar */
.tabs { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #232323; }
.tab { background: #151515; color: #d5d5d5; border: 1px solid #262626; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.tab.active, .tab:hover { background: #1f1f1f; }
.spacer { flex: 1; }
.count { background: #171717; color: #cfcfcf; border: 1px solid #2a2a2a; padding: 6px 10px; border-radius: 6px; font-size: 12px; margin-right: 8px; }
.primary { background: #e9e9e9; color: #111; border: 1px solid #2e2e2e; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; }
.primary:hover { background: #fff; }
.secondary { background: #171717; color: #d9d9d9; border: 1px solid #282828; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.secondary:hover { background: #212121; }

/* Arama Çubuğu */
.search-bar { padding: 8px 10px; border-bottom: 1px solid #232323; }
.search-bar input { width: 100%; background: #0c0c0c; color: #ededed; border: 1px solid #232323; border-radius: 6px; padding: 7px 9px; font-size: 12px; }
.search-bar input:focus { outline: none; border-color: #3a3a3a; }

/* Liste / Kartlar: kompakt grid */
.list { padding: 10px; max-height: 55vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.card { background: #131313; border: 1px solid #222; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.card h4 { margin: 0; font-size: 14px; color: #f3f3f3; font-weight: 600; }
.card .meta { font-size: 11px; color: #a8a8a8; }
.card .row { display: flex; gap: 6px; align-items: center; }
.card .row .tag { background: #1a1a1a; border: 1px solid #2a2a2a; color: #bbbbbb; padding: 2px 6px; border-radius: 4px; font-size: 10px; }
.card .actions { margin-top: 6px; display: flex; gap: 6px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid #282828; background: #171717; color: #d9d9d9; cursor: pointer; }
.btn-icon:hover { background: #202020; }
.btn-icon.primary { background: #e9e9e9; color: #111; border-color: #2e2e2e; }
.btn-icon.primary:hover { background: #ffffff; }
.btn-icon.danger { background: #211616; color: #ffb3b3; border-color: #3a1e1e; }
.btn-icon.danger:hover { background: #2a1a1a; }
.btn-icon .ico { font-size: 14px; line-height: 1; }
.btn-icon svg { width: 16px; height: 16px; display: block; }
.btn-icon svg { fill: #d9d9d9; }
.btn-icon.primary svg { fill: #111; }
.btn-icon.danger svg { fill: #ffb3b3; }

/* image icons */
.btn-icon .ico-img { width: 16px; height: 16px; display: block; object-fit: contain; }

/* Modal: daha küçük ölçüler, net hiyerarşi */
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); }
.modal-card { width: 460px; max-width: calc(100% - 24px); background: #101010; border: 1px solid #242424; border-radius: 8px; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #232323; }
.modal-header h3 { margin: 0; color: #ededed; font-size: 15px; }
.modal-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.modal-footer { padding: 10px; display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid #232323; }

/* Form Elemanları */
label { display: flex; flex-direction: column; gap: 4px; color: #d9d9d9; font-size: 12px; }
input, select { background: #0c0c0c; color: #ededed; border: 1px solid #232323; border-radius: 6px; padding: 7px 9px; font-size: 12px; }

/* Grid yardımcıları */
.row { display: flex; gap: 8px; align-items: end; }
.w-50 { width: 50%; }

/* TextUI: alt ortada, minimal */
.textui { position: fixed; left: 50%; bottom: 7%; transform: translateX(-50%); background: #0f0f10; border: 1px solid #242424; color: #ededed; padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); font-size: 12px; display: flex; align-items: center; gap: 8px; z-index: 9999; pointer-events: none; }
.textui::before { content: 'E'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 4px; font-weight: 700; font-size: 11px; color: #dcdcdc; }