/* portal_updates.css — styles for the new portal additions */

/* Lily AI Studio action grid */
.lily-studio { display:flex; flex-direction:column; gap:12px; height:100%; }
.lily-studio-hero {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border:1px solid #e9d5ff;
  border-radius:14px;
  padding:14px 16px;
}
.lily-studio-hero h4 { margin:0 0 4px; font-size:18px; color:#6b21a8; font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.lily-studio-hero p { margin:0; font-size:13px; color:#6d4a9e; }

.lily-act-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}
@media (max-width: 720px){ .lily-act-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px){ .lily-act-grid{ grid-template-columns: 1fr; } }

.lily-act {
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  background:#fff;
  border:1px solid #ece5fa;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition: all .15s;
  font-family:'Barlow', sans-serif;
}
.lily-act:hover { border-color:#a855f7; box-shadow:0 6px 18px rgba(168,85,247,0.18); transform:translateY(-1px); }
.lily-act:focus { outline:2px solid #a855f7; outline-offset:2px; }
.lily-act-ic { font-size:22px; flex-shrink:0; }
.lily-act-tx { display:flex; flex-direction:column; gap:1px; min-width:0; }
.lily-act-lbl { font-weight:700; font-size:13px; color:#1a2e2b; }
.lily-act-sub { font-size:11px; color:#6d4a9e; }

.lily-modal-body[data-lily-body="1"]{
  background:#fafafd; border-radius:12px; border:1px solid #ece5fa;
  padding:1rem 1.1rem; max-height:240px; overflow-y:auto;
}
.lily-modal-foot { margin-top:6px; padding:.5rem 0 0; display:flex; gap:6px; flex-wrap:nowrap; min-width:0; }
.lily-modal-foot input {
  flex:1; min-width:0; padding:9px 12px; border:1.5px solid var(--bd, #d8e8e5); border-radius:10px;
  font-size:13px; outline:none; font-family:'Barlow',sans-serif;
}
.lily-modal-foot input:focus { border-color:#a855f7; }
.lily-modal-foot .lily-send-btn {
  background:#a855f7; color:#fff; border:none; border-radius:10px; padding:0 14px;
  font-weight:700; cursor:pointer; font-size:13px; font-family:'Barlow Condensed',sans-serif;
  flex-shrink:0;
}
.lily-modal-foot .lily-send-btn:hover { background:#9333ea; }

/* Composer pinned to the top of Lily's AI Studio (Photo + input + Send). */
.lily-studio .lily-modal-foot-top {
  order:-2;
  margin:0 0 4px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #ece5fa;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(168,85,247,.06);
  position:sticky;
  top:0;
  z-index:3;
}
.lily-studio .lily-modal-foot-top .lily-cam-btn { flex-shrink:0; }
.lily-studio .lily-studio-hero { order:-1; }
.lily-studio [data-lily-body="1"] { order:0; }
.lily-studio .lily-act-grid { order:1; }

@media (max-width: 460px){
  .lily-studio .lily-modal-foot-top { padding:8px 10px; gap:6px; }
  .lily-studio .lily-modal-foot-top .lily-cam-btn { padding:7px 9px; font-size:12px; }
  .lily-studio .lily-modal-foot-top .lily-send-btn { padding:0 10px; font-size:12px; }
  .lily-studio .lily-modal-foot-top input { font-size:12.5px; padding:8px 10px; }
}

/* portal-update general styling */
.pu-section { display:flex; flex-direction:column; gap:12px; }
.pu-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pu-section-head h4 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; color:#141310; margin:0; }
.pu-section-foot { display:flex; gap:8px; flex-wrap:wrap; padding-top:6px; }

.pu-h5 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; color:#141310; margin:0; text-transform:uppercase; letter-spacing:.5px; }

.pu-banner {
  border-radius:10px; padding:10px 14px; font-size:13px; line-height:1.5;
  background:#f0f9ff; border:1px solid #bae6fd; color:#075985;
}
.pu-banner-info { background:#eef9f7; border-color:#FFD4B0; color:#D95A00; }
.pu-banner-draft { background:#fef9c3; border-color:#fde047; color:#854d0e; }

.pu-tablewrap { overflow-x:auto; border:1px solid #d8e8e5; border-radius:12px; background:#fff; }
.pu-table { width:100%; border-collapse:collapse; font-size:13px; }
.pu-table thead th {
  background:#f8fbfa; padding:10px 14px; text-align:left;
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  color:#8aada8; text-transform:uppercase; letter-spacing:.6px;
  border-bottom:1.5px solid #d8e8e5; white-space:nowrap;
}
.pu-table tbody td { padding:10px 14px; border-bottom:1px solid #eef4f3; }
.pu-table tbody tr:hover { background:#f8fbfa; }
.pu-empty { padding:14px; color:#8aada8; text-align:center; font-size:13px; }

/* Status pills */
.pu-status { padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.pu-status-pending,.pu-status-pending-approval { background:#fef9c3; color:#854d0e; }
.pu-status-approved { background:#dcfce7; color:#166534; }
.pu-status-denied { background:#fee2e2; color:#991b1b; }
.pu-status-hold,.pu-status-on-hold { background:#fde68a; color:#92400e; }
.pu-status-edits-requested { background:#e0e7ff; color:#3730a3; }
.pu-status-billable { background:#dcfce7; color:#166534; }
.pu-status-already-billed { background:#dbeafe; color:#1e40af; }

.pu-cadence { background:#eef9f7; border:1px solid #FFD4B0; border-radius:10px; padding:10px 14px; font-size:12px; color:#D95A00; }

/* Approval preview */
.pu-approval-preview { display:flex; flex-direction:column; gap:14px; }
.pu-approval-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; background:#fff; border:1px solid #d8e8e5; border-radius:12px; }
.pu-approval-meta strong { font-family:'Barlow Condensed',sans-serif; font-size:18px; color:#141310; }
.pu-approval-sub { font-size:12px; color:#8aada8; }
.pu-approval-grid { display:grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap:14px; }
@media (max-width: 900px){ .pu-approval-grid { grid-template-columns: 1fr; } }
.pu-approval-doc { background:#fff; border:1px solid #d8e8e5; border-radius:12px; padding:8px; min-height:380px; }
.pu-doc-iframe { width:100%; height:520px; border:0; border-radius:8px; }
.pu-doc-stub { padding:32px; text-align:center; color:#8aada8; }
.pu-doc-stub-ic { font-size:40px; }
.pu-doc-stub-name { font-weight:700; color:#141310; margin:6px 0; }
.pu-approval-side { display:flex; flex-direction:column; gap:12px; }
.pu-side-block { background:#fff; border:1px solid #d8e8e5; border-radius:12px; padding:10px 14px; font-size:13px; }
.pu-side-lbl { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#8aada8; margin-bottom:4px; }
.pu-rem-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.pu-rem { padding:6px 10px; border-radius:8px; background:#f8fbfa; border:1px solid #eef4f3; font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pu-rem-state { font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:2px 6px; border-radius:999px; background:#e2e8f0; color:#475569; }
.pu-rem-fired .pu-rem-state { background:#fde68a; color:#92400e; }
.pu-rem-resolved .pu-rem-state { background:#dcfce7; color:#166534; }
.pu-hist { display:flex; flex-direction:column; gap:6px; }
.pu-hist-row { padding:6px 8px; background:#f8fbfa; border-radius:8px; font-size:12px; }
.pu-hist-action { margin-left:6px; padding:2px 8px; border-radius:999px; background:#e0e7ff; color:#3730a3; font-weight:700; }
.pu-hist-when { float:right; color:#8aada8; font-size:11px; }
.pu-hist-note { font-size:12px; color:#475569; margin-top:4px; }
.pu-approval-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:6px; }
.pu-btn-approved { background:#16a34a; color:#fff; }
.pu-btn-approved:hover { background:#15803d; }
.pu-btn-hold { background:#f59e0b; color:#fff; }
.pu-btn-hold:hover { background:#d97706; }
.pu-btn-deny { background:#dc2626; color:#fff; }
.pu-btn-deny:hover { background:#b91c1c; }
.pu-btn-edit { background:#2563eb; color:#fff; }
.pu-btn-edit:hover { background:#1d4ed8; }

/* Reports */
.pu-report-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.pu-report-card {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:#fff; border:1px solid #d8e8e5; border-radius:12px;
  padding:12px 14px; cursor:pointer; transition: all .15s;
  font-family:'Barlow', sans-serif;
}
.pu-report-card:hover { border-color:#FF6B00; box-shadow:0 6px 18px rgba(255,107,0,0.14); transform:translateY(-1px); }
.pu-report-ic { font-size:28px; }
.pu-report-tx { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pu-report-lbl { font-weight:700; color:#141310; }
.pu-report-sub { font-size:12px; color:#475569; line-height:1.4; }
.pu-report-cta { font-size:12px; color:#FF6B00; font-weight:700; flex-shrink:0; }

/* Material Invoice AI */
.pu-mi-required { background:#fff; border:1px dashed #FFD4B0; border-radius:10px; padding:10px 14px; font-size:13px; color:#1a2e2b; }
.pu-req { color:#dc2626; }
.pu-mi-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
.pu-mi-toolbar input[type="search"] {
  flex:1; min-width:200px; padding:9px 14px;
  border:1.5px solid #d8e8e5; border-radius:10px; font-size:13px;
  font-family:'Barlow', sans-serif; outline:none;
}
.pu-mi-toolbar input[type="search"]:focus { border-color:#FF6B00; }
.pu-mi-trend { background:#fff; border:1px solid #d8e8e5; border-radius:12px; padding:12px 14px; }
.pu-mi-trend h5 { margin:0 0 8px; font-size:14px; font-family:'Barlow Condensed',sans-serif; }
.pu-trend-chart { display:flex; align-items:flex-end; gap:8px; height:140px; padding:8px 0 4px; border-bottom:1px solid #eef4f3; }
.pu-trend-bar { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:42px; }
.pu-trend-fill { display:block; width:80%; background:linear-gradient(180deg, #FF6B00 0%, #D95A00 100%); border-radius:6px 6px 0 0; }
.pu-trend-lbl { font-size:10px; color:#475569; }
.pu-mi-totals { background:#fff; border:1px solid #d8e8e5; border-radius:12px; padding:12px 14px; }
.pu-mi-totals h5 { margin:0 0 8px; font-size:14px; font-family:'Barlow Condensed',sans-serif; }
.pu-mi-tot { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #eef4f3; font-size:13px; }
.pu-mi-tot:last-child { border-bottom:0; }
.pu-mi-tot-p { color:#1a2e2b; }
.pu-mi-tot-v { color:#D95A00; font-weight:700; }

/* Folder + pill grids */
.pu-folder-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.pu-folder-card {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:#fff; border:1px solid #d8e8e5; border-radius:12px;
  padding:12px 14px; cursor:pointer; transition:all .15s;
  font-family:'Barlow', sans-serif;
}
.pu-folder-card:hover { border-color:#FF6B00; box-shadow:0 6px 18px rgba(255,107,0,0.14); transform:translateY(-1px); }
.pu-folder-ic { font-size:28px; }
.pu-folder-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pu-folder-lbl { font-weight:700; color:#141310; }
.pu-folder-sub { font-size:12px; color:#475569; }

.pu-proj-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pu-proj-pill {
  background:#fff; border:1px solid #d8e8e5; border-radius:999px;
  padding:6px 12px; font-size:12px; font-weight:600; color:#1a2e2b;
  cursor:pointer; transition:all .15s;
}
.pu-proj-pill:hover { border-color:#FF6B00; color:#D95A00; background:#eef9f7; }

/* Pay App history */
.pu-admin-tag { font-size:11px; padding:3px 8px; border-radius:999px; background:#dcfce7; color:#166534; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.pu-readonly-tag { font-size:11px; padding:3px 8px; border-radius:999px; background:#e2e8f0; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.pu-locked { color:#94a3b8; font-size:14px; }

/* Forms */
.pu-form { display:flex; flex-direction:column; gap:12px; }
.pu-form-row label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:#475569; }
.pu-form-row label input,
.pu-form-row label select,
.pu-form-row label textarea {
  padding:9px 12px; border:1.5px solid #d8e8e5; border-radius:10px;
  font-size:13px; font-family:'Barlow',sans-serif; outline:none;
}
.pu-form-row label input:focus,
.pu-form-row label select:focus,
.pu-form-row label textarea:focus { border-color:#FF6B00; }
.pu-form-row { display:flex; flex-direction:column; gap:4px; }
.pu-form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pu-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width: 600px){ .pu-form-row-2,.pu-form-row-3 { grid-template-columns:1fr; } }
.pu-form-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Fallback overlay for when VillaShell isn't ready */
.pu-fallback-overlay {
  display:none; position:fixed; inset:0; background:rgba(20,19,16,0.55);
  z-index:1200; align-items:center; justify-content:center; padding:20px;
}
.pu-fallback-overlay.show { display:flex; }
.pu-fallback-panel {
  background:#fff; border-radius:14px; max-width:1100px; width:100%;
  max-height:90vh; display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,0.35);
}
.pu-fallback-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid #d8e8e5; }
.pu-fallback-bar h3 { margin:0; font-family:'Barlow Condensed',sans-serif; font-size:18px; color:#141310; }
.pu-fallback-body { padding:14px 18px; overflow-y:auto; }
.pu-close { background:#f8fbfa; border:1px solid #d8e8e5; border-radius:10px; padding:8px 14px; cursor:pointer; font-weight:700; }
.pu-close:hover { background:#eef9f7; border-color:#FF6B00; }