/* ============================================================================
   app-shell.css
   ----------------------------------------------------------------------------
   Static consolidation of rules that were previously inlined in index.html.
   Loaded after the framework + app CSS so it can override them, and before
   override-remove-animations.css so it can still be flattened.
   ============================================================================ */

/* ---------- Preloader (shown before Vue mounts) ---------- */
.app-preloader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: oklch(0.15 0.012 85);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.app-preloader-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(244, 180, 0, 0.1);
  border-top-color: #f4b400;
  border-radius: 50%;
  /* The single animation we keep. It is GPU-accelerated and tiny. */
  animation: app-preloader-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}
@keyframes app-preloader-spin { to { transform: rotate(360deg); } }

/* ---------- Empty states & loading masks ---------- */
.el-empty__description p { color: oklch(0.68 0.02 85) !important; font-weight: 500; }
.el-loading-mask {
  background-color: oklch(0.15 0.012 85 / 0.7) !important;
  /* backdrop-filter removed — it forced full-screen repaints on scroll */
}
.el-loading-spinner .path { stroke: #f4b400; }

/* ---------- Login form polish ---------- */
.login-container .el-card { border: none !important; background: transparent !important; box-shadow: none !important; }
.login-container .el-card__header { border-bottom: none; text-align: center; }
.login-container .el-input__wrapper { background: oklch(0.20 0.015 85 / 0.5) !important; border-radius: 16px; box-shadow: none !important; }
.login-container .el-input__wrapper.is-focus { outline: 2px solid rgba(244, 180, 0, 0.5) !important; outline-offset: 2px; }
.el-input__inner::placeholder { color: oklch(0.58 0.02 85) !important; }

/* ---------- Interactive polish (kept light, no continuous animations) ---------- */
.el-button { transition: background-color 0.15s ease, color 0.15s ease !important; }
.el-button:not(.is-disabled):active { transform: scale(0.96); }
.el-button.is-disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; }
.el-button:focus-visible, .el-checkbox__input.is-focus .el-checkbox__inner {
  outline: 2px solid #f4b400 !important; outline-offset: 2px !important;
}
.el-input__wrapper.is-focus, .el-select__wrapper.is-focus {
  outline: 2px solid rgba(244, 180, 0, 0.5) !important; outline-offset: 2px !important; box-shadow: none !important;
}
.el-form-item.is-error .el-input__wrapper {
  outline: 2px solid oklch(0.65 0.15 25 / 0.8) !important;
  background: oklch(0.65 0.15 25 / 0.05) !important;
}
.el-form-item__error { color: oklch(0.65 0.15 25) !important; font-weight: 500; }
.el-message {
  border-radius: 12px !important;
  background: oklch(0.20 0.015 85 / 0.9) !important;
  border: 1px solid oklch(0.28 0.02 85 / 0.5) !important;
  color: oklch(0.95 0.01 85) !important;
}

/* ---------- Data tables ---------- */
.el-table {
  background: transparent !important;
  --el-table-border-color: transparent !important;
  --el-table-row-hover-bg-color: oklch(0.28 0.02 85 / 0.3) !important;
  --el-table-header-bg-color: oklch(0.20 0.015 85 / 0.8) !important;
}
.el-table th.el-table__cell {
  background: var(--el-table-header-bg-color) !important;
  color: oklch(0.88 0.015 85);
  font-weight: 600;
  border-bottom: 1px solid oklch(0.28 0.02 85 / 0.5) !important;
}
.el-table td.el-table__cell {
  border-bottom: 1px solid oklch(0.28 0.02 85 / 0.5) !important;
  color: oklch(0.95 0.01 85);
  padding: 16px 0 !important;
}
.el-table__inner-wrapper::before { display: none; }
.el-pagination { margin-top: 1.5rem; justify-content: flex-end; }
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: #f4b400 !important; color: oklch(0.20 0.015 85) !important; font-weight: 600;
}
.el-pagination.is-background .el-pager li {
  background-color: transparent !important;
  color: oklch(0.68 0.02 85) !important;
  border-radius: 8px !important;
}
.el-pagination.is-background .el-pager li:hover { color: #f4b400 !important; }
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  background-color: transparent !important;
  color: oklch(0.68 0.02 85) !important;
}

/* ---------- Sidebar nav (pill) ---------- */
.el-menu { background: transparent !important; border-right: none !important; }
.el-menu-item, .el-sub-menu__title {
  border-radius: 12px;
  margin: 4px 12px;
  color: oklch(0.68 0.02 85) !important;
}
.el-menu-item.is-active { background: rgba(244, 180, 0, 0.1) !important; color: #f4b400 !important; font-weight: 600; }
.el-menu-item:hover, .el-sub-menu__title:hover { background: oklch(0.28 0.02 85 / 0.6) !important; color: oklch(0.98 0.005 85) !important; }

/* ---------- Dashboard typography ---------- */
.stat-value {
  font-size: 2.25rem !important; line-height: 2.5rem !important;
  font-weight: 700 !important; letter-spacing: -0.025em !important;
  color: oklch(0.98 0.005 85) !important;
}
.stat-title {
  font-size: 0.875rem !important; font-weight: 500 !important;
  color: oklch(0.68 0.02 85) !important;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---------- Upload dragger ---------- */
.el-upload-dragger { padding: 3rem !important; }
.el-upload-dragger:hover {
  border-color: #f4b400 !important;
  background-color: oklch(0.20 0.015 85 / 0.8) !important;
}
.el-upload__text em { color: #f4b400 !important; font-weight: 600; }

/* ---------- Dialogs & overlays ---------- */
.el-dialog, .el-message-box, .el-popover {
  background: oklch(0.20 0.015 85) !important;
  border: 1px solid oklch(0.28 0.02 85) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
}
.el-dialog__title, .el-message-box__title { color: oklch(0.95 0.01 85) !important; font-weight: 600 !important; }
.el-dialog__body, .el-message-box__content, .el-popover { color: oklch(0.78 0.02 85) !important; }
.el-overlay { background-color: oklch(0.15 0.012 85 / 0.8) !important; }

/* ---------- Hamburger / toolbar positioning (replaces inline JS) ---------- */
.hamburger-wrapper {
  position: relative !important;
  display: flex;
  align-items: center;
  z-index: 2000;
}
.toolbar-manage {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.navbar-integrated-toolbar {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  padding-top: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
.navbar-integrated-toolbar > div,
.navbar-integrated-toolbar .compress-button,
.navbar-integrated-toolbar .upload-method-button,
.navbar-integrated-toolbar .upload-folder,
.navbar-integrated-toolbar .info-container,
.navbar-integrated-toolbar .toggle-dark-button,
.navbar-integrated-toolbar .toolbar-button {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-8px) scale(0.96) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  margin: 0 !important;
}
.navbar-integrated-toolbar > div.active,
.navbar-integrated-toolbar .compress-button.active,
.navbar-integrated-toolbar .upload-method-button.active,
.navbar-integrated-toolbar .upload-folder.active,
.navbar-integrated-toolbar .info-container.active,
.navbar-integrated-toolbar .toggle-dark-button.active,
.navbar-integrated-toolbar .toolbar-button.active {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ---------- Hide elements that the new UX no longer needs ---------- */
.upload-folder-container { display: none !important; }