/* Evidence Vault — client portal widget + standalone upload page.
   Loosely matches the zd- prefixed styling already used for the ticket
   sidebar (includes/zendesk/css/zendesk.css) rather than duplicating it. */

.ev-vault-box { }
.ev-vault-header { margin-bottom: 8px; }
.ev-vault-subtitle { display: block; font-size: 11px; color: #68737d; margin-top: 2px; }

/* Every real <button> this module renders gets the same explicit,
   !important-guarded reset. Two of these previously also carried a bare
   "button" class (removed in includes/evidence-vault/sidebar.php and
   assets/evidence-vault.js) — that class is meant for wp-admin, where
   WordPress core styles it; on the public site it resolves to whatever the
   theme defines .button as, which is where the mismatched blue fill and
   pink border came from. Fixing that class removal is the real fix; the
   !important here is a second, independent guard so these small,
   JS-injected controls render the same regardless of what other global
   button rules exist on a given page — the modal in particular is
   appended straight to <body>, outside the theme's own content wrappers. */
.ev-vault-start-btn,
.ev-vault-pick-btn,
.ev-vault-eviction-link {
  display: block; width: 100%; font-family: inherit !important;
  background: #3d5a2a !important; color: #fff !important; border: none !important;
  border-radius: 6px !important; padding: 10px 14px !important; font-size: 13px !important;
  text-decoration: none !important; cursor: pointer; box-shadow: none !important;
}
.ev-vault-start-btn:hover,
.ev-vault-pick-btn:hover,
.ev-vault-eviction-link:hover { background: #2d4520 !important; }
.ev-vault-start-btn:disabled,
.ev-vault-pick-btn:disabled,
.ev-vault-eviction-link:disabled { background: #aaa !important; cursor: default; }
.ev-vault-pick-btn { display: inline-block; width: auto; padding: 6px 12px !important; font-size: 12px !important; }

.ev-vault-widget { margin-top: 10px; }

.ev-vault-banner { padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 10px; }
.ev-vault-banner-error { background: #fce4e4; color: #c62828; }
.ev-vault-banner-info { background: #e8f0fe; color: #1a56db; }

.ev-vault-drop {
  border: 2px dashed #c7ccd1; border-radius: 6px; padding: 18px 10px; text-align: center;
  color: #68737d; cursor: pointer; font-size: 12px; display: block;
}
.ev-vault-drop.ev-vault-drag { border-color: #3d5a2a; background: #f0f5ec; }
.ev-vault-drop input[type="file"] { display: none; }
.ev-vault-drop-label { margin-bottom: 4px; }
.ev-vault-drop-hint { font-size: 11px; color: #9aa5b1; margin-top: 4px; }

.ev-vault-files { margin-top: 8px; }
.ev-vault-file { border-top: 1px solid #eef0f2; padding: 8px 0; font-size: 12px; }
.ev-vault-file:first-child { border-top: none; }
.ev-vault-file-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ev-vault-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-vault-file-size { color: #68737d; flex-shrink: 0; }
.ev-vault-bar-track { background: #eef0f2; border-radius: 4px; height: 5px; overflow: hidden; }
.ev-vault-bar-fill { background: #3d5a2a; height: 100%; width: 0%; transition: width .2s; }
.ev-vault-file-error .ev-vault-bar-fill { background: #c0392b; }
.ev-vault-file-done .ev-vault-bar-fill { background: #2e7d32; }
.ev-vault-status-text { font-size: 11px; color: #68737d; margin-top: 3px; }
.ev-vault-file-error .ev-vault-status-text { color: #c0392b; }
.ev-vault-file-done .ev-vault-status-text { color: #2e7d32; }
.ev-vault-retry-btn {
  font-size: 11px; background: none !important; border: 1px solid #c0392b !important;
  color: #c0392b !important; border-radius: 4px; padding: 2px 6px; cursor: pointer; box-shadow: none !important;
}

.ev-vault-list { margin-top: 12px; border-top: 1px solid #eef0f2; padding-top: 8px; }
.ev-vault-empty { color: #9aa5b1; font-size: 12px; padding: 6px 0; }
.ev-vault-evidence-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid #f5f6f7; }
.ev-vault-evidence-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ev-vault-evidence-meta { color: #68737d; font-size: 11px; flex-shrink: 0; }
.ev-vault-evidence-row a { color: #3d5a2a; text-decoration: none; flex-shrink: 0; }
.ev-vault-evidence-row a:hover { text-decoration: underline; }

/* Eviction "Add Documents" panel — a trigger link next to Gravity Form 8's
   file-upload field (field_8_1); the uploader itself lives in a modal (below),
   appended to <body>, deliberately not inside that field's own DOM — the
   point is to make it unmistakably a separate action from the form behind it.
   .ev-vault-eviction-link's own visual style is set above, alongside the
   other real <button>s this module renders. */
.ev-vault-eviction-wrap { margin-top: 8px; }

/* The modal itself */
.ev-vault-modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(20, 26, 20, .55);
  z-index: 999999; align-items: center; justify-content: center; padding: 16px;
}
.ev-vault-modal-box {
  background: #fff; border-radius: 10px; padding: 24px; width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 8px 40px rgba(0,0,0,.25);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ev-vault-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none !important; border: none !important; box-shadow: none !important;
  font-size: 22px; line-height: 1; color: #9aa5b1 !important; cursor: pointer; padding: 4px;
}
.ev-vault-modal-close:hover { color: #3c4858 !important; }
.ev-vault-modal-close:focus-visible { outline: 2px solid #3d5a2a; outline-offset: 2px; }
.ev-vault-modal-title { font-size: 16px; margin: 0 20px 6px 0; }
.ev-vault-modal-sub { font-size: 12px; color: #68737d; margin: 0 0 14px; }
.ev-vault-modal-status { font-size: 12px; color: #68737d; }
.ev-vault-modal-content { margin-top: 4px; }

/* Standalone (no-login, defendant) page */
.ev-vault-page { max-width: 560px; margin: 0 auto; padding: 8px 0; }
.ev-vault-page-title { font-size: 20px; margin: 0 0 4px; }
.ev-vault-page-sub { color: #68737d; font-size: 13px; margin: 0 0 16px; }
