/* Foundry: Foldr — LT app.css
   - Same structure; relies on LT variables from base.css
*/
@import "./features/toolbar.css";
@import "./features/modals.css";
@import "./features/tree.css";
@import "./features/grid.css";   /* grid specifics live here */
@import "./features/list.css";
@import "./features/preview.css";
@import "./features/notes.css";
@import "./features/dnd.css";
@import "./features/toast.css";

/* Glue (identical; colors come from LT tokens) */
.app-body { display: flex; min-height: calc(100vh - 180px); }
.sidebar { width: 280px; border-right: none; display: flex; flex-direction: column; background: transparent; }
.pane-head { padding: 14px 16px; border-bottom: none; }
.ws-label { font-weight: 500; color: var(--muted); }
.content { flex:1; min-width:0; display:flex; flex-direction:column; margin: 8px 8px 32px 8px; border-radius: 24px; background: rgba(243, 245, 242,0.4)}
.breadcrumb { display:flex; gap:10px; align-items:center;}
.breadcrumb .trail { display:inline-flex; gap:6px; flex-wrap:wrap; }
.breadcrumb .trail .crumb {
  display: inline-flex; gap: 6px; align-items:center; padding:6px 10px; border-radius:999px;
  border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.04); color: var(--ink);
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.small-important { font-size: 14px; color: var(--ink); }
#deleteSummary .small{font-size: 14px; color: var(--ink); }
.btn.ghost { background: #00000008; border: 1px solid var(--brand1); color: var(--brand1)}
.btn.remove { background: #00000008}
input[type="search"] {
  height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(0,0,0,.04); color: var(--ink); padding: 0 12px; outline: none;
}

/* === Global icon sizing (non-toolbar) =========================
   Grid/list/components can override locally as needed. */
.content .icon svg,
.modal .icon svg,
.tree .icon svg,
.file-thumb svg,
.table-icon svg {
  height: 32px;
  fill: var(--brand1);
}

.file-thumb svg{width: 52px !important; height: auto !important;}

/* Keep toolbar icons as they were */
.toolbar .icon svg { fill: #f3f5f2; }

/* Keep badge icons small by default anywhere meta-badges appear.
   (Grid has stricter 18×18 rules locally in grid.css.) */
.meta-badges .icon svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* === List view niceties (left here; grid lives in grid.css) === */
#view-list th, #view-list td { vertical-align: middle; }
#view-list .col-name { display: inline-flex; align-items: center; gap: 8px; width: 100%}
.table-icon { display: inline-flex; align-items: center; }

/* Tree polish */
.tree ul { list-style: none; margin: 0; padding: 6px 8px; }
.tree .tree-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 99px; cursor: pointer; margin: 8px;
}

.tree .badge { margin-left: auto; font-size: 11px; opacity: 0.7; }

/* Preview tweaks (component owns most styles in preview.css) */
#previewModal footer > #openNotesBtn,
#previewModal footer > #downloadFromPreviewBtn { display: none; }
.preview-body { padding: 16px; }
.preview-unavailable { opacity: 0.75; font-style: italic; }

/* Workspaces modal: hide WS search (until implemented) */
#workspacesModal #wsSearch { display: none; }
#wsNameText {font-size: 17px; font-weight: 500; color:var(--brand1)}

#folderTree .tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Caret button */
#folderTree .twisty {
  width: 24px;              /* bigger hit-area */
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;       /* center vertically */
  justify-content: center;   /* center horizontally */
  line-height: 0;            /* avoid baseline offset */
  color: var(--muted);
}

/* The actual SVG caret */
#folderTree .twisty svg {
  display: block;
  width: 16px;               /* caret size; adjust as you like */
  height: 16px;
  transform-origin: 50% 50%;
}

/* Spacer when no children, keeps alignment */
#folderTree .twisty.spacer {
  cursor: default;
  pointer-events: none;
}

/* Selected row tint */
.tree-item.is-selected .twisty { color: var(--brand1); }

/* Tree list reset */
#folderTree,
#folderTree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#folderTree > ul { padding-left: 0; }
#folderTree ul ul { padding-left: 16px; }

/* Keep header/footer fixed; only the list in the section scrolls */
#shareViewerModal .card {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#shareViewerModal .card > header,
#shareViewerModal .card > footer {
  flex: 0 0 auto; /* pinned */
}

#shareViewerModal .card > section {
  flex: 1 1 auto;           /* take remaining space */
  display: flex;
  flex-direction: column;
  min-height: 0;            /* critical for flex overflow */
}

#shareViewerList {
  flex: 1 1 auto;           /* grow to fill the section */
  min-height: 0;            /* critical for scroll to engage */
  overflow: auto;           /* scrolls when long */
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;       /* room for scrollbar */
}

/* Optional: keep the expiry line visible under the list */
#shareViewerExpiry {
  flex: 0 0 auto;
}

/* Selection affordance (hidden until Selection Mode) */
.selection-mode [data-folder-id] .select-overlay { display: inline-grid; }
[data-folder-id] {
  position: relative; /* ensure overlay positions inside item */
}
.select-overlay{
  display:none;
  position:absolute; inset:auto auto 8px 8px; /* bottom-left by default */
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:var(--btnbg);
  place-items:center; font-size:16px; line-height:1;
  user-select:none; pointer-events:none; /* visual only; taps handled by item */
}
.selected .select-overlay{ background: var(--brand1); color: #fff; border-color: transparent; }

#view-grid, #listBody { touch-action: manipulation; }