/* ============================================================
   KurguSaltema - Public stylesheet (Bootstrap 5 theme)
   Loaded AFTER Bootstrap 5, overrides its design tokens and
   adds bespoke components (novel cards, chapter lists, etc.).
   ============================================================ */

/* ---------- Brand design tokens ---------- */
:root {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-bg-subtle: #eef2ff;
    --bs-primary-text-emphasis: #4338ca;
    --bs-primary-border-subtle: #c7d2fe;

    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;

    --bs-success: #16a34a;
    --bs-success-rgb: 22, 163, 74;
    --bs-success-bg-subtle: #dcfce7;
    --bs-success-text-emphasis: #15803d;
    --bs-success-border-subtle: #bbf7d0;

    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-text-emphasis: #b91c1c;
    --bs-danger-border-subtle: #fecaca;

    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-warning-text-emphasis: #a16207;
    --bs-warning-border-subtle: #fde68a;

    --bs-info: #0284c7;
    --bs-info-rgb: 2, 132, 199;
    --bs-info-bg-subtle: #e0f2fe;
    --bs-info-text-emphasis: #0369a1;
    --bs-info-border-subtle: #bae6fd;

    --bs-light: #f1f5f9;
    --bs-light-rgb: 241, 245, 249;
    --bs-dark: #0f172a;
    --bs-dark-rgb: 15, 23, 42;

    --bs-body-bg: #f8fafc;
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-tertiary-bg: #f1f5f9;
    --bs-body-color: #1f2937;
    --bs-body-color-rgb: 31, 41, 55;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(15, 23, 42, 0.12);

    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;

    --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-border-radius-lg: 0.75rem;
}

/* ---------- Dark theme (Gece) tokens ---------- */
[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;
    --bs-body-bg-rgb: 15, 23, 42;
    --bs-tertiary-bg: #1e293b;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(148, 163, 184, 0.15);

    --bs-light: #263449;
    --bs-light-rgb: 38, 52, 73;

    --bs-primary-bg-subtle: #1e1b4b;
    --bs-primary-text-emphasis: #a5b4fc;
    --bs-primary-border-subtle: #312e81;

    --bs-success-bg-subtle: #052e16;
    --bs-success-text-emphasis: #86efac;
    --bs-success-border-subtle: #14532d;

    --bs-danger-bg-subtle: #450a0a;
    --bs-danger-text-emphasis: #fca5a5;
    --bs-danger-border-subtle: #7f1d1d;

    --bs-warning-bg-subtle: #451a03;
    --bs-warning-text-emphasis: #fcd34d;
    --bs-warning-border-subtle: #78350f;

    --bs-info-bg-subtle: #082f49;
    --bs-info-text-emphasis: #7dd3fc;
    --bs-info-border-subtle: #0c4a6e;

    --bs-link-color: #a5b4fc;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #c7d2fe;
}

/* ---------- Base ---------- */
body {
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: #1e293b; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ============================================================
   SLIM UTILITY LAYER
   Small helpers Bootstrap doesn't ship (font sizes, fixed
   widths/heights, line clamping). Everything else uses native
   Bootstrap utilities.
   ============================================================ */

/* ---------- Font sizes ---------- */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

/* ---------- Fixed sizes ---------- */
.w-4 { width: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.w-8 { width: 2rem !important; }
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.w-16 { width: 4rem !important; }
.w-20 { width: 5rem !important; }
.w-24 { width: 6rem !important; }
.w-32 { width: 8rem !important; }
.w-48 { width: 12rem !important; }
.w-56 { width: 14rem !important; }
.w-64 { width: 16rem !important; }
.w-80 { width: 20rem !important; }
.w-96 { width: 24rem !important; }
.h-4 { height: 1rem !important; }
.h-5 { height: 1.25rem !important; }
.h-8 { height: 2rem !important; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem !important; }
.h-16 { height: 4rem !important; }
.h-20 { height: 5rem !important; }
.h-24 { height: 6rem !important; }
.h-32 { height: 8rem !important; }
.h-48 { height: 12rem !important; }
.min-w-0 { min-width: 0 !important; }
.min-w-\[150px\] { min-width: 150px !important; }
.min-w-\[200px\] { min-width: 200px !important; }
.max-h-96 { max-height: 24rem !important; }
.aspect-\[2\/3\] { aspect-ratio: 2 / 3 !important; }

/* ---------- Text helpers ---------- */
a {
    text-decoration: none !important;
}
.truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.whitespace-pre-wrap { white-space: pre-wrap !important; }
.whitespace-nowrap { white-space: nowrap !important; }

/* ---------- Legacy compat ---------- */
/* `hidden` is toggled by existing inline JS (e.g. deposit page IBAN box); Bootstrap 5 has no such utility. */
.hidden { display: none !important; }

/* ---------- Filter bar (public + admin) ---------- */
.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}
.filter-bar .filter-group { min-width: 0; }

/* ---------- Pagination (button-style pager) ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ---------- Brand gradient ---------- */
.brand-gradient {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 38%, #9333ea 72%, #db2777 100%);
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Header / Navbar ---------- */
.site-header { background-color: var(--bs-body-bg); }

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--bs-dark);
    color: #cbd5e1;
}
.site-footer a { color: #94a3b8; }
.site-footer a:hover { color: #fff; }

/* ---------- Flash messages ---------- */
.flash-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(92vw, 28rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.flash-container .alert {
    animation: kslide-down 0.3s ease-out;
}
@keyframes kslide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Buttons ---------- */
.btn-icon { padding: 0.5rem 0.6rem; }
.btn-icon i { font-size: 1.25rem; }
.btn-soft-primary {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}
.btn-soft-primary:hover {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-soft-secondary {
    color: var(--bs-secondary);
    background-color: var(--bs-light);
    border-color: transparent;
}
.btn-soft-secondary:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: transparent;
}
.btn-soft-danger {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}
.btn-soft-danger:hover {
    color: #fff;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* Card hover lift */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-color: var(--bs-border-color);
}
.card-hover:hover {
    box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
    transform: translateY(-3px);
}

/* ---------- Rating stars ---------- */
.rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.rating-stars i { font-size: 0.95rem; color: #f59e0b; }
.rating-stars i.far { color: #d1d5db; }
.rating-value {
    margin-left: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

/* ---------- Novel card ---------- */
.novel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.novel-card:hover {
    box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
    transform: translateY(-3px);
}
.novel-card-image {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background-color: var(--bs-tertiary-bg);
}
.novel-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.novel-card-image .badge { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35); }
.novel-card:hover .novel-card-image img { transform: scale(1.05); }
.novel-card-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.novel-card-title {
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.novel-card:hover .novel-card-title { color: var(--bs-primary); }
.novel-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--bs-secondary);
}
.novel-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.novel-card-tag {
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-secondary);
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.375rem;
}

/* ---------- Chapter list ---------- */
.chapter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-tertiary-bg);
    background-color: var(--bs-card-bg);
    transition: background-color 0.15s ease;
}
.chapter-item:last-child { border-bottom: 0; }
.chapter-item:hover { background-color: var(--bs-tertiary-bg); }
.chapter-info { flex: 1; min-width: 0; }
.chapter-title {
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.chapter-item:hover .chapter-title { color: var(--bs-primary); }
.chapter-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-secondary);
}
.chapter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}
.chapter-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    border-radius: var(--bs-border-radius);
}

/* ---------- Volume (band) ---------- */
.volume-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.volume-content { margin-bottom: 1rem; }
.volume-content .chapter-item {
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-radius: 0;
}
.volume-content .chapter-item:first-child {
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}
.volume-content .chapter-item:last-child {
    border-bottom: 1px solid var(--bs-border-color);
    border-bottom-left-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
}

/* ---------- Payment method cards ---------- */
.payment-option { display: block; position: relative; }
.payment-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payment-option-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-card-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.payment-option:hover .payment-option-body { border-color: var(--bs-primary); }
.payment-option-input:checked + .payment-option-body {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}
.payment-option-check {
    color: var(--bs-primary);
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
}
.payment-option-input:checked + .payment-option-body .payment-option-check {
    opacity: 1;
    transform: scale(1);
}
.amount-preset { min-width: 4rem; }
.amount-preset.selected {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

/* ---------- Profile header ---------- */
.profile-cover {
    position: relative;
    height: 12rem;
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 38%, #9333ea 72%, #db2777 100%);
    overflow: hidden;
}
.profile-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}
.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.28) 100%);
}
.profile-avatar img {
    display: block;
    background-color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.2);
}

/* ---------- Novel detail ---------- */
.novel-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 34%, rgba(0, 0, 0, 0) 60%);
}
.novel-cover-title {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
}

/* ---------- Detail lists ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-item {
    padding: 1rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}
.detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary);
    margin-bottom: 0.25rem;
}
.detail-value { color: var(--bs-body-color); }
.detail-value p { margin-bottom: 0.5rem; }

/* ---------- Reading view ---------- */
.reading-content {
    font-size: 1.0625rem;
    line-height: 1.9;
    color: var(--bs-body-color);
}
.reading-content p { margin-bottom: 1.5rem; text-align: justify; }
.reading-content h1,
.reading-content h2,
.reading-content h3,
.reading-content h4 {
    color: var(--bs-body-color);
    font-weight: 700;
    margin: 2rem 0 1rem;
}
.reading-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius-lg);
    margin: 1.5rem auto;
    display: block;
}
.reading-content a { color: var(--bs-primary); text-decoration: underline; }
.reading-content blockquote {
    border-left: 4px solid var(--bs-border-color);
    padding-left: 1rem;
    color: var(--bs-secondary);
    margin: 1.5rem 0;
}
.reading-content pre {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    overflow-x: auto;
}
.reading-content code,
.prose code {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: #be185d;
    background-color: var(--bs-tertiary-bg);
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
}
.prose {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--bs-body-color);
}
.prose p { margin-bottom: 1rem; }
.prose img { max-width: 100%; border-radius: var(--bs-border-radius-lg); }

/* ---------- Image upload ---------- */
.image-upload-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border: 2px dashed #cbd5e1;
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease;
    overflow: hidden;
}
.image-upload-area:hover { border-color: var(--bs-primary); background-color: var(--bs-primary-bg-subtle); }
.image-upload-area.has-image { border-style: solid; border-color: var(--bs-border-color); }
.image-upload-area img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-upload-area .upload-placeholder { position: relative; z-index: 1; color: var(--bs-secondary); }
.image-upload-area.image-drag {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}
.upload-placeholder i {
    font-size: 2.5rem;
    color: #cbd5e1;
    margin-bottom: 0.75rem;
    display: block;
}

/* ---------- Rich editor wrapper ---------- */
.rich-editor { min-height: 320px; }
.editor-stats { margin-top: 0.5rem; font-size: 0.75rem; color: var(--bs-secondary); }

/* ---------- Notifications dropdown ---------- */
.notification-dropdown { width: 20rem; }
.notification-list { max-height: 24rem; overflow-y: auto; }
.notification-item {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-tertiary-bg);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.notification-item:hover { background-color: var(--bs-primary-bg-subtle); }

/* ---------- Empty state / stats ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state-icon { font-size: 3rem; color: #cbd5e1; margin-bottom: 1rem; }
.empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--bs-body-color); margin-bottom: 0.5rem; }
.empty-state-text { color: var(--bs-secondary); margin-bottom: 1.5rem; }

.stat-card { display: flex; flex-direction: column; }
.stat-card .stat-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--bs-border-radius-lg);
    font-size: 1.25rem;
}
.stat-card .stat-widget.widget-primary   { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.stat-card .stat-widget.widget-success   { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.stat-card .stat-widget.widget-warning   { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.stat-card .stat-widget.widget-danger    { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.stat-card .stat-widget.widget-info      { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.stat-card .stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-top: 1rem;
}
.stat-card .stat-label { font-size: 0.875rem; color: var(--bs-secondary); }

/* ---------- Purchase chapter ---------- */
.purchase-chapter {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
}
.purchase-chapter .price-tag {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary);
}

/* ---------- Follow author button ---------- */
.follow-author.following {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}