/* Import component styles */
@import url('components/modal.css');
@import url('components/context-menu.css');
@import url('components/fab.css');
@import url('components/search.css');
@import url('components/side-panel.css');
@import url('components/most-used-widget.css');
@import url('components/health-widget.css');
@import url('components/archive.css');
@import url('components/selection.css');
@import url('components/table-view.css');

html {
  font-size: 14px;
}

/* Utility class used to hide/show sections (archive page, main content, FAB, etc.) */
.z-hidden {
  display: none !important;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 63px; /* space for fixed navbar */
}

body.no-navbar {
  padding-top: 0;
}

/* Logo dark/light mode switching */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: block; }

/* Navbar styling for light and dark modes */
.navbar {
  background-color: var(--bs-body-bg) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

.navbar .navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.navbar .nav-link {
  color: var(--bs-body-color) !important;
}

.navbar .nav-link:hover {
  color: var(--bs-emphasis-color) !important;
}

/* Dropdown menu logout button styling */
.dropdown-item .btn-link {
  color: var(--bs-dropdown-link-color);
  font-size: inherit;
}

.dropdown-item .btn-link:hover {
  color: var(--bs-dropdown-link-hover-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Letter avatar fallback (replaces broken favicons) */
.link-letter-avatar {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Link tile layouts */
.zeerka-link {
  min-width: 0; /* Allow wrapper to shrink in grid */
}

.zeerka-link-tile {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
  min-width: 0;
}

.zeerka-link-tile:hover {
  background-color: var(--bs-secondary-bg);
  text-decoration: none;
}

.zeerka-link-tile img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.zeerka-link-tile .link-favicon-spinner {
  width: 24px;
  height: 24px;
  border-width: 2px;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.zeerka-link-tile .link-letter-avatar {
  width: 24px;
  height: 24px;
  font-size: 14px;
  margin-right: 0.5rem;
}

.zeerka-link-tile i[class*="fa-"] {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  width: 24px;
  text-align: center;
  line-height: 1;
}

.zeerka-link-tile .link-title {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Icon-only mode */
.zeerka-link-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.zeerka-link-icon-only:hover {
  background-color: var(--bs-secondary-bg);
  text-decoration: none;
}

.zeerka-link-icon-only img {
  width: 32px;
  height: 32px;
}

.zeerka-link-icon-only .link-favicon-spinner {
  width: 32px;
  height: 32px;
  border-width: 2px;
}

.zeerka-link-icon-only .link-letter-avatar {
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
}

.zeerka-link-icon-only i[class*="fa-"] {
  font-size: 2rem;
  line-height: 1;
}

/* Grid layouts for multiple tiles per row */
.card-body.zeerka-links-grid {
  display: grid !important;
  gap: 0.5rem;
}

/* Collapsed groups (higher specificity to override grid display) */
.card-body.zeerka-links-grid.collapsed,
.zeerka-links-grid.collapsed,
.zeerka-links-grid-icons.collapsed {
  display: none !important;
}

.zeerka-links-grid {
  display: grid;
  gap: 0.5rem;
}

.zeerka-links-grid-1 {
  grid-template-columns: 1fr;
}

.zeerka-links-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.zeerka-links-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.zeerka-links-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.zeerka-links-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.zeerka-links-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.zeerka-links-grid-icons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Tab bar wrapper — sticky, full-bleed, holds scroll arrows + tabs + controls.
   --z-tabs-bar-height is maintained by a ResizeObserver in
   link-table-renderer.js so that #tablePageHeader can stack below it.
   Full-bleed background prevents scrolled content from peeking through. */
#userTabsBar {
  position: sticky;
  top: 0;
  z-index: 1020; /* below the navbar (1030) but above page content */
  background: var(--bs-body-bg);
  margin-bottom: 0.5rem; /* space between tabs and tab content */
  /* Full-bleed: extend beyond container padding */
  margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  padding-left: calc(0.5 * var(--bs-gutter-x, 1.5rem));
  padding-right: calc(0.5 * var(--bs-gutter-x, 1.5rem));
  padding-top: 0.25rem;
  display: flex;
  align-items: center;
}

/* Tab list: fills available width, scrollable horizontally, no visible scrollbar */
#userTabs {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 0.5rem;
  position: relative;
  border-bottom: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#userTabs::after {
  content: '';
  position: absolute;
  left: min(var(--z-tabs-content-width, 100%), 100%);
  right: 0;
  bottom: 1px;
  height: var(--bs-nav-tabs-border-width);
  background: var(--bs-nav-tabs-border-color);
  pointer-events: none;
  z-index: 0;
}

/* Keep active tab visually connected with content by masking the tabs baseline. */
#userTabs .nav-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  border-bottom-color: transparent;
}

#userTabs .tab-icon {
  flex: 0 0 auto;
  display: inline-block;
  line-height: 1;
}

#userTabs .nav-link::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0;
  height: var(--bs-nav-tabs-border-width);
  background: var(--bs-nav-tabs-border-color);
}

#userTabs .nav-link.active,
#userTabs .nav-item.show .nav-link {
  background-color: var(--bs-body-bg);
  border-bottom-color: var(--bs-body-bg);
  z-index: 2;
}

#userTabs .nav-link.active::before,
#userTabs .nav-item.show .nav-link::before {
  display: none;
}

#userTabs .nav-link.active::after,
#userTabs .nav-item.show .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bs-body-bg);
}

#userTabs::-webkit-scrollbar {
  display: none;
}

/* Truncate long tab names with an ellipsis */
.tab-name {
  min-width: 0;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* Prevent the "All Tabs" pill label from wrapping to two lines */
#tabAllPill .nav-link {
  white-space: nowrap;
}

/* Scroll arrow buttons flanking the tab list */
.tab-scroll-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  border: none;
  background: none;
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-size: 0.8rem;
  align-self: stretch;
}

.tab-scroll-arrow:hover {
  color: var(--bs-body-color);
}

/* Fixed right-side controls: view toggle, collapse/expand, new tab */
#tabControlsRight {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.25rem;
  padding-right: 0.25rem;
}

/* Keep Card/Table controls icon-only at all times. */
#tabViewToggle .z-toggle-label {
  display: none;
}

/* Mobile: table toggle and collapse/expand buttons are not usable on small screens */
@media (max-width: 767.98px) {
  #tabViewToggle {
    display: none !important;
  }
}

/* Favicon preview in modal dialogs */
.favicon-preview-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background-color: var(--bs-light-bg-subtle);
  overflow: hidden;
}

.favicon-preview {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.favicon-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drag & Drop (Sortable.js) Styles */
.sortable-ghost {
  opacity: 0.4;
  background-color: var(--bs-primary-bg-subtle);
  border: 2px dashed var(--bs-primary);
}

.sortable-chosen {
  cursor: move;
  opacity: 0.9;
}

.sortable-drag {
  opacity: 0.5;
  transform: scale(1.05);
}

/* Add cursor feedback for draggable items */
.zeerka-tab .nav-link {
  cursor: pointer;
}

.zeerka-group .card-header {
  cursor: pointer;
}

/* Hide view/collapse buttons until the group is hovered */
@media (hover: hover) {
  .zeerka-group .card-header button[data-action="view"],
  .zeerka-group .card-header button[data-action="collapse"] {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .zeerka-group:hover .card-header button[data-action="view"],
  .zeerka-group:hover .card-header button[data-action="collapse"] {
    opacity: 1;
  }
}

.zeerka-link {
  cursor: pointer;
}

/* Tab hover feedback during group drag */
.nav-link.drag-hover {
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary) !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-body-bg);
  opacity: 0.7;
  transition: opacity 0.4s ease;
  pointer-events: all;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Loading animation */
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: radial-gradient(circle closest-side, var(--bs-body-color) 94%, #0000) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}

.loader::before {
  content: var(--loading-text, "");
  line-height: 1em;
  color: #0000;
  background: inherit;
  background-image: radial-gradient(circle closest-side, var(--bs-body-bg) 94%, var(--bs-body-color));
  -webkit-background-clip: text;
          background-clip: text;
}

@keyframes l24 {
  100% { background-position: left; }
}

/* ── Restore highlight ────────────────────────────────────────────────────────
   Applied programmatically after an archived entity is restored and scrolled
   into view. The outline pulses in then fades out over ~2 s. */
@keyframes z-restore-highlight {
    0%   { outline: 3px solid transparent;       background-color: transparent; }
    20%  { outline: 3px solid var(--bs-warning); background-color: var(--bs-warning-bg-subtle); }
    60%  { outline: 3px solid var(--bs-warning); background-color: var(--bs-warning-bg-subtle); }
    100% { outline: 3px solid transparent;       background-color: transparent; }
}

.z-restored {
    outline: 3px solid transparent;
    border-radius: var(--bs-border-radius, 0.375rem);
    animation: z-restore-highlight 2s ease-out forwards;
}

/* In a border-collapse table, outline on <tr> doesn't render in Chrome.
   Drive the highlight via each cell's background-color instead. */
tr.z-restored > td {
    animation: z-restore-highlight-bg 2s ease-out forwards;
}

@keyframes z-restore-highlight-bg {
    0%   { background-color: transparent; }
    20%  { background-color: var(--bs-warning-bg-subtle); }
    60%  { background-color: var(--bs-warning-bg-subtle); }
    100% { background-color: transparent; }
}