/* yyzedportal.com — the Shared Drive panel, plus the two "coming soon" panels beside it.
   Loaded AFTER public.css and allow-listed separately (server/main.py
   vendor_portal_host_boundary), so it may only ADD rules: every colour here comes from
   public.css's custom properties, and nothing in this file restyles an element the rest of
   the portal owns. Everything is prefixed .vpd- (drive) or .vp-soon- (the placeholders).

   Same conservative rules as public.css, and for the same reason — this is served to external
   companies on browsers nobody here can measure, with no build step: no :has(), no flex `gap`
   carrying spacing on its own (margins do that), explicit offsets instead of `inset`, a plain
   fallback before any clamp(), and no colour that only exists in a media query.

   Sections: 1 toolbar + new-folder form · 2 breadcrumb · 3 table rows, icons, tags
             4 row menu · 5 dialogs (scrim/modal/move tree) · 6 upload queue + drop zone
             7 RFI / Site Instruction placeholders · 8 responsive */

/* ---------------------- 1. Toolbar, search, new-folder form ---------------------- */
.vpd-head-acts { display: flex; flex: none; align-items: center; flex-wrap: wrap; }
.vpd-head-acts .vp-link-button { margin-left: 2px; }
.vpd-head-acts .vp-link-button.on { color: var(--deep); background: var(--mint); }
.vpd-head-acts .vp-link-button:disabled { opacity: .45; cursor: default; background: transparent; }

.vpd-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
}
/* public.css sizes .vp-primary at width:100% and gives every input a 15px bottom margin —
   both are right for the auth card and wrong on a toolbar row. Overridden by load order:
   same specificity, later sheet. */
.vpd-btn {
  width: auto; flex: none; margin: 0 9px 8px 0; padding: 9px 14px;
  font-size: 12px; border-radius: 9px; white-space: nowrap;
}
.vpd-search { flex: 1 1 220px; min-width: 170px; margin-bottom: 8px; }
.vpd-search input { margin-bottom: 0; padding: 9px 13px; font-size: 13px; }
/* The real control for "Upload files"; the visible button clicks it. Kept in the layout (not
   display:none) so a browser still reports it to assistive tech and can focus it. */
.vpd-file {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}

.vpd-newform {
  margin: 14px 0 4px; padding: 14px 16px;
  border: 1px solid #cfe1dc; border-radius: 12px; background: #f6fbf9;
}
.vpd-newform label { margin-bottom: 7px; }
.vpd-newform-row { display: flex; flex-wrap: wrap; align-items: center; }
.vpd-newform-row input {
  flex: 1 1 220px; min-width: 160px; width: auto;
  margin: 0 9px 8px 0; padding: 9px 13px; font-size: 13px;
}

.vpd-alert {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 10px;
  border: 1px solid #e5c2b9; background: #fff1ed; color: var(--danger);
  font-size: 12.5px; line-height: 1.5;
}
.vpd-alert.ok { color: #155f4f; background: #e6f6f0; border-color: #b8dfd4; }
.vpd-alert.note { color: #3c4f55; background: #f1f5f4; border-color: #d2dedb; }
.vpd-note { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* --------------------------------- 2. Breadcrumb --------------------------------- */
.vpd-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 14px 0 2px; min-height: 26px;
}
.vpd-crumb {
  border: 0; background: transparent; padding: 2px 0; margin: 0 2px 4px 0;
  color: var(--teal); font-size: 12px; font-weight: 850;
}
.vpd-crumb:hover { color: var(--deep); text-decoration: underline; }
.vpd-crumb.here { color: var(--ink); }
.vpd-crumb.here:hover { text-decoration: none; }
.vpd-crumb-sep {
  margin: 0 7px 4px 5px; color: #a9b7b9; font-size: 11px; font-weight: 700;
}
.vpd-searching {
  margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700;
}

/* ---------------------------- 3. The one listing table ---------------------------- */
.vpd-table { min-width: 700px; }
.vpd-table td { vertical-align: middle; }
.vpd-row-folder td, .vpd-row-file td { cursor: default; }
.vpd-row-folder:hover td, .vpd-row-file:hover td { background: #f7fbfa; }
.vpd-row-folder td { cursor: pointer; }

.vpd-namecell { display: flex; align-items: center; min-width: 0; }
/* A flex item defaults to min-width:auto, which lets one long file name push the column
   wider than its cell. The wrapper opts out for the name and its note together. */
.vpd-namewrap { min-width: 0; }
.vpd-name {
  border: 0; background: transparent; padding: 0; text-align: left; min-width: 0;
  color: var(--ink); font-size: 12.5px; font-weight: 800; overflow-wrap: break-word;
}
.vpd-name:hover { color: var(--teal); text-decoration: underline; }
.vpd-name:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.vpd-filename {
  min-width: 0; color: var(--ink); font-size: 12.5px; font-weight: 800;
  overflow-wrap: break-word;
}
.vpd-subnote { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }

/* A folder drawn in CSS: no icon font and no image file can be loaded here — the public
   host serves this sheet, public.css, the two scripts and the logo, nothing else. */
.vpd-ficon {
  position: relative; flex: none; display: inline-block;
  width: 21px; height: 16px; margin: 4px 11px 0 0;
  border-radius: 0 3px 3px 3px; background: #e3c98f;
}
.vpd-ficon::before {
  content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 5px;
  border-radius: 3px 3px 0 0; background: #e3c98f;
}
.vpd-ext {
  flex: none; display: inline-block; min-width: 34px; margin-right: 11px; padding: 4px 5px;
  border-radius: 5px; background: var(--mint); border: 1px solid #c6e4db; color: #0a6c65;
  font-size: 8.5px; font-weight: 900; letter-spacing: .5px; text-align: center;
  text-transform: uppercase;
}
/* Drawings and models are the ones people scan a long list for, so they get their own tint. */
.vpd-ext.draw { background: #eaf1fa; border-color: #c8d9ee; color: #2b5680; }
.vpd-ext.image { background: #f6efe0; border-color: #e6d6b4; color: #7a5f22; }
.vpd-ext.mail { background: #f3eef7; border-color: #ddd0e7; color: #5c4472; }

.vpd-tags { display: flex; flex-wrap: wrap; }
.vpd-tag {
  display: inline-block; margin: 0 5px 4px 0; padding: 3px 8px; border-radius: 999px;
  background: #f0f4f3; border: 1px solid #dde6e4; color: #4a5b60;
  font-size: 10px; font-weight: 800; overflow-wrap: break-word;
}
.vpd-dash { color: #a9b7b9; }

.vpd-more {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  border-radius: 8px; padding: 3px 8px; font-size: 15px; font-weight: 800; line-height: 1.1;
}
.vpd-more:hover { border-color: #cfdedb; background: #fff; color: var(--deep); }
.vpd-more:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.vpd-more.open { border-color: var(--teal); background: #fff; color: var(--deep); }

/* ----------------------------- 4. The per-row menu ----------------------------- */
/* Fixed, and appended outside the table: .vp-table-scroll is an overflow-x box, which would
   clip an absolutely-positioned menu at its edge. Same trap the employee app solves with
   positionFloatMenu(); this is the portal's standalone equivalent. */
.vpd-menu {
  position: fixed; z-index: 620; left: 0; top: 0; min-width: 178px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow);
}
.vpd-menu button, .vpd-menu a {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 9px 11px; border-radius: 8px; color: var(--ink);
  font-size: 12.5px; font-weight: 750; text-decoration: none;
}
.vpd-menu button:hover, .vpd-menu a:hover { background: #f1f6f5; color: var(--deep); }
.vpd-menu button:focus, .vpd-menu a:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
.vpd-menu .danger { color: var(--danger); }
.vpd-menu .danger:hover { background: #fff1ed; color: var(--danger); }
.vpd-menu-sep { height: 1px; margin: 5px 4px; background: var(--line); }

/* ------------------------- 5. Dialogs: scrim, modal, tree ------------------------- */
.vpd-scrim {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(18, 42, 46, .42);
}
.vpd-modal {
  width: 100%; max-width: 470px; max-height: 86vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 17px;
  padding: 22px 24px; box-shadow: var(--shadow);
}
.vpd-modal h3 {
  margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif;
  font-weight: 500; font-size: 22px;
}
.vpd-modal-body { font-size: 13px; line-height: 1.6; color: var(--ink); }
.vpd-modal-body p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.vpd-modal-body p.strong { color: var(--ink); font-weight: 750; }
.vpd-modal-body input { margin-bottom: 6px; }
.vpd-modal-body label { margin-top: 4px; }
/* A dialog's own complaint — the panel's alert line is behind the scrim while it is open. */
.vpd-modal-msg {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 9px;
  border: 1px solid #e5c2b9; background: #fff1ed; color: var(--danger);
  font-size: 12px; font-weight: 750;
}
.vpd-modal-acts {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  margin-top: 18px;
}
.vpd-modal-acts .vpd-btn { margin: 0 0 0 9px; }
.vpd-modal-acts .vpd-btn.danger {
  background: linear-gradient(110deg, #b0492f, #9a3e32); box-shadow: none;
}
.vpd-modal-acts .vpd-btn.danger:hover { background: #8a3327; }

.vpd-access-list { list-style: none; margin: 0; padding: 0; }
.vpd-access-list li {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 750;
}
.vpd-access-list li span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }

.vpd-tree {
  max-height: 260px; overflow-y: auto; margin: 4px 0 2px;
  border: 1px solid var(--line); border-radius: 11px; padding: 7px;
}
.vpd-tree-list { list-style: none; margin: 0; padding: 0 0 0 15px; }
.vpd-tree-list.root { padding-left: 0; }
.vpd-tree-row { display: flex; align-items: center; }
.vpd-twisty {
  flex: none; width: 21px; height: 21px; margin-right: 2px; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 10px; line-height: 1;
}
.vpd-twisty:hover { background: #eef3f2; color: var(--deep); }
.vpd-twisty.blank { visibility: hidden; }
.vpd-pick {
  flex: 1 1 auto; min-width: 0; text-align: left; border: 1px solid transparent;
  background: transparent; border-radius: 8px; padding: 6px 9px;
  color: var(--ink); font-size: 12.5px; font-weight: 750; overflow-wrap: break-word;
}
.vpd-pick:hover { background: #f1f6f5; }
.vpd-pick.chosen { background: var(--mint); border-color: #b5ddd3; color: var(--deep); font-weight: 850; }
.vpd-pick:disabled { color: #a9b7b9; background: transparent; cursor: default; }
.vpd-tree-note { margin: 6px 0 0; padding-left: 4px; color: var(--muted); font-size: 11px; }

/* --------------------- 6. Upload queue + panel-wide drop zone --------------------- */
/* The rows themselves reuse public.css's .vp-queue-row / .vp-track set — same protocol,
   same look as "Send to YYZed", nothing re-invented. */
.vpd-queue { display: block; }
.vpd-queue .vp-queue-row:first-child { margin-top: 14px; }

.vpd-drop { position: relative; }
.vpd-drop.hot::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px;
  border: 2px dashed var(--teal); border-radius: 14px; background: rgba(223, 243, 237, .55);
  pointer-events: none;
}
.vpd-drop-hint {
  display: none; position: absolute; left: 0; right: 0; top: 50%; z-index: 2;
  margin: -18px 0 0; text-align: center; color: var(--deep);
  font-size: 13px; font-weight: 850; pointer-events: none;
}
.vpd-drop.hot .vpd-drop-hint { display: block; }

/* ---------------------- 7. RFI / Site Instruction placeholders ---------------------- */
/* These three classes live here rather than in public.css because this sheet ships with the
   panels they dress; public.css is the pre-pivot portal's and stays as it is. */
.vp-soon-badge {
  display: inline-block; margin: 0 0 14px; padding: 5px 11px; border-radius: 999px;
  background: var(--sand); color: #765b2d;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .9px;
}
.vp-soon-list { margin: 0 0 20px; padding-left: 20px; color: #3d5157; }
.vp-soon-list li { margin-bottom: 8px; font-size: 12.5px; line-height: 1.55; }
.vp-soon-mock {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fafcfb; opacity: .72;
}
.vp-soon-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  padding: 12px 14px; border-bottom: 1px solid #edf0ef;
}
.vp-soon-row:last-child { border-bottom: 0; }
.vp-soon-row span { color: var(--muted); font-size: 11.5px; }
.vp-soon-row span:first-child {
  flex: none; width: 68px; color: var(--teal); font-size: 10px; font-weight: 900;
  letter-spacing: .5px;
}
.vp-soon-row span:nth-child(2) { flex: 1 1 190px; min-width: 0; color: #3d5157; font-weight: 750; }
.vp-soon-row span:last-child { flex: none; margin-left: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }

/* --------------------------------- 8. Responsive --------------------------------- */
@media (max-width: 720px) {
  /* public.css already turns the workspace tab strip into a nowrap scroller here, which is
     what carries the seven tabs on a phone. This only adds the momentum scrolling the file
     lists get (.vp-table-scroll) — no layout of public.css's is changed. */
  .vp-nav { -webkit-overflow-scrolling: touch; }
  .vpd-head-acts { width: 100%; margin-top: 6px; }
  .vpd-head-acts .vp-link-button { margin: 0 6px 0 0; padding: 6px 8px; }
  .vpd-search { flex-basis: 100%; margin-right: 0; }
  .vpd-modal { padding: 18px; border-radius: 14px; }
  .vpd-modal-acts .vpd-btn { flex: 1 1 auto; margin: 0 0 0 8px; text-align: center; }
}
@media (max-width: 560px) {
  .vpd-btn { flex: 1 1 auto; margin-right: 8px; text-align: center; }
  .vpd-newform { padding: 12px 13px; }
  .vpd-newform-row input { flex-basis: 100%; margin-right: 0; }
  .vpd-menu { min-width: 164px; }
  .vp-soon-row span:first-child { width: 100%; margin-bottom: 4px; }
  .vp-soon-row span:last-child { margin: 4px 0 0; }
}