/* Base Layout Color Variables */
  .invoice-form-scroll {
      overflow-y: auto;
      padding: 10px;
      margin-bottom: 15px;
      text-align: left;
      border-bottom: 1px dashed #e2e8f0;
      box-sizing: border-box;
  }

  /* Responsive Grid layouts for Invoice fields */
  .invoice-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      width: 100%;
  }
  .invoice-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      width: 100%;
  }

  /* Colorful Section Headers */
  .inv-sec-title {
      font-weight: 800;
      font-size: 14.5px;
      margin-bottom: 15px;
      padding: 10px 15px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
  }
  .sec-sender {
      background: #eff6ff; /* Light Blue */
      border-left: 5px solid #3b82f6;
      color: #1e3a8a;
  }
  .sec-client {
      background: #faf5ff; /* Light Purple */
      border-left: 5px solid #7c3aed;
      color: #581c87;
  }
  .sec-meta {
      background: #ecfeff; /* Light Cyan */
      border-left: 5px solid #0891b2;
      color: #164e63;
  }
  .sec-items {
      background: #fff1f2; /* Light Rose */
      border-left: 5px solid #f43f5e;
      color: #881337;
  }
  .sec-tax {
      background: #fffbeb; /* Light Amber */
      border-left: 5px solid #f59e0b;
      color: #78350f;
  }

  /* Colorful Premium Input Fields */
  .ip-setting-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }
  .ip-setting-item label {
      font-size: 12.5px;
      font-weight: 700;
      color: #475569;
  }
  .ip-setting-item input, 
  .ip-setting-item select,
  .invoice-item-row input {
      width: 100%;
      padding: 12px 16px;
      background: #ffffff !important;
      border: 1.5px solid #cbd5e1 !important;
      border-radius: 12px !important;
      font-size: 14.5px;
      outline: none;
      color: #1e293b;
      box-sizing: border-box;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  }
  /* Glowing Focus Animation */
  .ip-setting-item input:focus, 
  .ip-setting-item select:focus,
  .invoice-item-row input:focus {
      border-color: #6366f1 !important;
      background: #f5f3ff !important;
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
  }

  /* Card Styled Items Row */
  .invoice-item-row {
      display: grid;
      grid-template-columns: 2fr 0.8fr 1.2fr 0.4fr;
      gap: 12px;
      align-items: center;
      background: #f8fafc;
      padding: 15px;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 6px rgba(0,0,0,0.02);
      box-sizing: border-box;
  }

  /* Glowing Grand Total Card (Green Theme) */
  .inv-total-card {
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      border: 1.5px dashed #10b981;
      border-radius: 16px;
      padding: 20px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 10px 25px rgba(16, 185, 129, 0.08);
      box-sizing: border-box;
  }
  .inv-total-card span:first-child {
      font-size: 15px;
      font-weight: 800;
      color: #065f46;
  }
  .inv-total-card span:last-child {
      font-size: 24px;
      font-weight: 900;
      color: #047857;
      text-shadow: 0 2px 10px rgba(4, 120, 87, 0.1);
  }

  /* Responsive Adjustments */
  @media (max-width: 600px) {
      .invoice-grid-2, .invoice-grid-3 {
          grid-template-columns: 1fr;
          gap: 10px;
      }
      .invoice-item-row {
          grid-template-columns: 1fr;
          gap: 8px;
          text-align: left;
      }
      .invoice-form-scroll {
          padding: 5px;
      }
  }