/* Invoice Profile - Clean A4 Document Style */

/* Modal container - A4 proportions */
#profileModal[data-profile-type="invoice"] .profile-container { 
  background: #ffffff; 
  border: none; 
  margin: 20px auto; 
  padding: 0; 
  border-radius: 0; 
  max-width: 210mm; 
  width: 95%; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  min-height: 297mm; /* A4 height */
  overflow: visible;
}
#profileModal.modal[data-profile-type="invoice"] .profile-container { background: #ffffff !important; border: none !important; }

/* Header area - clean, no teal background */
#profileModal[data-profile-type="invoice"] .profile-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin: 0; 
  padding: 20px 30px; 
  background: #ffffff; 
  color: #333; 
  position: relative; 
  border-bottom: 1px solid #e5e7eb;
}
#profileModal[data-profile-type="invoice"] .profile-header-actions { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  position: absolute; 
  right: 20px; 
  top: 15px; 
}
#profileModal[data-profile-type="invoice"] .profile-header h2,
#profileModal[data-profile-type="invoice"] .profile-name { 
  color: #1f2937; 
  font-size: 1.5rem; 
  font-weight: 600; 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin: 0; 
  padding: 0; 
}

/* Layout */
#profileModal[data-profile-type="invoice"] .profile-body { display:flex; gap:20px; padding: 20px 30px; align-items:flex-start; position:relative; }
#profileModal[data-profile-type="invoice"] .profile-layout-modern { display:flex; gap:20px; padding: 0; flex:1; min-height:0; }
#profileModal[data-profile-type="invoice"] .profile-content-area { flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; }
#profileModal[data-profile-type="invoice"] .profile-sidebar-area { display: none; }

/* Cards */
#profileModal[data-profile-type="invoice"] .profile-card,
#profileModal[data-profile-type="invoice"] .profile-card-modern { background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.08); overflow:hidden; position:relative; border:1px solid #e2e8f0; }
#profileModal[data-profile-type="invoice"] .profile-card .profile-card-content,
#profileModal[data-profile-type="invoice"] .profile-card-modern .profile-card-content { padding:20px 24px; flex:1; }

/* Prevent endless vertical growth on invoice profile cards */
#profileModal[data-profile-type="invoice"] .profile-card,
#profileModal[data-profile-type="invoice"] .profile-card-modern {
  height: 42vh !important;
  max-height: 42vh !important;
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#profileModal[data-profile-type="invoice"] .profile-card .profile-card-content,
#profileModal[data-profile-type="invoice"] .profile-card-modern .profile-card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Invoice header area */
#profileModal[data-profile-type="invoice"] .invoice-company-header { padding:16px 20px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
#profileModal[data-profile-type="invoice"] #invoiceCompanyName{ font-size:18px; font-weight:700; color:#ffffff !important; }
#profileModal[data-profile-type="invoice"] .invoice-doc-header #invoiceCompanyName{ color:#ffffff !important; }
#profileModal[data-profile-type="invoice"] .invoice-company-block #invoiceCompanyName{ color:#ffffff !important; }
#profileModal[data-profile-type="invoice"] .invoice-doc-header .invoice-company-block #invoiceCompanyName{ color:#ffffff !important; }
#profileModal[data-profile-type="invoice"] #invoiceCompanyAddressDetails{ font-size:13px; color:#ffffff !important; line-height:1.5; }
#profileModal[data-profile-type="invoice"] .invoice-doc-header #invoiceCompanyAddressDetails{ color:#ffffff !important; }
#profileModal[data-profile-type="invoice"] .invoice-company-block #invoiceCompanyAddressDetails{ color:#ffffff !important; }
#profileModal[data-profile-type="invoice"] .invoice-doc-header .invoice-company-block #invoiceCompanyAddressDetails{ color:#ffffff !important; }

/* Key/value grid beneath header */
#profileModal[data-profile-type="invoice"] .grid-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; padding:8px 0; }
#profileModal[data-profile-type="invoice"] .grid-two > div{ font-size:14px; color:#0f172a; }
#profileModal[data-profile-type="invoice"] .grid-two strong{ color:#334155; font-weight:600; }

/* Table-like lists */
#profileModal[data-profile-type="invoice"] .table-like { display:flex; flex-direction:column; gap:0; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
#profileModal[data-profile-type="invoice"] .table-row { display:grid; grid-template-columns: 1fr 2fr; gap:12px; padding:10px 14px; border-top:1px solid #e2e8f0; }
#profileModal[data-profile-type="invoice"] .table-row:first-child{ border-top:none; }
#profileModal[data-profile-type="invoice"] .table-row:nth-child(even){ background:#f8fafc; }
#profileModal[data-profile-type="invoice"] .table-row strong{ color:#0f172a; }

/* Badges */
#profileModal[data-profile-type="invoice"] .badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.75rem; font-weight:600; }
#profileModal[data-profile-type="invoice"] .badge-success { background:#10b981; color:#fff; }
#profileModal[data-profile-type="invoice"] .badge-warning { background:#f59e0b; color:#fff; }

/* Minimal activity placeholder */
#profileModal[data-profile-type="invoice"] .activity-timeline { background:#fff; border-radius:8px; border:1px solid #e2e8f0; box-shadow:0 2px 4px rgba(0,0,0,0.05); padding:16px; }
#profileModal[data-profile-type="invoice"] .activity-timeline h3 { margin:0 0 10px; font-size:1rem; color:#1f2937; }

/* Buttons in header area */
#profileModal[data-profile-type="invoice"] .invoice-company-header .btn{ background:#0d8696; color:#fff; border:none; }
#profileModal[data-profile-type="invoice"] .invoice-company-header .btn.btn-secondary{ background:#64748b; }
#profileModal[data-profile-type="invoice"] .invoice-company-header .btn:hover{ filter:brightness(0.95); }

/* ===================== */
/* A4 Document Layout */
/* ===================== */
#profileModal[data-profile-type="invoice"] .invoice-doc{ 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  color: #1f2937; 
  background: #ffffff; 
  padding: 0;
  line-height: 1.6;
  width: calc(100% + 60px);
  margin: 0 -30px;
}

/* Document header - teal like reference image */
#profileModal[data-profile-type="invoice"] .invoice-doc-header{ 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  margin-bottom: 40px;
  padding: 30px 0;
  background: #0d8696;
  color: #ffffff;
  border-bottom: none;
}

#profileModal[data-profile-type="invoice"] .invoice-brand-block .invoice-brand-title{ 
  font-size: 40px; 
  font-weight: 700; 
  color: #ffffff;
  margin: 0;
  padding-left: 30mm;
}
#profileModal[data-profile-type="invoice"] .invoice-company-block{
  position: relative;
  padding-right: 30mm;
}
#profileModal[data-profile-type="invoice"] .company-name{ 
  font-size: 18px; 
  font-weight: 600; 
  color: #ffffff;
  margin-bottom: 8px;
}
#profileModal[data-profile-type="invoice"] .company-address{ 
  font-size: 14px; 
  color: #ffffff; 
  line-height: 1.5; 
}

/* Edit header button */
#profileModal[data-profile-type="invoice"] .edit-header-btn{
  position: absolute;
  top: -5px;
  right: -10px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #ffffff;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#profileModal[data-profile-type="invoice"] .edit-header-btn:hover{
  background: rgba(255,255,255,0.3);
}

/* Invoice meta information */
#profileModal[data-profile-type="invoice"] .invoice-meta-row{ 
  display: flex; 
  gap: 60px; 
  margin-bottom: 40px;
  padding: 0 30mm;
}
#profileModal[data-profile-type="invoice"] .invoice-meta-row .meta-left{ 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
}
#profileModal[data-profile-type="invoice"] .invoice-meta-row .meta-right{ 
  width: 300px; 
}
#profileModal[data-profile-type="invoice"] .meta-box{ 
  padding: 0;
  background: transparent;
  border: none;
}
#profileModal[data-profile-type="invoice"] .meta-title{ 
  font-size: 14px; 
  font-weight: 600;
  color: #374151; 
  margin-bottom: 8px; 
  text-transform: none;
  letter-spacing: normal;
}
#profileModal[data-profile-type="invoice"] .meta-value{ 
  font-size: 14px; 
  color: #1f2937;
  line-height: 1.5;
}
#profileModal[data-profile-type="invoice"] .meta-grid{ 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 12px; 
  border: none;
  border-radius: 0; 
  padding: 0; 
  background: transparent; 
}
#profileModal[data-profile-type="invoice"] .meta-grid > div{ 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
#profileModal[data-profile-type="invoice"] .meta-grid > div:last-child{
  border-bottom: none;
}
#profileModal[data-profile-type="invoice"] .meta-grid > div > span{ 
  color: #6b7280; 
  font-size: 14px; 
  font-weight: 500;
}
#profileModal[data-profile-type="invoice"] .meta-grid > div > strong{ 
  font-weight: 600; 
  font-size: 14px; 
  color: #1f2937;
}

/* Description section */
#profileModal[data-profile-type="invoice"] .invoice-notes{ 
  margin-bottom: 40px;
  padding: 0 30mm;
}
#profileModal[data-profile-type="invoice"] .invoice-notes .notes-title{ 
  font-weight: 600; 
  color: #374151; 
  margin-bottom: 12px; 
  font-size: 16px;
}
#profileModal[data-profile-type="invoice"] .invoice-notes .notes-body{ 
  color: #1f2937; 
  font-size: 14px;
  line-height: 1.6;
}

/* Line items table (5 columns like reference) */
#profileModal[data-profile-type="invoice"] .invoice-items{ 
  margin-bottom: 28px; 
  border: 1px solid #e5e7eb; 
  border-radius: 0; 
  overflow: hidden;
  margin: 0 30mm 28px 30mm;
}
#profileModal[data-profile-type="invoice"] .invoice-items .items-header{ 
  display: grid; 
  grid-template-columns: 2fr 4fr 1fr 1fr 1fr; 
  gap: 12px; 
  background: #f3f4f6; 
  color: #374151; 
  font-weight: 700; 
  padding: 14px 18px; 
  border-bottom: 1px solid #e5e7eb;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .4px;
}
#profileModal[data-profile-type="invoice"] .invoice-items .items-row{ 
  display: grid; 
  grid-template-columns: 2fr 4fr 1fr 1fr 1fr; 
  gap: 12px; 
  padding: 14px 18px; 
  border-bottom: 1px solid #eef2f7; 
  font-size: 14px;
}
#profileModal[data-profile-type="invoice"] .invoice-items .items-row:last-child{
  border-bottom: none;
}
#profileModal[data-profile-type="invoice"] .invoice-items .items-row:nth-child(even){ 
  background: #fbfdff; 
}
#profileModal[data-profile-type="invoice"] .invoice-items .col-qty,
#profileModal[data-profile-type="invoice"] .invoice-items .col-price,
#profileModal[data-profile-type="invoice"] .invoice-items .col-amount{
  text-align: right;
}
#profileModal[data-profile-type="invoice"] .invoice-items .col-amount{
  font-weight: 700;
  color: #111827;
}

/* Totals and notes strip at bottom (like reference) */
#profileModal[data-profile-type="invoice"] .invoice-bottom-bar{
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 18px;
  align-items: stretch;
  margin: 0 30mm;
}
#profileModal[data-profile-type="invoice"] .notes-strip{
  background: #dbeafe; /* light blue */
  color: #1f2937;
  padding: 18px 20px;
  border-radius: 4px;
}
#profileModal[data-profile-type="invoice"] .notes-strip .label{
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 6px;
}
#profileModal[data-profile-type="invoice"] .total-strip{
  background: #0d8696; /* teal */
  color: #ffffff;
  padding: 18px 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#profileModal[data-profile-type="invoice"] .total-strip .label{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
#profileModal[data-profile-type="invoice"] .total-strip .value{
  font-weight: 800;
  font-size: 28px;
}

/* Bank details footer - keep but slightly refine to align with theme */
#profileModal[data-profile-type="invoice"] .invoice-footer{ 
  background: linear-gradient(135deg, #e0f2fe 0%, #c7e9f2 100%); 
  margin-top: 24px;
  padding: 24px 30mm;
  border-top: 3px solid #0d8696;
  border: none;
  border-radius: 0; 
}
#profileModal[data-profile-type="invoice"] .invoice-footer .footer-title{ 
  background: #0d8696; 
  color: #ffffff; 
  padding: 12px 16px; 
  font-weight: 700; 
  font-size: 15px;
  border-bottom: none; 
  margin: -24px -30mm 16px -30mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#profileModal[data-profile-type="invoice"] .invoice-footer .bank-details{ 
  padding: 0; 
}

/* Edit bank button */
#profileModal[data-profile-type="invoice"] .edit-bank-btn{
  background: rgba(255,255,255,0.2);
  border: none;
  color: #ffffff;
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#profileModal[data-profile-type="invoice"] .edit-bank-btn:hover{
  background: rgba(255,255,255,0.3);
}
#profileModal[data-profile-type="invoice"] .invoice-footer .bank-grid{ 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 16px 24px; 
}
#profileModal[data-profile-type="invoice"] .invoice-footer .bank-grid > div{ 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
#profileModal[data-profile-type="invoice"] .invoice-footer .bank-grid span{ 
  color: #6b7280; 
  font-size: 14px; 
  font-weight: 500;
}
#profileModal[data-profile-type="invoice"] .invoice-footer .bank-grid strong{ 
  font-size: 14px; 
  font-weight: 600;
  color: #1f2937;
}
#profileModal[data-profile-type="invoice"] .invoice-footer .bank-notes{ 
  margin-top: 16px; 
  color: #6b7280; 
  font-size: 14px; 
  font-style: italic;
}

/* External actions container styles (sits in profile header actions) */
#profileModal[data-profile-type="invoice"] .invoice-actions-external{ 
  display: flex; 
  gap: 8px; 
}
#profileModal[data-profile-type="invoice"] .invoice-actions-external .btn{ 
  background: #3b82f6; 
  color: #fff; 
  border: none; 
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
#profileModal[data-profile-type="invoice"] .invoice-actions-external .btn.btn-secondary{ 
  background: #6b7280; 
}
#profileModal[data-profile-type="invoice"] .invoice-actions-external .btn:hover{ 
  opacity: 0.9; 
}

/* Print refinements - A4 document printing */
@media print{
  #profileModal[data-profile-type="invoice"] .profile-container{ 
    box-shadow: none !important; 
    border: none !important; 
    width: 100% !important; 
    max-width: none !important; 
    border-radius: 0 !important; 
    margin: 0 !important;
    min-height: auto !important;
  }
  #profileModal[data-profile-type="invoice"] .profile-header{ 
    display: none !important; 
  }
  #profileModal[data-profile-type="invoice"] .profile-header-actions{ 
    display: none !important; 
  }
  #profileModal[data-profile-type="invoice"] .invoice-actions-external{ 
    display: none !important; 
  }
  #profileModal[data-profile-type="invoice"] .invoice-doc{
    padding: 20mm !important;
  }
  #profileModal[data-profile-type="invoice"] .profile-sidebar-area{ 
    display: none !important; 
  }
  #profileModal[data-profile-type="invoice"] .profile-layout-modern{ 
    padding: 0 !important; 
  }
  
  /* Ensure clean page breaks */
  #profileModal[data-profile-type="invoice"] .invoice-doc-header{
    page-break-inside: avoid;
  }
  #profileModal[data-profile-type="invoice"] .invoice-items{
    page-break-inside: avoid;
  }
  #profileModal[data-profile-type="invoice"] .edit-header-btn{
    display: none !important;
  }
  #profileModal[data-profile-type="invoice"] .edit-bank-btn{
    display: none !important;
  }
}

/* ── Wise Import Banner ─────────────────────────────── */
.wise-import-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0f7ff;
  border: 1px solid #c6dcf5;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 12px 30px 0;
  font-size: 12px;
}
.wise-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.wise-import-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wise-badge {
  display: inline-block;
  background: #164e63;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
}
.wise-ref {
  font-family: monospace;
  font-size: 12px;
  color: #334155;
}
.wise-status-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 3px;
  background: #e2e8f0;
  color: #475569;
}
.wise-status-chip.wise-status-outgoing-payment-sent,
.wise-status-chip.wise-status-funds-converted {
  background: #dcfce7;
  color: #166534;
}
.wise-status-chip.wise-status-processing,
.wise-status-chip.wise-status-incoming-payment-waiting {
  background: #fef9c3;
  color: #854d0e;
}
.wise-status-chip.wise-status-cancelled,
.wise-status-chip.wise-status-funds-refunded,
.wise-status-chip.wise-status-bounced-back {
  background: #fee2e2;
  color: #991b1b;
}
.wise-currencies {
  color: #64748b;
  font-size: 11px;
}
@media print {
  .wise-import-banner { display: none !important; }
}
