/*** Icons (Bootstrap Icons v1.13.1, MIT — only the glyphs this UI uses) ***/
@font-face {
  font-family: 'bootstrap-icons';
  src: url('fonts/bootstrap-icons.woff2') format('woff2'),
       url('fonts/bootstrap-icons.woff') format('woff');
}
.bi:before {
  display: inline-block;
  font-family: 'bootstrap-icons' !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bi-arrow-clockwise:before {content: "\f116";}
.bi-arrow-down-up:before {content: "\f127";}
.bi-download:before {content: "\f30a";}
.bi-file-earmark:before {content: "\f392";}
.bi-folder2-open:before {content: "\f3d8";}
.bi-funnel:before {content: "\f3e1";}
.bi-gear:before {content: "\f3e5";}
.bi-house:before {content: "\f425";}
.bi-search:before {content: "\f52a";}
.bi-x-lg:before {content: "\f659";}
.bi-list-ul:before {content: "\f478";}
.bi-pause-fill:before {content: "\f4c3";}
.bi-pencil-square:before {content: "\f4ca";}
.bi-play-fill:before {content: "\f4f4";}
.bi-sort-down:before {content: "\f575";}
.bi-sort-down-alt:before {content: "\f574";}
.bi-stop-fill:before {content: "\f592";}
.bi-trash:before {content: "\f5de";}
.bi-upload:before {content: "\f603";}
.bi-plus-lg:before {content: "\f64d";}
.bi-check-lg:before {content: "\f633";}
.bi-asterisk:before {content: "\f151";}
.bi-exclamation-triangle-fill:before {content: "\f33a";}
.bi-globe2:before {content: "\f3ef";}
.bi-tag:before {content: "\f5b0";}


/*** Bootstrap 3 compat (the core now provides Bootstrap 5) ***/
/* Bootstrap 5 sets smooth scrolling on :root, which animates the
   scroll-position restore when returning to the torrent list */
:root {
  scroll-behavior: auto;
}
/* Accent color, switchable between the standard Bootstrap theme colors
   via plugin.accentColor in init.js */
:root {
  --mobile-accent: var(--bs-primary);
  --mobile-accent-rgb: var(--bs-primary-rgb);
  /* Bootstrap's stripe overlay color; applyAccentColor switches it to
     a dark one when the accent resolves to near-white (dark theme +
     near-black accent), where white stripes would be invisible */
  --mobile-stripe: rgba(255, 255, 255, 0.15);
  /* Progress-label text and its halo; applyAccentColor inverts them for
     the near-white accent, where dark-on-light reads better. The label
     can overhang onto the track, so the halo does the work there */
  --mobile-progress-label: #fff;
  --mobile-progress-halo: #000;
  /* Text on solid accent fills (selected filter rows); applyAccentColor
     flips it to black when the accent resolves to near-white */
  --mobile-accent-contrast: #fff;
}
.progress-bar {
  background-color: var(--mobile-accent);
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, var(--mobile-stripe) 25%, transparent 25%, transparent 50%, var(--mobile-stripe) 50%, var(--mobile-stripe) 75%, transparent 75%, transparent);
}
.list-group {
  --bs-list-group-active-bg: var(--mobile-accent);
  --bs-list-group-active-border-color: var(--mobile-accent);
  --bs-list-group-active-color: var(--mobile-accent-contrast);
}
.accordion {
  /* Expanded header follows the accent color as a light tint */
  --bs-accordion-active-bg: rgba(var(--mobile-accent-rgb), 0.15);
  --bs-accordion-active-color: var(--mobile-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--mobile-accent-rgb), 0.25);
  /* Keep the neutral chevron; the stock expanded one is primary-blue */
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
body {
  font-size: 14px;
}
h5 {
  font-size: 14px;
  margin: 10px 0;
}
/* Follow the accent color, and drop the underlines, which read
   as noise in a link-heavy touch UI */
a {
  color: var(--mobile-accent);
  text-decoration: none;
}
/* Touch browsers keep :hover applied after a tap until the next touch
   ("sticky hover"), which leaves tapped buttons filled dark (Bootstrap's
   outline-button hover is a filled state). Neutralize hover styling where
   hover doesn't really exist; the :active pressed flash is unaffected. */
@media (hover: none) {
  .btn:hover {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
  }
  .list-group-item-action:not(.active):hover {
    color: var(--bs-list-group-action-color);
    background-color: var(--bs-list-group-bg);
  }
}
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.form-group {
  margin-bottom: 15px;
}
.checkbox, .radio {
  display: block;
  margin: 10px 0;
}
.checkbox label, .radio label, .radio-inline {
  font-weight: 400;
  cursor: pointer;
}
.checkbox input, .radio input, .radio-inline input {
  margin-right: 4px;
}
.radio-inline {
  margin-right: 12px;
}
.progress {
  height: 20px;
  font-size: 12px;
  margin-bottom: 20px;
}
.list-group-item .badge {
  float: right;
}


/*** General ***/
html, body {
  overflow: visible;
}
a, button, tr, select, input, label {
  -webkit-tap-highlight-color: transparent;
}
div input {
  margin: 0px;
}
select {
  width:auto;
}
.table {
  margin-bottom: 0;
}
#torrentsList .table {
  table-layout: fixed;
}
.tableFixHead {
  overflow-y: auto;
  margin-bottom: 0;
}
.tableFixHead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: var(--bs-secondary-bg);
}
/* On the bottom navbar, which stays dark in both themes */
.icon-white {
  color: white;
}
/* Follows the theme (near-black on light, near-white on dark) */
.icon-black {
  color: var(--bs-body-color);
}
a:hover, a:focus {
  outline: none;
  text-decoration: none;
}
#mainContainer {
  background-color: var(--bs-body-bg);
  padding: 45px 3px calc(74px + env(safe-area-inset-bottom, 0px)) 3px;
  margin: 0;
}
/* Success/error toasts: as high as possible without touching the top
   edge of the page — a fixed element flush with it gets its background
   color extended into the iOS status-bar area, so leave a small strip
   of the page background above the toast (plus the safe-area inset,
   for when the page runs edge-to-edge in standalone mode) */
#alert_placeholder .alert {
  top: calc(env(safe-area-inset-top, 0px) + 5px);
  margin: 0 5px;
}
/* The label is its own layer sized to the bar, so it centers in the
   filled part; min-width keeps it from clipping when the bar is narrower
   than the text, and the halo keeps it readable over the light track */
.progress {
  position: relative;
}
.progress .progress-label {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobile-progress-label);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--mobile-progress-halo), 0 0 2px var(--mobile-progress-halo), 1px 1px 2px var(--mobile-progress-halo);
}
h5, #detailsTrackersPage a, #detailsTrackersPage .accordion-button, #detailsFilesPage a, #detailsDetailsPage #label td, .nav a, #getDirList td {
  word-break:break-all;
}
#detailsTrackersPage .accordion-button {
  font-size: 14px;
}
#torrentsList #list span {
  font-size: 12px;
}
/* Accent-colored flash on the row scrolled to after adding a torrent
   (see plugin.scrollToTorrent). An inset box-shadow, like Bootstrap's
   own row coloring, so it renders above the table striping */
@keyframes added-highlight {
  from { box-shadow: inset 0 0 0 9999px rgba(var(--mobile-accent-rgb), 0.3); }
  to { box-shadow: inset 0 0 0 9999px rgba(var(--mobile-accent-rgb), 0); }
}
#torrentsList #list .added-highlight {
  animation: added-highlight 2s ease-out;
}


/*** navbar bottom ***/
.navbar {
  margin-bottom: 0;
  border: none;
}
.navbar-inverse {
  background-color: #222;
}
/* Keep the buttons clear of the iOS home indicator on devices that have
   one; on other devices the inset is 0 and the bar stays compact */
.navbar-fixed-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navbar .container {
  padding-left: 20px;
  padding-right: 20px;
}
.navbar .nav > li {
  float: left;
  margin-right: 15px;
}
.navbar .nav > li:last-child {
  margin-right: 0px;
  /* Center the up/down speed stack on the bar's midline, like the
     table-cell-centered icons in the other items */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 65px;
}
.navbar .nav > li > a, .navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
  display: table-cell;
  vertical-align: middle;
  padding: 0;
  font-size: 20px;
  background-color: transparent;
  height: 65px;
}
.navbar .nav > li > div > span {
  position: relative;
  top: -2px;
  color: #fff;
  line-height: 0;
}
.navbar .nav > li > div > i {
  margin-right: 2px;
  font-size: 17px;
}
.navbar .divider-vertical {
  height: 65px;
  margin: 0 15px 0 0;
  border-right: 1px solid #323232;
  border-left: 1px solid #111111;
}


/*** navtabs top ***/
.nav-tabs {
  display: flex;
  /* BS5's .nav wraps by default, which would push the toolbar icons to
     a second line when the filter text is long; truncate instead */
  flex-wrap: nowrap;
  background-color: var(--bs-body-bg);
  padding: 3px 3px 0 3px;
  border-bottom: 1px solid var(--bs-border-color);
}
.nav-tabs > li {
  flex: 0 0 auto;
}
.nav-tabs a {
  font-size: 15px;
}
.nav-tabs > li > a {
  display: block;
  padding: 8px 12px;
  color: var(--mobile-accent);
  border-bottom: 2px solid transparent;
}
.nav-tabs > li.active > a {
  border-bottom-color: var(--mobile-accent);
  font-weight: bold;
}
#torrentsList .nav {
  white-space: nowrap;
}
#torrentsList .nav > li > a {
  margin-right: 1px;
}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
  background-color: transparent;
}
.nav-tabs #torrentsFilter {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  order: 1;
}
.nav-tabs #refresh {
  order: 2;
}
.nav-tabs #sort {
  order: 3;
}
.nav-tabs #search {
  order: 4;
}
.nav-tabs #sort #sortIcon i, .nav-tabs #refresh #refreshIcon i, .nav-tabs #search #searchIcon i {
  color: var(--mobile-accent);
}
/* The quick-search bar is fixed below the tab bar, so it doesn't scroll
   away with the list; toggleSearch makes room for it above the list and
   sets the exact top from the measured tab-bar height.
   (display comes from here when toggleSearch clears the inline none) */
#torrentsList #searchBar {
  position: fixed;
  top: 44px; /* fallback; toggleSearch measures the real tab bar */
  left: 0;
  right: 0;
  z-index: 1029;
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  gap: 5px;
  padding: 5px 3px;
}
#torrentsList #searchBar input {
  flex: 1 1 auto;
}
.nav-tabs #torrentsFilter > a {
  /* inline-flex, so the tap target is only as wide as the funnel icon
     and text — not the whole stretch of empty tab-bar space the li
     covers; max-width still lets long filter text truncate */
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
/* Only the selection names truncate; the count stays visible */
.nav-tabs #torrentsFilter #filterText {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-tabs #torrentsFilter #filterCount {
  flex: 0 0 auto;
  margin-left: 5px;
}
.nav-tabs #torrentsFilter > a > i {
  color: var(--mobile-accent);
  margin-right: 6px;
}


/*** Torrent Filter ***/
#torrentFilter {
  margin-top: -20px;
}
#torrentFilter h5 {
  font-weight: bold;
  margin-top: 15px;
}
#torrentFilter .list-group {
  margin-bottom: 10px;
}
#torrentFilter .list-group-item .bi {
  margin-right: 8px;
}
#torrentFilter .list-group-item .filter-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: text-bottom;
}
#filterButtons {
  margin-bottom: 5px;
}


/*** Torrent Details ***/
#torrentDetailsHeader, #detailsTrackersPage, #detailsFilesPage {
  padding-top: 9px;
  padding-left: 8px;
  padding-right: 8px;
}
#torrentDetails #detailsDetailsPage tr td:first-child {
  white-space: nowrap;
}
#torrentDetails #detailsDetailsPage tr td:last-child {
 word-break: break-all;
}
#torrentDetails #detailsDetailsPage #label input {
  display: inline;
  height: 24px;
  width: 139px;
  padding-top: 5px;
  vertical-align: middle;
}
#torrentDetails #detailsFilesPage > div {
  min-height: 24px;
}
#torrentDetails #detailsFilesPage > div a {
  display: block;
  padding-top: 4px;
}
#torrentDetails #detailsFilesPage button {
  margin-left: 4px;
}


/*** Add Torrent ***/
#addTorrent {
  margin-top: -20px;
}
#addTorrent #showGetDir, #torrentDataDir #showGetDirDataDir {
  height: 34px;
}
#addTorrent #labelBlock #taddReturnSelect {
  margin-top: 5px;
}


/*** Torrent Data Directory ***/
#torrentDataDir {
  margin-top: -20px;
}
#torrentDataDir h5 {
  font-weight: bold;
  margin-top: 15px;
}


/*** Peer Actions ***/
#peerActions {
  margin: 8px 0;
}
#peerActions #peerAddBlock {
  margin-bottom: 8px;
}
#peersTable tbody tr {
  cursor: pointer;
}
#peersTable.no-country th#country, #peersTable.no-country td.country-cell {
  display: none;
}
#peersTable .peer-flag {
  vertical-align: middle;
}
#peersTable td.country-cell {
  white-space: nowrap;
}
#peersTable tbody tr.info > td {
  background-color: rgba(var(--mobile-accent-rgb), 0.2);
  --bs-table-bg: rgba(var(--mobile-accent-rgb), 0.2);
}


/*** Tracker Actions ***/
#detailsTrackersPage #updateTrackersBtn {
  margin: 8px 0;
}


/*** Server Info ***/
#globalSettings #serverInfoHeader {
  font-weight: bold;
  margin-top: 20px;
}
#globalSettings #diskSpaceBar {
  margin-bottom: 5px;
}


/*** Get Dir List ***/
#getDirList {
  margin-top: -20px;
}
#getDirList h5 {
  padding-left: 8px;
  padding-right: 8px;
}
#getDirList button {
  margin-left: 8px;
  margin-bottom: 15px;
}
#getDirList td {
  padding: 14px;
}

/*** Torrent Sort ***/
#torrentSort {
  margin-top: -20px;
}


/*** Global Settings ***/
#globalSettings {
  margin-top: -20px;
}


/*** Confirm Delete ***/
#confirmTorrentDelete #confirmText {
  word-break: normal;
}
