:root { --app-theme-color: #2ecc71; }
.container { max-width: 100%; padding: 15px; margin-bottom: 80px; }
.invoice-card { background: #fff; border: 1px solid var(--border-color); border-radius: 4px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-top: 4px solid var(--app-theme-color); transition: border-color 0.3s; }

.input-group-invoice { margin-bottom: 15px; display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 4px; padding: 5px 10px; background: #fff; }
.input-group-invoice input { border: none; width: 100%; outline: none; font-size: 16px; background: transparent; }

.text-area-box { width: 100%; border: 1px solid var(--border-color); border-radius: 4px; padding: 12px; margin-bottom: 15px; font-size: 14px; resize: none; overflow: hidden; box-sizing: border-box; font-family: inherit; }
.text-area-box:focus { outline: none; border-color: var(--app-theme-color); }

.info-row { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px; }
.info-input { width: 150px; border: 1px solid var(--border-color); border-radius: 4px; padding: 8px; text-align: right; font-size: 14px; font-family: inherit; }
.info-input:focus { outline: none; border-color: var(--app-theme-color); }

input[type="date"] { cursor: pointer; color: var(--text-dark); }

.item-container { border: 1px solid #eee; border-radius: 4px; padding: 15px; margin-top: 20px; margin-bottom: 10px; transition: 0.3s; }
.input-sm { border: 1px solid var(--border-color); border-radius: 4px; padding: 8px; width: 100%; font-size: 14px; box-sizing: border-box; }
.input-sm:focus { outline: none; border-color: var(--app-theme-color); }

/* Summary Section UI */
.summary-input-group { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; background: #fff; }
.summary-input-group input { border: none; outline: none; width: 60px; padding: 8px; text-align: right; font-size: 14px; }
.summary-input-group .indicator { padding: 8px 10px; background: #fff; color: #555; border-left: 1px solid #eee; }
.summary-input-group .toggle-btn { background: #f8f9fa; border: none; border-left: 1px solid #ccc; padding: 8px 12px; cursor: pointer; color: #555; font-size: 12px; transition: 0.2s; }
.summary-input-group .toggle-btn:hover { background: #eee; color: var(--app-theme-color); }
.remove-row-btn { color: var(--app-theme-color); font-size: 16px; font-weight: bold; margin-left: 12px; cursor: pointer; transition: 0.2s; }
.remove-row-btn:hover { color: #e74c3c; }

.action-links { color: var(--app-theme-color); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; gap: 20px; margin: 15px 0; user-select: none; justify-content: center; width: 100%; max-width: 320px; }
.action-links span { transition: 0.2s; }
.action-links span:hover { text-decoration: underline; }

.edit-label-wrapper { position: relative; display: inline-flex; align-items: center; }
.edit-label-input { border: 1px dashed transparent; background: transparent; font-family: inherit; color: var(--text-muted); font-size: inherit; font-weight: inherit; outline: none; cursor: pointer; transition: all 0.3s; padding: 4px 25px 4px 4px; width: 100%; box-sizing: border-box; }
.edit-label-input:hover, .edit-label-input:focus { border-color: #ccc; background: #fdfdfd; color: var(--text-dark); cursor: text; }
.edit-label-wrapper i { position: absolute; right: 8px; font-size: 12px; color: #bbb; pointer-events: none; opacity: 0; }
.edit-label-wrapper:hover i { opacity: 1; color: var(--app-theme-color); }
.info-row .edit-label-input { text-align: right; }
.info-row .edit-label-wrapper { width: 130px; margin-right: 15px; justify-content: flex-end; }