/* Triplem VIP Build 011 refinements — menus, filters, notes, admin photos, loan transactions, PDF affordances. */

/* Elevated action menus must never be clipped by tables/details/cards. */
.expense-tx-menu.is-portal,
.loan-tx-menu.is-portal{
  display:grid!important;
  position:fixed!important;
  min-width:182px;
  padding:7px;
  border:1px solid var(--line-strong)!important;
  border-radius:14px!important;
  background:var(--surface-elevated)!important;
  box-shadow:var(--shadow-strong)!important;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  overflow:hidden!important;
  isolation:isolate;
}
.expense-tx-menu.is-portal button,
.loan-tx-menu.is-portal button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:10px;
  background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit;
}
.expense-tx-menu.is-portal button:hover,
.loan-tx-menu.is-portal button:hover{background:var(--surface-hover)}
.expense-tx-menu.is-portal button.is-danger,
.loan-tx-menu.is-portal button.is-danger{color:var(--danger)}

/* Cleaner shared filter surfaces outside Expenses. */
#app .panel:not(#expensesPanel) .compact-filter-row,
#app #goodsPanel .inventory-filter-row{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#app .panel:not(#expensesPanel) .compact-filter-row .filter-inline-section,
#app #goodsPanel .inventory-filter-row .filter-inline-section{
  background:color-mix(in srgb,var(--surface-soft) 78%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important;
  box-shadow:none!important;
  border-radius:13px!important;
}
#app .panel:not(#expensesPanel) .compact-filter-row .filter-inline-section:is(:hover,:focus-within),
#app #goodsPanel .inventory-filter-row .filter-inline-section:is(:hover,:focus-within){
  background:color-mix(in srgb,var(--surface-hover) 88%,transparent)!important;
  border-color:var(--line-strong)!important;
}
#app .panel:not(#expensesPanel) .filter-chip{
  background:transparent!important;
  box-shadow:none!important;
}
#app .panel:not(#expensesPanel) .filter-chip:has(input:checked){
  background:var(--primary-soft)!important;
  border-color:color-mix(in srgb,var(--primary) 42%,var(--line))!important;
}

/* Notes — refined paper/sticky-note language without cartoonish handwriting. */
#notesList.notes-grid{gap:16px!important;align-items:stretch}
#notesList > .note-grid-card{
  position:relative!important;
  min-height:205px!important;
  padding:22px 20px 24px!important;
  overflow:visible!important;
  border:1px solid color-mix(in srgb,var(--warning) 20%,var(--line-strong))!important;
  border-radius:8px 8px 14px 10px!important;
  background:
    linear-gradient(110deg,color-mix(in srgb,var(--surface-elevated) 92%,var(--warning-soft) 8%),color-mix(in srgb,var(--surface-elevated) 86%,var(--primary-soft) 14%))!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--shadow-color, #0f172a) 12%,transparent),inset 0 1px 0 var(--glass-highlight)!important;
  transform:none!important;
  isolation:isolate;
}
#notesList > .note-grid-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,color-mix(in srgb,var(--primary) 8%,transparent) 31px 32px);
  opacity:.72;
}
#notesList > .note-grid-card::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-7px;height:12px;pointer-events:none;
  background:linear-gradient(135deg,transparent 6px,color-mix(in srgb,var(--surface-elevated) 92%,var(--warning-soft) 8%) 0) 0 0/14px 12px repeat-x;
  filter:drop-shadow(0 3px 2px color-mix(in srgb,var(--shadow-color, #0f172a) 12%,transparent));
}
#notesList > .note-grid-card:hover,
#notesList > .note-grid-card:focus-visible{
  transform:translateY(-3px)!important;
  border-color:color-mix(in srgb,var(--primary) 45%,var(--line-strong))!important;
  box-shadow:var(--shadow-strong)!important;
  outline:none!important;
}
.note-paper-pencil{
  top:-10px!important;right:15px!important;width:30px!important;height:30px!important;border-radius:9px!important;
  transform:rotate(8deg)!important;font-size:.78rem!important;
  background:var(--primary-gradient)!important;color:var(--on-primary)!important;box-shadow:var(--shadow-soft)!important;
}
.note-paper-head{padding-right:34px!important;gap:8px!important}
.note-grid-title{
  font-family:var(--font,system-ui)!important;font-size:1.02rem!important;font-weight:820!important;line-height:1.32!important;
  color:var(--text-strong)!important;-webkit-line-clamp:2!important;line-clamp:2!important;
}
.note-paper-preview{
  margin:18px 0 16px!important;min-height:82px!important;line-height:26px!important;
  font-family:var(--font,system-ui)!important;font-size:.84rem!important;font-weight:500!important;color:var(--text)!important;
  -webkit-line-clamp:3!important;line-clamp:3!important;
}
.note-paper-foot{padding-top:7px!important;border-top:1px dashed color-mix(in srgb,var(--line-strong) 68%,transparent)!important}
.note-paper-corner{
  width:18px;height:18px;border-radius:2px 2px 6px 2px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface-elevated) 50%,transparent) 48%,color-mix(in srgb,var(--primary-soft) 75%,var(--surface-elevated)) 50%);
  box-shadow:-1px -1px 0 color-mix(in srgb,var(--line) 72%,transparent);
}
.note-workspace-modal .modal-dialog{border-radius:22px!important;overflow:hidden!important}
.note-workspace-modal .modal-head{
  background:linear-gradient(110deg,color-mix(in srgb,var(--surface-elevated) 92%,var(--warning-soft) 8%),color-mix(in srgb,var(--surface-elevated) 90%,var(--primary-soft) 10%))!important;
  border-bottom:1px dashed var(--line-strong)!important;
}
.note-workspace-modal .modal-body{background:var(--modal-bg)!important}
.note-detail-content,
.note-create-dialog .note-textarea,
#noteEditContent{
  min-height:180px!important;
  padding:19px 21px!important;
  border:1px solid color-mix(in srgb,var(--warning) 18%,var(--line-strong))!important;
  border-radius:10px!important;
  background:
    repeating-linear-gradient(to bottom,transparent 0 30px,color-mix(in srgb,var(--primary) 8%,transparent) 30px 31px),
    color-mix(in srgb,var(--surface-elevated) 93%,var(--warning-soft) 7%)!important;
  box-shadow:0 9px 20px color-mix(in srgb,var(--shadow-color, #0f172a) 8%,transparent)!important;
  font-family:var(--font,system-ui)!important;
  font-size:.9rem!important;line-height:31px!important;color:var(--text)!important;
}
.note-create-reminder-card{background:var(--surface-soft)!important;border-color:var(--line)!important}
.note-create-reminder-fields{background:color-mix(in srgb,var(--surface-soft) 85%,transparent)!important}
.note-reminder-toggle-icon,.notes-empty-icon{background:var(--primary-soft)!important;color:var(--primary)!important}
.note-detail-reminder-status{background:var(--warning-soft)!important;border-color:color-mix(in srgb,var(--warning) 32%,var(--line))!important;color:var(--text-strong)!important}
.note-delete-confirm{background:var(--danger-soft)!important;border-color:color-mix(in srgb,var(--danger) 30%,var(--line))!important}

/* Admin photo maintenance — denser presentation + explicit selected deletion. */
.admin-photo-compress-dialog{width:min(940px,calc(100vw - 24px))!important}
.admin-photo-compress-list{gap:9px!important}
.admin-photo-item{padding:10px 11px!important;border-radius:14px!important}
.admin-photo-item-meta{min-width:0!important}
.admin-photo-item-meta strong{display:block;max-width:min(420px,48vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem!important;font-weight:700!important;color:var(--text-strong)!important}
.admin-photo-item-meta span{font-size:.69rem!important;color:var(--muted)!important}
.admin-photo-pane img{max-height:150px!important;object-fit:contain!important}
.admin-unused-photo-panel{padding:11px!important}
.admin-unused-photo-head{align-items:center!important;margin-bottom:9px!important}
.admin-unused-photo-head>div{display:grid;gap:2px;min-width:0}
.admin-unused-photo-head>div>span{max-width:none!important;text-align:left!important;font-size:.7rem!important}
.admin-unused-select-all{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.73rem;font-weight:750;color:var(--text);cursor:pointer}
.admin-unused-photo-list{display:grid;gap:5px}
.admin-unused-photo-row{
  display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center!important;gap:9px!important;
  padding:8px 9px!important;border:1px solid transparent!important;border-radius:11px;background:transparent!important;cursor:pointer;
}
.admin-unused-photo-row:hover{background:var(--surface-hover)!important}
.admin-unused-photo-row.is-selected{background:var(--primary-soft)!important;border-color:color-mix(in srgb,var(--primary) 30%,var(--line))!important}
.admin-unused-photo-copy{display:grid;gap:1px;min-width:0}
.admin-unused-photo-copy strong{font-size:.76rem!important;font-weight:720!important;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-unused-photo-copy small{font-size:.66rem!important;color:var(--muted)!important;text-align:left!important}
.admin-unused-photo-copy em{font-style:normal;font-size:.61rem;color:var(--muted);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Loans — foreground selection modal, clickable rows, elevated row menu, detailed transaction receipt. */
#loanPdfSelectionModal.modal,#loanTransactionDetailModal.modal{z-index:2147482400!important;isolation:isolate!important}
#loanPdfSelectionModal .modal-backdrop,#loanTransactionDetailModal .modal-backdrop{background:var(--overlay-backdrop)!important;backdrop-filter:blur(12px) saturate(1.05)!important;-webkit-backdrop-filter:blur(12px) saturate(1.05)!important}
.loan-transaction-row{cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
.loan-transaction-row:hover,.loan-transaction-row:focus-visible{background:var(--surface-hover)!important;outline:none;box-shadow:inset 3px 0 0 var(--primary)}
.loan-tx-action-wrap{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:5px}
.loan-tx-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:260;min-width:182px;padding:7px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface-elevated);box-shadow:var(--shadow-strong)}
.loan-tx-menu.is-open{display:grid}
.loan-tx-detail-dialog{width:min(720px,calc(100vw - 24px))!important}
.loan-tx-hero{display:flex;align-items:center;gap:15px;padding:17px;border:1px solid var(--line-strong);border-radius:19px;background:var(--banner-bg);box-shadow:var(--shadow-soft)}
.loan-tx-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:var(--primary-gradient);color:var(--on-primary);font-size:1.15rem;box-shadow:var(--theme-glow-shadow)}
.loan-tx-hero small,.loan-tx-hero span{display:block;color:var(--muted)}.loan-tx-hero strong{display:block;color:var(--text-strong);font-size:1.4rem}
.loan-tx-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.loan-tx-detail-grid>div,.loan-tx-note{padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.loan-tx-detail-grid small,.loan-tx-note small{display:block;color:var(--muted);font-size:.71rem;margin-bottom:5px}.loan-tx-detail-grid strong{color:var(--text-strong);font-size:.86rem}
.loan-tx-note{margin-top:10px}.loan-tx-note p{margin:0;color:var(--text);white-space:pre-wrap}.loan-tx-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}

/* PDF affordance — consistent compact document icon, never generic download arrow. */
.fa-file-pdf{font-size:.88em;line-height:1;vertical-align:-.02em}
.icon-btn .fa-file-pdf,.tiny .fa-file-pdf{font-size:.82em}
.pdf-icon-btn{display:inline-flex!important;align-items:center;gap:6px}

@media(max-width:720px){
  #notesList.notes-grid{grid-template-columns:1fr!important;gap:14px!important}
  #notesList > .note-grid-card{min-height:178px!important;padding:19px 17px 22px!important}
  .note-paper-preview{min-height:65px!important;margin:14px 0!important}
  .admin-photo-item-meta strong{max-width:66vw}
  .admin-photo-compress-toolbar{align-items:stretch!important}
  .loan-tx-detail-grid{grid-template-columns:1fr}.loan-tx-actions{justify-content:stretch}.loan-tx-actions .btn{flex:1}
}