/* Plik: assets/css/style.css */
body { font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background-color: #f3f4f6; color: #374151; margin: 0; line-height: 1.6; }
.app-page { padding: 2rem 0 3rem; }
.container { width: 90%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
a { color: #2563eb; text-decoration: none; } a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.admin-header, .main-header-public { background-color: white; padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 1.5rem; }
.admin-header .container, .main-header-public .container, .admin-header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.site-title-header-public, .admin-title a { font-size: 1.5rem; font-weight: 700; color: #2563eb; }
.admin-title a:hover { text-decoration: none; }
.admin-user-info { margin-right: 1rem; color: #4b5563; }
.btn { display: inline-block; padding: 0.65rem 1.25rem; border-radius: 0.375rem; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.2s; border: 1px solid transparent; }
.btn-primary { background-color: #2563eb; color: white; } .btn-primary:hover { background-color: #1d4ed8; }
.btn-secondary { background-color: #6b7280; color: white; } .btn-secondary:hover { background-color: #4b5563; }
.btn-danger { background-color: #ef4444; color: white; } .btn-danger:hover { background-color: #dc2626; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; }
.nav-tabs-container { margin-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb; }
.nav-tabs { display: flex; justify-content: center; gap: 0.5rem; }
.nav-tab-custom { padding: 0.75rem 1rem; border-bottom: 3px solid transparent; cursor: pointer; color: #4b5563; font-weight: 500; margin-bottom: -1px; }
.nav-tab-custom.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.section-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; color: #1f2937; }
.subsection-title { font-size: 1.125rem; font-weight: 500; margin-bottom: 0.75rem; }
.subsection-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.section-header-inline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.card-like { background-color: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.list-container { max-height: 15rem; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 0.375rem; }
.list-container-files { border: 1px solid #e5e7eb; border-radius: 0.375rem; padding: 0.5rem; min-height: 200px; }
.text-highlight { color: #2563eb; font-weight: 500; }
.error-message { color: #ef4444; text-align: center; padding: 1rem; }
.loading-message { text-align: center; padding: 1rem; color: #6b7280; }
.empty-table-message, .empty-list-message { text-align: center; color: #6b7280; padding: 1rem; font-style: italic; }
.post-grid, .admin-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.post-card-item, .admin-post-card-item { background-color: white; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s; }
.post-card-item:hover { transform: translateY(-5px); }
.post-image-link { display: block; width: 100%; height: 200px; overflow: hidden; }
.post-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.post-card-item:hover .post-image { transform: scale(1.05); }
.post-card-content, .admin-post-card-content { padding: 1rem 1.1rem 1.1rem; flex-grow: 1; display: flex; flex-direction: column; }
.post-card-title, .admin-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.35rem; line-height: 1.3; }
.post-meta, .admin-post-meta { font-size: 0.875rem; color: #6b7280; margin: 0 0 0.4rem; line-height: 1.35; }
.post-excerpt, .admin-post-excerpt { color: #4b5563; margin: 0 0 0.75rem; flex-grow: 1; line-height: 1.5; }
.post-read-more { margin-top: auto; } .post-read-more a { font-weight: 600; }
.admin-post-actions { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 0.5rem; }
.scroll-top-btn { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 44px; height: 44px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, background-color 0.2s; z-index: 60; }
.scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top-btn:hover { background: #1d4ed8; }
.status-public { color: #16a34a; font-weight: 500; } .status-hidden { color: #dc2626; font-weight: 500; }
.footer-public, .admin-footer { background-color: #1f2937; color: white; text-align: center; padding: 1.5rem 0; margin-top: 2.5rem; }
.version-link { color: #c7d2fe; font-weight: 600; }
.version-link:hover { color: #ffffff; }
.modal-custom { position: fixed; inset: 0; background-color: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal-custom.visible { display: flex; }
.modal-content-custom { background-color: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); width: 100%; max-width: 42rem; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-content-custom.modal-sm { max-width: 32rem; }
.modal-title-custom { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #2563eb; }
.modal-close-icon { border: 0; background: transparent; color: #475569; font-size: 28px; cursor: pointer; padding: 0; line-height: 1; }
.form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 1rem; box-sizing: border-box; }
.form-input:focus { border-color: #2563eb; outline: 2px solid transparent; }
.form-textarea { min-height: 120px; }
.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; color: #374151; font-weight: 500; }
.checkbox-label input { width: 1rem; height: 1rem; }
.small-text-info { margin: 0.35rem 0 0; color: #6b7280; font-size: 0.82rem; }
.image-preview { margin-top:0.5rem; max-height:10rem; border-radius:0.25rem; display:none; border: 1px solid #e5e7eb;}
.modal-actions { display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1.5rem; }
.files-grid-container { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .files-grid-container { grid-template-columns: repeat(3, 1fr); } }
.files-col-span-1 { grid-column: span 1; } .files-col-span-2 { grid-column: span 1; }
@media (min-width: 768px) { .files-col-span-2 { grid-column: span 2; } }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; text-align: left; }
.table th { background-color: #f9fafb; color: #374151; font-weight: 600; }
.server-file-list { list-style: none; padding: 0; margin: 0; }
.server-file-item { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f3f4f6; }
.server-file-item:last-child { border-bottom: none; }
.server-file-item a { display: block; color: #374151; text-decoration: none; }
.server-file-item a:hover { background-color: #f9fafb; }
.server-file-item.item-type-dir a { font-weight: 500; }
.server-file-item.image-file a::after { content: " (obraz)"; font-style: italic; color: #9ca3af; margin-left: 0.5em;}
.image-gallery-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); justify-content: center; align-items: center; }
.gallery-image { display: block; max-width: 80vw; max-height: 80vh; margin: auto; border: 3px solid white; box-shadow: 0 0 25px rgba(0,0,0,0.5); cursor: pointer; }
.gallery-close-btn { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 1001; }
.gallery-close-btn:hover { color: #bbb; }
.gallery-nav-btn { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 28px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0,0,0,0.3); border: none; z-index: 1001; }
.gallery-nav-btn:hover { background-color: rgba(0,0,0,0.6); }
.gallery-prev-btn { left: 10px; border-radius: 3px 0 0 3px; }
.gallery-next-btn { right: 10px; border-radius: 0 3px 3px 0; }
.gallery-filename { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #f1f1f1; background-color: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 3px; font-size: 0.9em; }
.post-view-container { max-width: 800px; margin: 2rem auto; padding: 2rem; background-color: white; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.post-view-title { font-size: 2.25rem; font-weight: bold; color: #2563eb; margin-bottom: 1rem; }
.post-view-meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; }
.post-view-image { width: 100%; max-height: 450px; object-fit: cover; border-radius: 0.375rem; margin-bottom: 1.5rem; }
.post-view-content { line-height: 1.75; font-size: 1.125rem; white-space: pre-wrap; }
.post-view-back-link { display: inline-block; margin-top: 2rem; color: #2563eb; text-decoration: none; }
.post-view-back-link:hover { text-decoration: underline; }
.changelog-page { display: grid; gap: 1.5rem; }
.changelog-hero h1 { margin: 0 0 0.5rem; font-size: 2.5rem; color: #0f172a; }
.version-kicker { margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: #2563eb; font-weight: 700; }
.changelog-lead { max-width: 60ch; color: #475569; }
.changelog-section { margin-bottom: 0; }
.notice-box { margin-bottom: 1rem; padding: 0.9rem 1rem; border-radius: 0.75rem; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.todo-list { display: grid; gap: 1rem; }
.todo-item { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem 1.1rem; background: #fcfcfd; }
.todo-item h3 { margin: 0; font-size: 1.05rem; color: #111827; }
.todo-item p { margin: 0.65rem 0 0; color: #4b5563; }
.todo-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.todo-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 98px; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.todo-badge.status-done { background: #dcfce7; color: #166534; }
.todo-badge.status-in_progress { background: #dbeafe; color: #1d4ed8; }
.todo-badge.status-planned { background: #ede9fe; color: #6d28d9; }
.todo-badge.status-active { background: #fef3c7; color: #92400e; }
.pinned-badge { min-width: auto; margin-left: 0.45rem; padding: 0.2rem 0.55rem; background: #fef3c7; color: #92400e; vertical-align: middle; }
.muted-text { color: #9ca3af; font-style: italic; }
.roadmap-groups { display: grid; gap: 1rem; }
.roadmap-group { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; overflow: hidden; }
.roadmap-group summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1.1rem; cursor: pointer; font-weight: 700; color: #111827; background: #f9fafb; }
.roadmap-group .todo-list { padding: 1rem; }
.roadmap-title-wrap { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.roadmap-number { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 0.82rem; font-weight: 700; flex: 0 0 auto; }
.roadmap-badges { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.priority-badge { min-width: 116px; background: #f1f5f9; color: #334155; }
.roadmap-actions { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #e5e7eb; }
.roadmap-actions form { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; flex-wrap: wrap; }
.form-select-sm { width: auto; min-width: 128px; padding: 0.35rem 0.55rem; font-size: 0.875rem; }
.suggestions-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.suggestions-toolbar { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.suggestions-count { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-weight: 700; }
.suggestion-item { background: #fff; }
.suggestion-meta { font-size: 0.84rem; color: #64748b; }
.suggestion-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.suggestion-actions form { margin: 0; }
.release-history { display: grid; gap: 1rem; }
.release-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem 1.1rem; background: #fcfcfd; }
.release-date { color: #64748b; font-size: 0.9rem; font-weight: 600; }
.release-summary { margin: 0.65rem 0 0.9rem; color: #4b5563; }
.release-group + .release-group { margin-top: 0.9rem; }
.release-group h4 { margin: 0 0 0.45rem; font-size: 0.95rem; color: #0f172a; }
.versioning-list { margin: 0; padding-left: 1.2rem; color: #374151; }
.versioning-list li + li { margin-top: 0.65rem; }