/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

.bd-example-modal-lg .modal-dialog {
    display: table;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 24px);
}

    .bd-example-modal-lg .modal-dialog .modal-content {
        background-color: transparent;
        border: none;
    }


.item {
    position: relative;
    padding-top: 20px;
    display: inline-block;
}

.notify-badge {
    position: absolute;
    right: -20px;
    top: 10px;
    background: red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color: white;
    padding: 5px 10px;
    font-size: 20px;
}

/* Folder tile (replaces using a child's thumbnail as folder cover). */
.folder-tile {
    aspect-ratio: 170 / 245;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s, transform 0.2s;
}
.folder-tile:hover {
    color: rgba(255, 255, 255, 0.85);
}
.folder-tile .folder-icon {
    width: 55%;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* Folder tree picker (used in the Move modal). */
.folder-tree {
    max-height: 60vh;
    overflow-y: auto;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 6px;
}
.folder-tree ul { list-style: none; margin: 0; padding-left: 18px; }
.folder-tree > ul { padding-left: 0; }
.folder-tree .ft-row {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}
.folder-tree .ft-row:hover { background: #2a2a2a; }
.folder-tree .ft-row.selected { background: #0d6efd; color: #fff; }
.folder-tree .ft-chevron {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: #888;
    font-size: 10px;
    transition: transform 0.15s;
}
.folder-tree .ft-row.expanded .ft-chevron { transform: rotate(90deg); }
.folder-tree .ft-row.leaf .ft-chevron { visibility: hidden; }
.folder-tree .ft-icon { margin-right: 6px; opacity: 0.7; flex-shrink: 0; }
.folder-tree .ft-icon svg { width: 14px; height: 14px; }
.folder-tree .ft-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-tree .ft-loading { color: #888; font-style: italic; padding-left: 22px; }
.folder-table tbody tr:hover td { background: #2a2a2a; }
.folder-table td, .folder-table th { border-color: #333; padding: 6px 12px; }
.folder-table a { text-decoration: none; }
.folder-table a:hover { text-decoration: underline; }

/* Scan progress card — fixed-position floating card so it doesn't reflow the page layout
   when shown/hidden. Anchored bottom-left, narrow, never blocks the menu / settings. */
.scan-progress-card {
    position: fixed;
    bottom: 18px;
    left: 18px;
    width: 560px;
    max-width: calc(100vw - 36px);
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040;        /* above page content, below modals */
}
.scan-progress-card .progress { background: #1f1f1f; border-radius: 4px; }
.scan-progress-card .progress-bar { transition: width 0.4s ease-out; }
.scan-progress-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.9rem;
}
.scan-progress-count { font-size: 0.85rem; }
.scan-cancel-btn {
    padding: 4px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Tile cards (comic thumbnails). Click image = read; hover reveals full title + read button + cog. */
.tile-card { position: relative; }
.tile-cover-link { display: block; position: relative; overflow: hidden; }
.tile-cover-link img {
    display: block;
    width: 100%;
    /* Tell WebKit/Blink to use a higher-quality downscale filter. Our source
       thumbs are 680x980 but most grid cells render them at ~200px wide, so the
       default bilinear path looks soft. -webkit-optimize-contrast nudges Safari
       and Chrome to a sharper resampler. Tradeoff: slightly more GPU work; not
       noticeable in practice. */
    image-rendering: -webkit-optimize-contrast;
}

/* Slim colored progress strip across the bottom of the cover for in-progress / read items. */
.tile-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
}
.tile-progress.bg-primary { background: #1b6ec2; }
.tile-progress.bg-success { background: #28a745; }

/* For folder tiles only — show the name overlaid on the colored folder background. */
.folder-tile { position: relative; }
.folder-tile-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 6px 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

.tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35) 90%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    padding: 12px;
    text-align: center;
}
.tile-card:hover .tile-overlay,
.tile-card:focus-within .tile-overlay { opacity: 1; }

.tile-overlay-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 14px;
    word-break: break-word;
    /* Layered readability: black halo via multiple text-shadows so it survives any background. */
    text-shadow:
        0 0 3px rgba(0,0,0,1),
        0 0 6px rgba(0,0,0,0.9),
        0 1px 2px rgba(0,0,0,1),
        0 -1px 2px rgba(0,0,0,1),
        1px 0 2px rgba(0,0,0,1),
        -1px 0 2px rgba(0,0,0,1);
}

.tile-read-btn {
    background: rgba(0, 122, 255, 0.95);
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.tile-menu {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
}
.tile-menu-btn {
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    backdrop-filter: blur(4px);
}
.tile-menu-btn svg { width: 18px; height: 18px; }
.tile-card:hover .tile-menu-btn,
.tile-card:focus-within .tile-menu-btn,
.tile-menu.show .tile-menu-btn { opacity: 1; }
.tile-menu-btn:hover { background: rgba(0,0,0,0.85); }

/* Force readable colors on info alerts regardless of browser color-scheme
   (some browsers auto-darken light backgrounds without remapping foreground
   colors — which made <code> spans inside alerts unreadable). */
.alert-info {
    background: #1f3a4d !important;
    color: #e6f1f8 !important;
    border-color: #2a5470 !important;
}
.alert-info code,
.alert-info strong { color: #ffd479 !important; background: transparent; }
.alert-info a { color: #8ab4f8; }
.alert-info .text-muted { color: #a8c4d4 !important; }

/* Touch devices have no hover — always show the menu button and the title.
   The title sits in a thin always-visible strip at the bottom; the read button
   is dropped (tapping the cover already navigates to read). */
@media (hover: none) {
    .tile-menu-btn { opacity: 1; }
    .tile-overlay {
        opacity: 1;
        background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0) 70%);
        backdrop-filter: none;
        align-items: flex-end;
        padding: 6px 8px 8px;
    }
    .tile-overlay-title {
        font-size: 0.78rem;
        line-height: 1.2;
        font-weight: 600;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    }
    .tile-read-btn { display: none; }
}