/* Home — Drive-style landing (home.js). Hestini tokens only. */

.home-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sidebar (mockup: 248px, primary New, stroke icons, storage footer) ── */
.home-sidebar {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  background: var(--bg-sidebar, #fafafa);
  border-right: 1px solid var(--border-light, #ebebeb);
  overflow: hidden;
}
.home-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 20px;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  background: var(--accent-blue, #079d9d);
  box-shadow: var(--shadow-sm);
  color: var(--color-on-accent, #fff);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: fit-content;
}
.home-new-btn:hover { background: var(--accent-blue-hover, #078a9f); box-shadow: var(--shadow-md); }
.home-nav { display: flex; flex-direction: column; gap: 2px; }
.home-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-md, 6px);
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.home-nav-item:hover { background: var(--bg-hover, #ececec); }
.home-nav-item.active {
  background: rgba(7, 157, 157, 0.09);
  color: var(--accent-blue);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent-blue);
}
.home-nav-icon { display: inline-flex; flex-shrink: 0; }
.home-tree-label {
  margin: 20px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.home-folder-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.home-tree-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-md, 6px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.home-tree-item:hover { background: var(--bg-hover, #ececec); }
.home-tree-item.active { background: rgba(7, 157, 157, 0.09); color: var(--accent-blue); font-weight: 600; }
.home-tree-icon { display: inline-flex; flex-shrink: 0; }
.home-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Storage footer card (mockup) — quota is a flat 1 TB per user */
.home-storage {
  flex-shrink: 0;
  margin: 14px 4px 0;
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-primary, #fff);
}
.home-storage-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.home-storage-quota {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}
.home-storage-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border-light, #ebebeb);
  margin: 8px 0 6px;
  overflow: hidden;
}
.home-storage-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-blue, #079d9d);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.home-storage-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Main ── */
.home-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #ffffff);
}
.home-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Roomy top gutter — the row read as glued to the window edge
     (Thầy 2026-07-12). */
  padding: 24px 28px 16px;
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Heading block (mockup): tiny folder trail → H1 → count subtitle */
.home-heading { min-width: 0; }
.home-trail { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 2px; }
.home-bc-link { color: var(--text-secondary); cursor: pointer; }
.home-bc-link:hover { color: var(--accent-blue); text-decoration: underline; }
.home-bc-sep { color: var(--text-hint); }
.home-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-subtitle {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.home-toolbar-spacer { flex: 1; }

/* Type filter dropdown button (mockup — replaces the raw <select>) */
.home-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 132px;
  padding: 7px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
.home-filter-btn:hover { border-color: var(--border-strong, #cbd5e1); }

/* Segmented view toggle (grid | list share one frame) */
.home-seg {
  display: inline-flex;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}
.home-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.home-seg-btn + .home-seg-btn { border-left: 1px solid var(--border, #e5e7eb); }
.home-seg-btn:hover { background: var(--bg-hover, #ececec); }
.home-seg-btn.active {
  background: rgba(7, 157, 157, 0.12);
  color: var(--accent-blue);
}
.home-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 48px;
}

/* Research Library view — swaps with home-content inside .home-main; the
   plan list gets the SAME ground and gutters as My documents. */
#library-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#library-view.hidden { display: none; }
#library-view .project-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 48px;
  max-width: none;
  margin: 0;
  background: transparent;
}
.home-section { margin-bottom: 22px; }
.home-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.home-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-hint);
  font-size: 13.5px;
}

/* ── Folder cards ── */
.home-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.home-folder-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-soft, #f7f7f7);
  cursor: pointer;
  user-select: none;
}
.home-folder-card:hover { background: var(--bg-hover, #ececec); }
.home-folder-card-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Document cards (mockup: icon thumb zone + body) ── */
.home-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.home-doc-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-primary, #ffffff);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.home-doc-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong, #cbd5e1); }
.home-doc-thumb {
  position: relative;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle, #f5f5f5);
  border-bottom: 1px solid var(--border-light, #ebebeb);
}
.home-doc-thumb .home-card-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
}
.home-doc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.home-doc-icon { flex-shrink: 0; }
.home-doc-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.home-card-menu-btn {
  opacity: 0;
  font-size: 15px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.home-doc-card:hover .home-card-menu-btn,
.home-folder-card:hover .home-card-menu-btn,
.home-list-row:hover .home-card-menu-btn { opacity: 1; }
.home-doc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.home-doc-type {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-subtle, #f3f4f6);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.25;
}
/* File-kind chips — higher emphasis (type is important at a glance) */
.home-doc-type--pdf {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}
.home-doc-type--image {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.28);
}
.home-doc-type--video {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.32);
}
.home-doc-type--audio {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
}
.home-doc-type--file {
  color: #374151;
  background: rgba(107, 114, 128, 0.12);
  border-color: rgba(107, 114, 128, 0.28);
}
.home-doc-date { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── List display (mockup: sticky uppercase head + grid rows) ── */
.home-doc-list { font-size: 13px; }
.home-list-head,
.home-list-row {
  display: grid;
  /* Name | Type | Size | Updated | ⋮ */
  grid-template-columns: minmax(0, 1fr) 110px 88px 100px 36px;
  column-gap: 16px;
  align-items: center;
  padding: 10px 10px;
}
.home-list-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-primary, #fff);
  padding-top: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-strong, #cbd5e1);
}
.home-list-head span,
.home-list-hcol {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
}
.home-list-hcol {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.home-list-hcol:hover,
.home-list-hcol.is-active { color: var(--accent-blue, #079d9d); }
.home-list-hcol.home-list-right { text-align: right; width: 100%; }
.home-list-right { text-align: right; }
.home-list-size {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.home-list-thumb {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-subtle, #f5f5f5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-thumb-img--list,
.home-thumb-video--list {
  width: 36px;
  height: 36px;
  object-fit: cover;
  display: block;
}
.home-thumb-img--grid,
.home-thumb-video--grid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-doc-thumb--media {
  padding: 0;
  overflow: hidden;
}
.home-doc-thumb--media .home-thumb-play,
.home-list-thumb .home-thumb-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.home-list-thumb .home-thumb-play {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.home-doc-card-meta .home-doc-size {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.home-thumb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.home-thumb-wrap--list {
  width: 36px;
  height: 36px;
}
.home-thumb-pdf {
  background: #fff;
  object-fit: cover;
  object-position: top center; /* fill card/list; keep page header in frame */
}
/* Cards: fill entire top zone (no letterbox gray bars around the page). */
.home-doc-thumb--media .home-thumb-pdf {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #eef0f2;
}
.home-doc-thumb--media {
  background: #eef0f2;
}
.home-list-row {
  border-bottom: 1px solid var(--border-light, #ebebeb);
  cursor: pointer;
}
.home-list-row:hover { background: rgba(7, 157, 157, 0.05); }
.home-list-name {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.home-list-title {
  min-width: 0;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-list-type {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* List column: same chip treatment for library files */
.home-list-type.home-doc-type {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-list-owner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.home-list-owner-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong, #cbd5e1);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--bg-primary, #fff);
}
.home-list-updated {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
.home-list-menu { display: flex; justify-content: flex-end; }

/* ── Menu rows (icon / label / count / selected) ── */
.home-menu-sep {
  height: 1px;
  margin: 6px 10px;
  background: var(--border-light, #ebebeb);
}
.home-menu-header {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  user-select: none;
}
#home-menu .sc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.home-menu-icon { display: inline-flex; flex-shrink: 0; color: var(--text-secondary); }
.home-menu-label { flex: 1; min-width: 0; text-align: left; white-space: pre; }
.home-menu-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
#home-menu .home-menu-selected {
  background: rgba(7, 157, 157, 0.08);
  color: var(--accent-blue);
}

/* ── Drag & drop ── */
.home-drop-target {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
  background: rgba(7, 157, 157, 0.08) !important;
}

/* ── Menus / prompt modal ── */
.home-menu-danger { color: var(--danger, #ef4444); }
.home-prompt-box {
  width: min(380px, 90vw);
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.home-prompt-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.home-prompt-box input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--border-input, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-input, #fcfcfc);
  color: var(--text-primary);
}
.home-prompt-box input:focus { outline: 2px solid var(--border-focus); outline-offset: -1px; }
.home-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .home-sidebar { display: none; }
  .home-toolbar { padding: 10px 12px; }
  .home-content { padding: 12px; }
}

/* ── Import from Office (P4) ── */
.home-import-loading {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.home-import-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border, #e5e7eb);
  border-top-color: var(--accent-blue, #079d9d);
  border-radius: 50%;
  animation: home-import-spin 0.8s linear infinite;
}
@keyframes home-import-spin { to { transform: rotate(360deg); } }
.home-import-loading-text { font-size: 13px; color: var(--text-primary); }
.home-import-loading-name { font-size: 12px; color: var(--text-secondary, #6b7280); }

.home-import-box {
  width: min(760px, 94vw);
  max-height: 84vh;
  overflow: auto;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.home-import-src { font-weight: 400; color: var(--text-secondary, #6b7280); font-size: 13px; }
.import-pills { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.import-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid transparent;
}
.import-pill b { font-size: 15px; }
.import-pill--kept { background: rgba(7, 157, 157, 0.08); border-color: rgba(7, 157, 157, 0.3); color: #067272; }
.import-pill--converted { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.35); color: #92610a; }
.import-pill--dropped { background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.3); color: #b91c1c; }
.import-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 4px 0;
}
.import-table-wrap {
  max-height: 42vh;
  overflow: auto;
  margin-top: 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
}
.import-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.import-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: top;
  color: var(--text-primary);
  word-break: break-word;
  overflow-wrap: break-word;
}
.import-table td:nth-child(1) { width: 96px; }
.import-table td:nth-child(2) { width: 21%; }
.import-table td:nth-child(3) { width: 22%; }
.import-table tr:last-child td { border-bottom: none; }
.import-table .ir-where { color: var(--text-secondary, #6b7280); }
.import-table .ir-note { color: var(--text-secondary, #6b7280); }
.ir-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ir-badge--kept { background: rgba(7, 157, 157, 0.1); color: #067272; }
.ir-badge--converted { background: rgba(245, 158, 11, 0.12); color: #92610a; }
.ir-badge--dropped { background: rgba(220, 38, 38, 0.09); color: #b91c1c; }

/* L22 — upload progress */
.home-upload-bar {
  width: min(320px, 70vw);
  height: 6px;
  margin: 14px auto 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}
.home-upload-fill {
  display: block;
  height: 100%;
  background: var(--accent-blue, #079d9d);
  border-radius: 99px;
  transition: width 80ms linear;
}
.home-upload-pct {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  text-align: center;
}

/* L22 — library file preview screen */
.screen-file-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-primary, #fff);
}
.screen-file-preview.hidden { display: none !important; }
.fp-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #525659;
  overflow: auto;
}
.fp-pdf-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #525659;
}
.fp-image {
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.fp-media {
  max-width: 90%;
  max-height: 80%;
}
.fp-unknown {
  text-align: center;
  color: #fff;
  padding: 32px;
}
.fp-lens-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}
.hestini-lens-btn.lens-active {
  background: rgba(7, 157, 157, 0.15);
  color: var(--accent-blue, #079d9d);
  border-color: var(--accent-blue, #079d9d);
}
.hestini-lens-lang {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-primary, #fff);
}