/**
 * UI Polish — Motion & UX enhancements (global).
 * Additive only: no removal of existing classes/IDs. Safe for backend/JS.
 * Respects prefers-reduced-motion.
 */

/* ========== Design system tokens ========== */
:root {
  /* Motion */
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* Colors (contrast-safe, additive) */
  --ui-ink: #0B1220;
  --ui-muted: #64748B;
  --ui-line: #E5EAF3;
  --ui-brand: #2F6AFF;
  --ui-brand-soft: rgba(47, 106, 255, 0.12);
  --ui-danger: #E11D48;
  --ui-danger-soft: rgba(225, 29, 72, 0.12);
  --ui-ok: #16A34A;
  --ui-ok-soft: rgba(22, 163, 74, 0.12);
  --ui-warn: #F59E0B;
  /* Spacing */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  /* Radius */
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  /* Shadow */
  --ui-shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
  --ui-shadow-focus: 0 0 0 3px var(--ui-brand-soft);
  /* Typography (relative) */
  --ui-text-sm: 0.8125rem;
  --ui-text: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-font-size-base: 1rem;
  --ui-line-height: 1.55;
  /* Unified background (white, no gradients) */
  --ui-bg-page: #ffffff;
  --ui-bg-subtle: #f8fafc;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-slow: 0ms;
  }
}

/* ========== Unified theme: white background + typography ========== */
body,
.app-wrap {
  background: var(--ui-bg-page) !important;
  font-size: var(--ui-font-size-base);
  line-height: var(--ui-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main,
.content,
.main {
  background: var(--ui-bg-page);
}

/* Sidebar/content areas stay white; subtle borders only */
.sidebar {
  background: var(--ui-bg-page);
}

.navbar,
.topbar {
  background: var(--ui-bg-page) !important;
}

/* ========== Logo / brand image — smooth interaction ========== */
.brand-logo,
.logo-box img,
.brand .logo,
.brand-badge {
  transition: transform var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard),
              opacity var(--dur-normal) var(--ease-standard);
}

.sidebar:hover .brand-logo,
.logo-box:hover img,
.brand:hover .logo {
  transform: scale(1.04);
}

/* ========== Hero / App launch transition (Logo morph on load) ========== */
.brand-logo,
.logo-box img,
.brand .logo,
.brand-badge {
  animation: ui-hero-logo var(--dur-slow) var(--ease-enter) both;
}

@keyframes ui-hero-logo {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo,
  .logo-box img,
  .brand .logo,
  .brand-badge {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sidebar:hover .brand-logo,
  .logo-box:hover img,
  .brand:hover .logo {
    transform: none;
  }
}

/* ========== Global smooth transitions (links, inputs) ========== */
a {
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

input,
select,
textarea {
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

/* ========== Focus ring (accessibility) — buttons/links only; no outline on inputs ========== */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ui-brand);
  outline-offset: 2px;
}

/* لا تحديد أو إبراز حول الخانات (حسب طلب الواجهة الموحدة) */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  button:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline-offset: 2px;
  }
}

/* ========== Buttons — states (additive) ========== */
button.btn,
a.btn,
.btn,
button.linkbtn,
.linkbtn,
.restore-btn,
button[type="submit"],
.btn-login,
.app-item,
.logout-btn,
.back,
.icon-wrapper {
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  button.btn, a.btn, .btn, button.linkbtn, .linkbtn,
  .restore-btn, button[type="submit"], .app-item,
  .logout-btn, .back, .icon-wrapper {
    transition: none;
  }
}

/* Pressed state */
button.btn:active,
a.btn:active,
button.linkbtn:active,
.restore-btn:active,
button[type="submit"]:active {
  transform: scale(0.98);
}

button.btn:disabled,
button.linkbtn:disabled,
button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Loading state (add class .is-loading from your JS when needed) */
.btn.is-loading,
.linkbtn.is-loading,
.restore-btn.is-loading,
.btn-login.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn.is-loading::after,
.linkbtn.is-loading::after,
.restore-btn.is-loading::after,
.btn-login.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin 0.6s linear infinite;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
  .linkbtn.is-loading::after,
  .restore-btn.is-loading::after,
  .btn-login.is-loading::after {
    animation: none;
  }
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* ========== Sidebar / nav links ========== */
.sidebar a {
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.sidebar[data-ui="nav"] a.ui-active,
.nav a.ui-active {
  background-color: var(--ui-brand-soft);
  color: var(--ui-brand);
  font-weight: 800;
}

/* ========== Cards (drive grid) ========== */
.card,
.item {
  transition: transform var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}

/* Stagger entrance for drive grids (perceived performance) */
#foldersGrid .card,
#filesGrid .card {
  animation: ui-fade-in 0.28s var(--ease-enter) both;
}

#foldersGrid .card:nth-child(1), #filesGrid .card:nth-child(1) { animation-delay: 0ms; }
#foldersGrid .card:nth-child(2), #filesGrid .card:nth-child(2) { animation-delay: 45ms; }
#foldersGrid .card:nth-child(3), #filesGrid .card:nth-child(3) { animation-delay: 90ms; }
#foldersGrid .card:nth-child(4), #filesGrid .card:nth-child(4) { animation-delay: 135ms; }
#foldersGrid .card:nth-child(5), #filesGrid .card:nth-child(5) { animation-delay: 180ms; }
#foldersGrid .card:nth-child(6), #filesGrid .card:nth-child(6) { animation-delay: 225ms; }
#foldersGrid .card:nth-child(7), #filesGrid .card:nth-child(7) { animation-delay: 270ms; }
#foldersGrid .card:nth-child(8), #filesGrid .card:nth-child(8) { animation-delay: 315ms; }
#foldersGrid .card:nth-child(n+9), #filesGrid .card:nth-child(n+9) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  #foldersGrid .card,
  #filesGrid .card {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .item:hover {
    transition: none;
  }
}

/* ========== Modal — enter/exit ========== */
.modal {
  transition: opacity var(--dur-normal) var(--ease-exit);
}

.modal.show {
  transition: opacity var(--dur-normal) var(--ease-enter);
}

.modal .box {
  transition: transform var(--dur-normal) var(--ease-enter),
              opacity var(--dur-normal) var(--ease-enter);
}

.modal:not(.show) .box {
  transform: scale(0.96);
  opacity: 0;
}

.modal.show .box {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal .box {
    transition: none;
  }
  .modal:not(.show) .box {
    transform: none;
    opacity: 0;
  }
}

/* ========== Toast / Snackbar ========== */
.toast,
[id="toast"] {
  transition: opacity var(--dur-normal) var(--ease-enter),
              transform var(--dur-normal) var(--ease-enter);
}

.toast.show,
[id="toast"].show {
  transform: translateY(0);
  opacity: 1;
}

.toast:not(.show),
[id="toast"]:not(.show) {
  transform: translateY(8px);
  opacity: 0;
}

/* Flash messages (layout) */
.flash-messages {
  transition: opacity var(--dur-normal) var(--ease-enter);
}

/* ========== Forms — input states (بدون إبراز أو حدود زائدة عند التركيز) ========== */
input:focus,
select:focus,
textarea:focus {
  transition: border-color var(--dur-fast) var(--ease-standard);
}

/* Inline error/success (add .ui-field-error / .ui-field-success to parent .input-field) */
.ui-field-error input,
.ui-field-error select,
.ui-field-error textarea {
  border-color: #E11D48 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important;
}

.ui-field-success input,
.ui-field-success select,
.ui-field-success textarea {
  border-color: var(--ui-ok) !important;
  box-shadow: 0 0 0 3px var(--ui-ok-soft) !important;
}

/* Inline error message (under field) */
[data-ui="inline-error"] {
  font-size: var(--ui-text-sm);
  color: var(--ui-danger);
  margin-top: var(--ui-space-1);
  min-height: 1.25em;
}

/* Smooth scroll target for focus */
[data-ui="scroll-to-error"] {
  scroll-margin-top: var(--ui-space-6);
}

/* ========== Tables (sticky header, row hover) ========== */
table.ui-table-enhance thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

table.ui-table-enhance tbody tr {
  transition: background-color var(--dur-fast) var(--ease-standard);
}

table.ui-table-enhance tbody tr:hover {
  background-color: rgba(47, 106, 255, 0.04);
}

table.ui-table-enhance tbody tr.ui-row-selected {
  background-color: rgba(47, 106, 255, 0.08);
}

table.ui-table-enhance tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

table.ui-table-enhance tbody tr:nth-child(even):hover {
  background-color: rgba(47, 106, 255, 0.06);
}

/* ========== Card highlight (new/moved item — add .ui-card-highlight for ~1.2s) ========== */
.card.ui-card-highlight,
.item.ui-card-highlight {
  animation: ui-highlight-pulse 1.2s var(--ease-standard) both;
}

@keyframes ui-highlight-pulse {
  0% { box-shadow: 0 0 0 0 var(--ui-brand-soft); }
  40% { box-shadow: 0 0 0 6px var(--ui-brand-soft); }
  100% { box-shadow: 0 10px 25px rgba(2, 6, 23, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .card.ui-card-highlight,
  .item.ui-card-highlight {
    animation: none;
    box-shadow: var(--ui-shadow);
  }
}

/* ========== Empty state — subtle entrance ========== */
.empty.ui-empty-state,
[data-ui="empty-state"] {
  animation: ui-fade-in var(--dur-slow) var(--ease-enter) both;
}

@media (prefers-reduced-motion: reduce) {
  .empty.ui-empty-state,
  [data-ui="empty-state"] {
    animation: none;
  }
}

@keyframes ui-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Skeleton / shimmer (utility) ========== */
.ui-skeleton {
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.6) 0%,
    rgba(226, 232, 240, 0.9) 50%,
    rgba(226, 232, 240, 0.6) 100%
  );
  background-size: 200% 100%;
  animation: ui-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
    background: rgba(226, 232, 240, 0.7);
  }
}

@keyframes ui-shimmer {
  to { background-position: 200% 0; }
}

/* ========== Error pages container ========== */
.ui-error-page {
  animation: ui-fade-in var(--dur-slow) var(--ease-enter) both;
}

/* Page/section reveal (help, standalone content) */
.ui-page-reveal {
  animation: ui-fade-in var(--dur-slow) var(--ease-enter) both;
}

@media (prefers-reduced-motion: reduce) {
  .ui-error-page,
  .ui-page-reveal {
    animation: none;
  }
}

/* ========== Image lazy (optional blur-up placeholder) ========== */
img[loading="lazy"].ui-img-blur {
  background: rgba(226, 232, 240, 0.8);
}

img[loading="lazy"].ui-img-blur:not(.ui-img-loaded) {
  filter: blur(6px);
  transition: filter var(--dur-slow) var(--ease-standard);
}

img[loading="lazy"].ui-img-blur.ui-img-loaded {
  filter: blur(0);
}

/* ========== Drag-over feedback (drive) ========== */
.folder-card.ui-drag-over,
[data-ui="drop-target"].ui-drag-over {
  transition: background-color var(--dur-fast) var(--ease-standard);
}