/* ============================================================================
   Chamanke Workspace — Invoice Entry
   Scoped under .ie-* / #view-invoice-entry. Theme tokens only, so it works in
   light and dark; logical properties so it flips in Arabic/RTL.
   ============================================================================ */

.ie-topbar { margin-bottom: 16px; }
.ie-title { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }
.ie-sub-line { font-size: 0.86rem; color: var(--text-tertiary); margin-top: 3px; }

.ie-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* btn-primary stretches inside a flex row; keep it to its own width. */
.ie-add { min-height: 38px; flex: 0 0 auto; width: auto; align-self: flex-start; }
.ie-count { font-size: 0.82rem; color: var(--text-tertiary); font-weight: 600; }

.ie-table-wrap {
  border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--bg-card); box-shadow: var(--shadow-card); overflow-x: auto;
}
.ie-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ie-table th {
  background: var(--table-header-bg); color: var(--table-header-text);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: start; padding: 10px; white-space: nowrap;
}
.ie-table td { padding: 11px 10px; border-block-start: 1px solid var(--border-primary); color: var(--text-primary); vertical-align: top; }
.ie-table tbody tr:hover { background: var(--bg-card-hover); }
.ie-sub { display: block; font-size: 0.76rem; color: var(--text-tertiary); margin-top: 2px; }

.ie-c-no { width: 92px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; }
.ie-c-amt { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ie-c-date, .ie-c-status { white-space: nowrap; }
.ie-c-act { width: 40px; text-align: end; }
.ie-edit { background: none; border: 0; cursor: pointer; font-size: 0.95rem; padding: 2px 4px; border-radius: var(--radius-sm); opacity: 0.6; }
.ie-edit:hover { opacity: 1; background: var(--bg-card-hover); }

.ie-badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.ie-st-draft { background: var(--bg-input); color: var(--text-secondary); }
.ie-st-sent  { background: var(--info-bg); color: var(--info); }
.ie-st-paid  { background: var(--success-bg); color: var(--success); }

.ie-empty {
  text-align: center; padding: 48px 20px; background: var(--bg-card);
  border: 1px dashed var(--border-primary); border-radius: var(--radius-lg);
}
.ie-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.ie-empty-title { font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.ie-empty-sub { font-size: 0.86rem; color: var(--text-tertiary); margin: 0 auto 16px; max-width: 460px; line-height: 1.5; }
.ie-hint { font-weight: 400; font-size: 0.74rem; color: var(--text-tertiary); }
.ie-note { font-size: 0.78rem; color: var(--text-tertiary); margin: 2px 0 0; }

/* ---- form layout ---------------------------------------------------------
   The app has NO global styling for `.form-row`, nor for a bare <input> inside
   a modal — each modal scopes its own (styles2.css per-ID for the client dialog,
   finance-styles.css under .fin-form-section). Without this the fields render
   as unstyled browser defaults running together on one line.
   -------------------------------------------------------------------------- */
#ieFormOverlay .modal-body .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
#ieFormOverlay .modal-body .form-row.full { grid-template-columns: 1fr; }
#ieFormOverlay .modal-body label {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
}
#ieFormOverlay .modal-body input,
#ieFormOverlay .modal-body select,
#ieFormOverlay .modal-body textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: inherit; color: var(--text-primary); background: var(--bg-input);
}
#ieFormOverlay .modal-body input:focus,
#ieFormOverlay .modal-body select:focus,
#ieFormOverlay .modal-body textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
#ieFormOverlay .modal-body textarea { resize: vertical; min-height: 56px; line-height: 1.45; }
/* the attachments drop area (matches Finance's) — the real file input is
   hidden inside it, so a click anywhere opens the picker */
.ie-field-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: -6px; }
#ieFormOverlay .modal-body label.ie-drop {
  position: relative; align-items: center; justify-content: center; text-align: center; gap: 3px;
  padding: 16px 12px; border: 1.5px dashed var(--border-input); border-radius: var(--radius-md);
  background: var(--bg-primary); cursor: pointer; transition: border-color .15s, background .15s;
}
#ieFormOverlay .modal-body label.ie-drop:hover,
#ieFormOverlay .modal-body label.ie-drop.is-over { border-color: var(--accent); background: var(--accent-glow); }
#ieFormOverlay .modal-body label.ie-drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; overflow: hidden; border: 0; pointer-events: none;
}
.ie-drop-main { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.ie-drop-sub { font-size: 0.74rem; font-weight: 400; color: var(--text-tertiary); }

/* ---- attachments ------------------------------------------------------------ */
.ie-att-list { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 14px; }
.ie-att-list:empty { display: none; }
.ie-att {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md);
}
.ie-att-theirs { opacity: 0.8; }
.ie-att-ico { font-size: 1.05rem; flex: 0 0 auto; }
.ie-att-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ie-att-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ie-att-name:hover { color: var(--accent); text-decoration: underline; }
.ie-att-meta { font-size: 0.74rem; color: var(--text-tertiary); }
.ie-att-x {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--text-tertiary);
  font-size: 0.9rem; padding: 4px 6px; border-radius: var(--radius-sm);
}
.ie-att-x:hover { color: var(--danger); background: var(--danger-bg); }

@media (max-width: 768px) {
  #ieFormOverlay .modal-body .form-row { grid-template-columns: 1fr; }
  .ie-bar { flex-direction: column; align-items: stretch; }
}