/*
 * Custom stylesheet for "BAC 18/20".
 *
 * TailwindCSS (via CDN) handles the bulk of styling; this file holds a few
 * global refinements that are awkward to express with utility classes:
 *  - sensible defaults for RTL Arabic typography,
 *  - smooth scrolling,
 *  - a refined custom scrollbar,
 *  - focus-visible polish for accessibility.
 */

/* Smooth in-page scrolling */
html {
  scroll-behavior: smooth;
}

/* Apply the body font to native form controls too */
input,
button,
select,
textarea {
  font-family: inherit;
}

/* Search input: hide the native clear/cancel button for a cleaner look */
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Refined custom scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* slate-300 */
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8; /* slate-400 */
}

/* Accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #243a93; /* brand-700 (blue) */
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Subtle entrance animation utility (used sparingly) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out both;
}

/* =======================================================================
 * Google-Drive-like file browser (lightweight, smooth)
 *
 * Performance notes:
 *  - We avoid `transform: translateY()` + big box-shadow on hover (those force
 *    full re-paints while scrolling). Instead we use a cheap background-color
 *    change + a 1px border, like Google Drive does.
 *  - `content-visibility:auto` lets the browser skip layout/paint of off-screen
 *    cards, which makes scrolling long folders feel instant even with hundreds
 *    of items. `contain-intrinsic-size` reserves space so the scrollbar is
 *    stable.
 * ===================================================================== */

/* The scroll container for the file area: GPU-composited, no jank. */
.drive-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---- Grid view card (Drive "tiles") ---- */
.drive-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7ebf0;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  /* Skip painting off-screen tiles -> smooth scrolling */
  content-visibility: auto;
  contain-intrinsic-size: 168px;
}
.drive-card:hover {
  background: #f6f9fc;
  border-color: #c9d8e4;
  box-shadow: 0 1px 2px rgba(13, 17, 31, 0.06);
}
.drive-card:active {
  background: #eef4f8;
}

/* Dark theme surfaces */
.dark .drive-card {
  background: #13182a;
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .drive-card:hover {
  background: #1b2238;
  border-color: rgba(255, 255, 255, 0.16);
}
.dark .drive-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.dark .drive-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ---- List view row (Drive "list") ---- */
.drive-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #eef2f6;
  transition: background-color 0.1s ease;
  content-visibility: auto;
  contain-intrinsic-size: 52px;
}
.drive-row:hover {
  background: #f6f9fc;
}
.drive-row:active {
  background: #eef4f8;
}
.drive-row:last-child {
  border-bottom: 0;
}

/* Icon chip (rounded square like Drive) */
.drive-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
}

/* Truncated file name helper */
.drive-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* View-toggle buttons */
.view-toggle-btn {
  transition: background-color 0.1s ease, color 0.1s ease;
}

/* ---- Locked file styling (members without access) ---- */
.lock-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #243a93;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(7, 9, 18, 0.18);
}
.drive-card.is-locked .drive-name,
.drive-row.is-locked .drive-name {
  color: #64748b; /* slate-500 — slightly muted to hint it's locked */
}
.drive-card.is-locked:hover {
  border-color: #b8ccff; /* brand-200 */
}

/* Disable text selection across the whole member dashboard
   (quiet copy/download guard — no visible notice). */
[data-root-folder] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* …but keep the search box usable. */
[data-root-folder] input,
[data-root-folder] textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* The secure viewer iframe/media should never be downloadable via drag. */
#viewer-stage img,
#viewer-stage video,
#viewer-stage iframe {
  -webkit-user-drag: none;
  user-drag: none;
}