/* ---
    AGRIFORUM - Custom CSS Stylesheet
    Generated based on the original React/TailwindCSS project.
--- */

/* 1. Google Fonts Import & Root Variables
-------------------------------------------------- */

:root {
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(240, 10%, 3.9%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(240, 10%, 3.9%);
    --primary-foreground: hsl(36, 100%, 98%);
    --primary: hsl(365, 61%, 56%);
    --secondary: hsl(240, 4.8%, 95.9%);
    --secondary-foreground: hsl(240, 5.9%, 10%);
    --muted: hsl(240, 4.8%, 95.9%);
    --muted-foreground: hsl(240, 3.8%, 46.1%);
    --accent: hsl(240, 4.8%, 95.9%);
    --accent-foreground: hsl(240, 5.9%, 10%);
    --destructive: hsl(0, 84.2%, 60.2%);
    --border: hsl(240, 5.9%, 90%);
    --input: hsl(240, 5.9%, 90%);
    --ring: hsl(88, 51%, 34%);
    --radius: 0.5rem;
}

/* Nadpisanie Bootstrapowych kolorów */
.text-primary, .nav-link {
    color: var( --primary ) !important;
}

.text-purple {
    color: #6f42c1 !important;
}

/* 2. Base & Typography
-------------------------------------------------- */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.flex-grow-1 {
    flex: 1;
}

.font-headline {
    font-family: 'Poppins', sans-serif;
}

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.prose {
    color: var(--foreground);
    line-height: 1.75;
}
.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

p {
    color: var( --muted-foreground );
}

h1 {
    font-weight: 500;
    letter-spacing: -0.03em;
}

/* 3. Layout & Components
-------------------------------------------------- */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}


/* Card */
.card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card-header { padding: 1.5em; background: transparent; border: 0;}
.card-body { padding: 0 1.5em 1.5em 1.5em; }
.card-footer { padding: 0 1.5em 1.5em 1.5em; border: 0; background: transparent;}
.card-title { font-size: 1.25em; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.card-description { color: var(--muted-foreground); font-size: 0.875rem; }

.product-card {overflow: hidden;}
.product-card img {margin-bottom: 1.5em;}

aside ul li a.btn-ghost:hover {text-decoration: none;}

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn:hover {
    text-decoration: none;;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { border-color: var( --primary ) !important; background-color: var( --primary ) !important; opacity: 0.9 !important; }
.btn-ghost { background-color: transparent; color: var(--foreground); }
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active { background-color: var(--accent); color: var(--accent-foreground); }
.btn-outline {
    border-color: var(--input);
    background-color: var(--background);
    color: var(--foreground);
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active { background-color: var(--accent); }
.btn-outline-primary {color: var( --primary ); border-color: var( --primary );}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {background-color: var( --primary ) !important; color: var( --background ) !important; border-color: var( --primary ) !important;}
.btn:active {border-color: transparent;}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border);
}
.badge-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border-color: transparent;
}
.badge-outline {
    background-color: transparent;
    color: var(--foreground);
}

.badge.bg-primary-subtle {
    background-color: var( --secondary ) !important;
    color: var( --primary ) !important;
    border-color: var( --primary ) !important;
}

/* Forms */
.form-label { font-weight: 500; font-size: 0.875rem; }
.form-control, .form-select {
    display: block;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--input);
    border-radius: 0.375rem;
    background-color: var(--background);
}
textarea.form-control { height: auto; }
.form-control:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px rgba(107, 142, 35, 0.2);
}

/* 4. Specific Component Styles
-------------------------------------------------- */

/* Header */
header {
    padding: 0.75em;
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}
header .avatar {
    width: 32px;
    height: 32px;
}

header a:hover {
    text-decoration: none;;
}

.dropdown-menu {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-color: var(--border);
}

/* Thread Card */
.thread-card {
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.thread-card:hover {
    border-color: var( --primary );
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
}
.thread-card .card-title {
    font-size: 1.0.5em;
    transition: color 0.2s;
}
.thread-card .card-title:hover {
    color: var(--primary);
}

#threadTabs {
    background: var( --secondary );
    padding: 0.3em;
    border-radius: var( --radius );
}

#threadTabs li button.nav-link {
    font-size: 0.85em;
    color: hsla( var( --foreground ), 0.8 ) !important;
}

#threadTabs li button.active {
    background: var( --background );
    border-radius: var( --radius );
    color: var( --foreground ) !important;
}

.user-info {margin-bottom: 1.5em;}
.user-info a {color: var( --foreground );}
.user-info a {font-size: 0.85em;}
.user-info p {font-size: 0.75em;}

/* Reply Card */
.reply-card {
    padding-left: 1rem;
}
.reply-card.nested {
    margin-left: 3rem;
    border-left: 1px solid var(--border);
}

#main-reply-card .card-body {
    padding-top: 1.5em;
}

/* Like Button */
.like-button {
    transition: all 0.2s ease-in-out;
    gap: 0;
}

.like-button svg {
 margin-right: 0.5em;
}

.like-button.liked {
    color: var(--primary) !important;
    border-color: var(--primary);
    font-weight: bold;
}

.like-button.liked svg {
    color: var(--primary) !important;
    stroke-width: 2px;;
}

/* Utility Classes */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.p-4 { padding: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.rounded-circle { border-radius: 50%; }
.rounded-md { border-radius: var(--radius); }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.flex-grow-1 { flex-grow: 1; }
.text-decoration-none { text-decoration: none; }
.fw-semibold { font-weight: 600; }
.fs-1 { font-size: 2.5rem; }
.fs-2 { font-size: 2rem; }
.fs-3 { font-size: 1.75rem; }
.fs-4 { font-size: 1.5rem; }

/* Style dla interaktywnego pola tagów */
.tag-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    padding: 0.2rem 0.65rem;
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 500;
}

.tag-remove-btn {
    margin-left: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: var(--muted-foreground);
    border: none;
    background: none;
    padding: 0;
}
.tag-remove-btn:hover {
    color: var(--destructive);
}

#tag-suggestions {
    min-width: 250px;
}

#tag-suggestions .list-group-item.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* Style dla interaktywnego awatara */
#avatar-container {
    cursor: pointer;
}
.avatar-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
#avatar-container {
    width: 96px;
    height: 96px;
}

#avatar-container:hover .avatar-overlay {
    opacity: 1;
}

/* 4. KLUCZOWA POPRAWKA: Uniwersalne style dla przewijania */
.horizontal-scroll-container {
    display: flex; /* Ustawia elementy w rzędzie */
    overflow-x: auto; /* Włącza przewijanie w poziomie */
    -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */
    padding-bottom: 1rem; /* Zapewnia miejsce na cienie i uniknięcie obcinania */
    margin-bottom: -1rem; /* Kompensuje padding */
    gap: 0.75rem; /* Odstęp między elementami */
}
/* Ukrycie paska przewijania dla czystego wyglądu */
.horizontal-scroll-container::-webkit-scrollbar { display: none; }
.horizontal-scroll-container {
    cursor: grab; /* Kursor "łapki" */
    user-select: none; /* Zapobiegaj zaznaczaniu tekstu podczas przeciągania */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.horizontal-scroll-container.active-scroll {
    cursor: grabbing; /* Kursor zaciśniętej dłoni */
}

.horizontal-scroll-container > * {
    flex-shrink: 0; /* Zapobiega kurczeniu się elementów wewnątrz */
}


/* 5. Style dla kart artykułów w karuzeli */
.article-card {
    flex-basis: 40%;
    min-width: 180px;
}
@media (min-width: 768px) {
    .article-card { flex-basis: 38%; }
}
@media (min-width: 992px) {
    .article-card { flex-basis: 43%; }
}
.article-card .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 100%;
}
.article-card .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
}

.article-card .card-body {
    padding-top: 1.5em;
}

.horizontal-scroll-container a {
    -webkit-user-drag: none;
    user-select: none;
}

.horizontal-scroll-container a img {
    pointer-events: none;
}

/* 6. Style dla załączników i lightbox */
.attachment-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.attachment-image:hover .attachment-thumbnail {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.document-icon {
    width: 100px;
    height: 100px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.document-icon:hover {
    background-color: var(--accent) !important;
}

.document-icon span {
    font-size: 0.75em;
    word-break: break-word;
}

/* GLightbox dla obrazów z załączników */
.attachment-image {
    display: inline-block;
    text-decoration: none;
}

.attachment-image:hover {
    text-decoration: none;
}

/* Style dla załączników odpowiedzi 75x75px */
.reply-attachment-thumbnail {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.reply-attachment-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reply-document-icon {
    width: 75px;
    height: 75px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.reply-document-icon:hover {
    background-color: var(--accent) !important;
}

.reply-document-icon span {
    font-size: 0.6em;
    word-break: break-word;
    text-align: center;
    padding: 0 2px;
}

/* Admin */
.admin .card .card-body {padding-top: 1.5em;}

/* Inne */
#logo img, #logo svg {max-height: 40px; width: auto;}
#logo-footer img, #logo-footer svg {max-height: 25px; width: auto;}

ul.list {padding-left: 1em;}
ul.list li a {color: var(--bs-secondary-color);}
ul.list li::marker {color: var( --primary );}

.report-button svg {height: 12px;}

/* Ukrywanie kontrolek zdjęć z panelu admina na froncie */
.image-controls {
    display: none !important;
}

/* Zapewnienie responsywności zdjęć w artykułach na froncie */
.prose img,
.image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

/* Admin quick delete buttons */
.thread-footer-container:hover .admin-delete-thread-btn,
.reply-container:hover .admin-delete-reply-btn {
    opacity: 1 !important;
}

.admin-delete-thread-btn,
.admin-delete-reply-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background-color: #dc3545;
    color: white;
    transition: all 0.2s ease;
}

.admin-delete-thread-btn:hover,
.admin-delete-reply-btn:hover {
    background-color: #c82333;
    transform: scale(1.05);
}

.admin-delete-thread-btn svg,
.admin-delete-reply-btn svg {
    fill: currentColor;
}