/* ==========================================================================
   CareMetrix — Drive & Documents (Media Library)
   File-manager layout: left sidebar nav (Recent/My Documents/Shared With
   Me/Shared With Others/Favorites/Trash) + storage meter, a search/filter/
   view-toggle toolbar, and a main area that renders either a grid of
   folder/file icon cards or a single sortable table (list view). Same
   page-scoped-CSS + IIFE + mountOverlays() convention as Timesheets.
   ========================================================================== */

.drv { --drv-pink: #D0479A; --drv-pink-soft: #FBEAF4; }
.page.drv { gap: 0; }

.drv-pagepath { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }

/* ---------------------------------------------------------- new dropdown */

.drv-newwrap { position: relative; }
.drv-newmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 170px; padding: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); display: none;
}
.drv-newmenu.is-open { display: block; }
.drv-newmenu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: left; transition: background .16s var(--ease); }
.drv-newmenu button svg { width: 16px; height: 16px; flex: none; }
.drv-newmenu button:hover { background: var(--violet-bg); color: var(--brand-purple); }

.drv-newsplit { display: flex; align-items: center; gap: 10px; }
.drv-newsplit[hidden] { display: none; }

.drv-headrow { margin-bottom: 16px; }
.drv-headrow h1 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; color: var(--text); }
.drv-headrow p { margin-top: 3px; font-size: 12.5px; color: var(--text-2); }

/* ------------------------------------------------------------------ layout */

.drv-layout { display: flex; align-items: flex-start; gap: 20px; }

.drv-sidebar {
  flex: 0 0 232px; display: flex; flex-direction: column; gap: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; position: sticky; top: 0;
}

.drv-nav { display: flex; flex-direction: column; gap: 3px; }
.drv-nav button {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  text-align: left; transition: all .14s var(--ease);
}
.drv-nav button svg { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: color .14s var(--ease); }
.drv-nav button:hover { background: var(--surface-2); }
.drv-nav button.is-active { background: var(--violet-bg); color: var(--brand-purple); font-weight: 600; }
.drv-nav button.is-active svg { color: var(--brand-purple); }

.drv-storage { padding: 14px 12px 4px; border-top: 1px solid var(--border); }
.drv-storage__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
.drv-storage__head svg { width: 16px; height: 16px; color: var(--brand-purple); }
.drv-storage__bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.drv-storage__bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad-brand); }
.drv-storage__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 11px; color: var(--text-3); font-weight: 600; }
.drv-storage__view { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand-purple); }

.drv-main { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px 20px; }

/* ----------------------------------------------------------------- toolbar */

.drv-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.drv-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 240px; max-width: 480px; }
.drv-search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.drv-search input {
  width: 100%; box-sizing: border-box;
  font-size: 13px; padding: 9px 14px 9px 40px;
  border: 1.5px solid var(--form-border); border-radius: var(--r-pill);
  background: var(--surface); outline: none; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.drv-search input:focus { border-color: var(--form-focus); box-shadow: 0 0 0 3px var(--form-focus-ring); }

.drv-filterbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1.5px solid var(--drv-pink); border-radius: var(--r-btn);
  background: var(--surface); color: var(--drv-pink);
  font-size: 13px; font-weight: 700; flex: none; transition: all .14s var(--ease);
}
.drv-filterbtn:hover { background: var(--drv-pink-soft); }
.drv-filterbtn svg { width: 16px; height: 16px; }
.drv-filterbtn.is-open { background: var(--drv-pink-soft); }

.drv-viewtoggle { display: flex; align-items: center; gap: 2px; flex: none; background: var(--surface-3); border-radius: var(--r-btn); padding: 3px; }
.drv-viewtoggle button { width: 34px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.drv-viewtoggle button svg { width: 17px; height: 17px; }
.drv-viewtoggle button.is-active { background: var(--drv-pink); color: #fff; }

/* inline collapsible filter row, same shape as Timesheets' .tst-filters */
.drv-filters { padding: 16px 18px; margin: -4px 0 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.drv-filters[hidden] { display: none; }
.drv-filters__row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.drv-filter { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 160px; }
.drv-filter__label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.drv-filters__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }

.drv-sectionlabel { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 12px; }
.drv-sectionlabel:first-child { margin-top: 0; }
.drv-empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--text-3); }

/* ----------------------------------------------------- folder breadcrumb */

.drv-crumbbar { margin-bottom: 14px; }
.drv-crumbbar .breadcrumb span:last-child { color: var(--brand-purple); font-weight: 700; }
.drv-crumbbar .breadcrumb button { color: var(--text-3); font-weight: 600; }
.drv-crumbbar .breadcrumb button:hover { color: var(--brand-purple); }

/* -------------------------------------------------------- trash banner */

.drv-trashbanner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--red-bg); color: var(--red); border-radius: var(--r-md);
  padding: 10px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600;
}
.drv-trashbanner[hidden] { display: none; }
.drv-emptytrash { background: var(--red); color: #fff; border: none; border-radius: var(--r-btn); padding: 7px 14px; font-size: 12.5px; font-weight: 700; flex: none; }
.drv-emptytrash:hover { background: #C81E1E; }

/* -------------------------------------------------------------- icon cards */

.drv-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.drv-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px; background: var(--surface); cursor: pointer;
  transition: all .14s var(--ease);
}
.drv-card:hover { border-color: var(--brand-violet); box-shadow: var(--shadow-sm); }

.drv-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.drv-card__icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.drv-card__icon svg { width: 22px; height: 22px; }

.drv-card__top-actions { display: flex; align-items: center; gap: 2px; }
.drv-card__star, .drv-card__more {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-3); transition: all .14s var(--ease);
}
.drv-card__star svg, .drv-card__more svg { width: 16px; height: 16px; }
.drv-card__star:hover, .drv-card__more:hover { background: var(--violet-bg); color: var(--brand-purple); }
.drv-card__star.is-active { color: #F5A623; }
.drv-card__star.is-active svg { fill: #F5A623; }

.drv-card__name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; }

.drv-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.drv-card__owners { display: flex; }
.drv-card__owners .drv-avatar { margin-left: -8px; border: 2px solid var(--surface); }
.drv-card__owners .drv-avatar:first-child { margin-left: 0; }
.drv-card__uploader { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.drv-card__date { font-size: 11px; color: var(--text-3); font-weight: 600; white-space: nowrap; }

.drv-avatar {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: #fff; flex: none;
}
.drv-avatar--md { width: 30px; height: 30px; font-size: 11.5px; }

/* ------------------------------------------------------------------ owner avatar popover (overlapping stack) */
.drv-ownerstack { position: relative; display: inline-flex; }
.drv-ownerstack__pop {
  position: fixed; z-index: 130; min-width: 180px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); display: none;
}
.drv-ownerstack__pop.is-open { display: block; }
.drv-ownerstack__pop-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.drv-ownerstack__pop-item:hover { background: var(--surface-2); }

/* -------------------------------------------------------------- list view */

.drv-listview { margin-top: 2px; }
.drv-listsummary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.drv-listpagination { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.drv-listsummary__perpage { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.drv-listsummary__perpage select { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; background: var(--surface); color: var(--text); }

.drv-tablewrap { border: 1px solid var(--commontable2-cell-border); border-radius: 12px; overflow-x: auto; }
.drv-tablewrap thead tr th:first-child { border-top-left-radius: 11px; }
.drv-tablewrap thead tr th:last-child { border-top-right-radius: 11px; }
.drv-table { min-width: 760px; }
.drv-th--check { width: 1%; }
.drv-table th.t-right, .drv-table td.t-right { width: 1%; white-space: nowrap; }
.drv-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-purple); cursor: pointer; }

.drv-table tbody td:first-child { position: relative; padding-left: 22px; }
.drv-table tbody td:first-child::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #E24FA8, #9B5CF6);
}

.drv-filecell { display: flex; align-items: center; gap: 12px; }
.drv-filecell__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.drv-filecell__icon svg { width: 18px; height: 18px; }
.drv-filecell__name { font-size: 13px; font-weight: 700; color: var(--text); }
.drv-filecell__sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.drv-person { display: flex; align-items: center; gap: 9px; }
.drv-person__name { font-size: 12.5px; font-weight: 600; color: var(--text-2); }

.drv-rowactions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.drv-iconbtn { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; color: var(--text-3); display: inline-grid; place-items: center; cursor: pointer; transition: all .16s var(--ease); }
.drv-iconbtn svg { width: 16px; height: 16px; }
.drv-iconbtn:hover { background: var(--violet-bg); color: var(--brand-purple); }
.drv-iconbtn--danger:hover { background: var(--red-bg); color: var(--red); }

.drv-morebtn { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; color: var(--text-3); display: inline-grid; place-items: center; cursor: pointer; transition: all .16s var(--ease); }
.drv-morebtn svg { width: 18px; height: 18px; }
.drv-morebtn:hover, .drv-morebtn[aria-expanded="true"] { background: var(--violet-bg); color: var(--brand-purple); }

.drv-rowmenu { position: fixed; z-index: 120; min-width: 170px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); display: none; }
.drv-rowmenu.is-open { display: block; }
.drv-rowmenu__item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: left; transition: background .16s var(--ease); }
.drv-rowmenu__item svg { width: 16px; height: 16px; flex: none; }
.drv-rowmenu__item:hover { background: var(--violet-bg); color: var(--brand-purple); }
.drv-rowmenu__item--danger { color: var(--red); }
.drv-rowmenu__item--danger:hover { background: var(--red-bg); }

/* ------------------------------------------------------------- drawers -- */

.drv-drawerhead p { margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.85); }
.drv .field { margin-bottom: 16px; }
.drv .field__label b { color: var(--red); font-weight: 700; margin-left: 2px; }

.drv-dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  padding: 30px 20px; background: var(--surface-2);
}
.drv-dropzone svg { width: 28px; height: 28px; color: var(--brand-purple); margin-bottom: 4px; }
.drv-dropzone b { font-size: 13.5px; color: var(--text); }
.drv-dropzone span { font-size: 11.5px; color: var(--text-3); max-width: 280px; }
.drv-dropzone .btn { margin-top: 8px; }

.drv-uploadqueue { margin-bottom: 6px; }
.drv-uploadrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.drv-uploadrow__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.drv-uploadrow__icon svg { width: 18px; height: 18px; }
.drv-uploadrow__body { flex: 1; min-width: 0; }
.drv-uploadrow__name { font-size: 13px; font-weight: 700; color: var(--text); }
.drv-uploadrow__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); margin: 2px 0 6px; }
.drv-uploadrow__meta b { font-weight: 700; }
.drv-uploadrow__meta b.is-done { color: var(--green); }
.drv-uploadrow__bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.drv-uploadrow__bar span { display: block; height: 100%; background: var(--grad-brand); }
.drv-uploadrow__remove { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.drv-uploadrow__remove:hover { background: var(--red-bg); color: var(--red); }

/* --------------------------------------------------------- properties -- */

.drv-proptabs { display: flex; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.drv-proptabs button { padding: 12px 0; font-size: 13.5px; font-weight: 700; color: var(--text-3); border-bottom: 2px solid transparent; }
.drv-proptabs button.is-active { color: var(--brand-purple); border-bottom-color: var(--brand-purple); }

.drv-propicon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin: 4px auto 22px; }
.drv-propicon svg { width: 28px; height: 28px; }

.drv-prop__label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.drv-prop__access { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.drv-prop__access-sub { font-size: 12px; color: var(--text-3); }

.drv-prop__security { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.drv-prop__security b { font-size: 13px; color: var(--text); }
.drv-prop__security span { font-size: 11.5px; color: var(--text-3); }

.drv-propfield { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.drv-propfield span { color: var(--text-3); font-weight: 600; }
.drv-propfield b { color: var(--text); font-weight: 700; }
.drv-locationpill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.drv-charcount { display: block; text-align: right; font-size: 10.5px; color: var(--text-3); margin-top: 4px; }

.drv-activity { display: flex; flex-direction: column; gap: 4px; }
.drv-activity__group { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 8px; }
.drv-activity__group:first-child { margin-top: 0; }
.drv-activity__item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.drv-activity__text { font-size: 13px; color: var(--text); }
.drv-activity__text b { font-weight: 600; }
.drv-activity__time { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ------------------------------------------------------------ share modal */

.drv-sharemodal { position: fixed; inset: 0; z-index: 155; padding: 20px; display: none; align-items: center; justify-content: center; background: rgba(36, 28, 60, .45); }
.drv-sharemodal.show { display: flex; }
.drv-sharemodal__box { width: 480px; max-width: 100%; max-height: 86vh; overflow-y: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 26px; }
.drv-sharemodal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.drv-sharemodal__head h3 { font-size: 16.5px; font-weight: 600; }
.drv-shareadd__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--violet-bg); border-radius: 10px; padding: 10px 12px; }
.drv-shareadd__row[hidden] { display: none; }
.drv-shareadd__row span { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
.drv-shareadd__row select { border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 8px; font-size: 12px; background: var(--surface); }

.drv-personrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.drv-personrow__body { flex: 1; min-width: 0; }
.drv-personrow__name { font-size: 13px; font-weight: 700; color: var(--text); }
.drv-personrow__email { font-size: 11px; color: var(--text-3); }
.drv-personrow select { border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 8px; font-size: 12px; background: var(--surface); }
.drv-personrow__owner { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--violet-bg); color: var(--brand-purple); font-size: 11px; font-weight: 600; }
.drv-personrow__remove { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.drv-personrow__remove:hover { background: var(--red-bg); color: var(--red); }

.drv-sharemodal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* --------------------------------------------------------------- modal -- */

.drv-modal { position: fixed; inset: 0; z-index: 150; padding: 20px; display: none; align-items: center; justify-content: center; background: rgba(36, 28, 60, .45); }
.drv-modal.show { display: flex; }
.drv-modal__box { width: 420px; max-width: 100%; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 26px; }
.drv-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--red-bg); color: var(--red); margin-bottom: 14px; }
.drv-modal__icon svg { width: 20px; height: 20px; }
.drv-modal h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 8px; }
.drv-modal p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0; }
.drv-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.drv-modal .btn--danger-solid { background: var(--red); color: #fff; border: none; }

@media (max-width: 900px) {
  .drv-layout { flex-direction: column; }
  .drv-sidebar { flex: none; width: 100%; position: static; }
  .drv-toolbar, .drv-filters__row, .drv-listsummary { flex-direction: column; align-items: stretch; }
  .drv-filters__actions { margin-left: 0; }
}