/* 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/archive.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 */
}

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

.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;
}

/* 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-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;
}

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

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

/* 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-icons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Keep the user tabs visible below the fixed navbar */
#userTabs {
  position: sticky;
  top: 0; /* .app-content is the scroll container; its visible top starts at 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 */
}

/* 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;
}

.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;
}